ES6 new syntax of Arrow Function
Arrow Function.md
Arrow Functions
The basic syntax of an arrow function is as follows
var fn = data => data;
The code means :
var fn = function( data ) {
return data;
}
let getNumber = () => 42;
console.log(typeof getNumber);
console.log(getNumber());
var getPrice = (quantity,tax) => (quantity * 5) + (1 + tax);
console.log(getPrice(2,.095));
var getPrice = (quantity,tax) => {
let price = (quantity * 5)
price *= (1 + tax);
return price;
}
console.log(getPrice(2,.095));
var getNumber = data => ({data: 'check', number: 42});
var getNumber = function(data) {
return {
data:'check',
number: 42
}
}
How create IIFEs using arrow function?
var fn = function( number) {
return {
getNumber: function(){
return number;
}
}
}(42);
console.log(fn.getNumber);
Why we use IIFEs?
This is an effective pattern to shield the expression from the rest of program.
var fn = ((number) => {
return {
getNumber: function() {
return number;
}
}
})(42);
console.log(fn.getNumber());
Difference of function expressions and function declarations
Arrow function do save us a few lines of code and characters ,but the real purpose of the arrow funcion is to handlethe this keyword within functions. this behaves differently inside an arrow function.
Let's take a look at how the this keyword work in general
A tale about this
1.Function Invocation
function getContext(){
console.log(this);
}
getContext() is a Window/Global object.At the time getContext() is called,JavaScript automatically sets this at the global object,which in browser is Window.
if(this === window){
console.log('This refers to the global context')
}
2.Method Invocation
let myObj = {
name: 'fancy',
opration: function(){
console.log(this)
}
}
myObj.opration();
let x = myObj.opration;
x();
let x = myObj.opration;
x();
x.call(myObj);
//myObj.x()?
3.Construtor Invocation
what is constructor invocation?
Constructor invocation happens when an object is created using the new keyword.
function Employee( name, department, salary){
this.name = name;
this.department = department;
this.salary = salary;
console.log('Welcome'+this.name+"!");
}
let john = new Employee('Johe', 'Sales', 4000 );
this in arrow funcion
Arrow function are designed to lexically bind the
context ,which means that this refers to the enclosing
context where the arrow funcion is defined.Unlike a
normal function, arrow function does not create its
own excution context,but takes this from outer function
where it is defined.
function Employee(firstName, department, salary){
this.firstName = firstName;
this.department = department;
this.salary = salary;
this.getInfo = function(){
return function(){
console.log(this.firstName + " from " +
this.department + " earns " + this.salary
);
}
}
}
let jim = new Employee('Jim', 'Finance', '5200');
let printInfo = jim.getInfo();
printInfo();
In this section, Employee is a construtor function and
we created a new employee object called jim using the
constructor function with the new keyword.In order to
print the employee information,we need using the function
returned by jim.getInfo().
Here,printInfo refers to the inner function and since
we are simply making a function invocation,this refers to
the Global object that does not have any Employee properties
and hence produces undefined whenever a property on this is
used.
In the section,we replace the inner function with an arrow function.
In this case,the this keyword refers to the context of the function
enclosing the arrow function unlike the previous case where it referred
the Global object.At the point,it is important to note that arrow functions
do not change their context on invocation.
function Employee(firstName, department, salary) {
this.firstName = firstName;
this.department = department;
this.salary = salary;
this.getInfo = function(){
return() => {
console.log(this.firstName + " from " +
this.department + " earns " + this.salary);
};
}
}
let jim = new Employee ('Jim', 'Finance', 5200);
let printInfo = jim.getInfo();
printInfo();
function Employee(){
this.firstName = "Jack",
this.department = "HR",
this.salary = 4500,
this.getContext = () => {
console.log(this);
}
let mark = new Employee();
mark.getContext();
let context = mark.getContext;
context();
}
In the above example,the context of the arrow function was set
on declaration and it cannot be changed.An important thing to note
here is that you cannot "rebind" an arrow funtion.The context
always fixed.
var details = {
number: 42,
opration: function(){
return () => console.log(this.number);
}
};
var details = {
number: 84
};
details.opration().bind(details2)();
In the example,we are setting the details2 number to 84.But we
now we can't bind a new object to arrow function.The engine does
not throw any error,it just ingores the bind completely. So
42 is printed even if we call the opration method with the details2
object.This also applies to call and apply.So with an arrow function,
calls to bind,call or apply will not be able to change to value
of this.
var product = ( x, y ) => x * y;
console.log(product.call(null,2,3));
console.log(product.apply(null, [2,3]));
var multiply = product.bind(null, 2, 3);
console.log(multiply());
var newFn = () => { },
object = new newFn();
var details = () => 42;
console.log(details.hasOwnProperty("prototype"));
Using arrow function
So,whenever you have a short single-statement inline function
expression,with a computed return value and the function does not
make a reference a self-reference,you can replace it with an
arrow function.
$('.btn').on('click', function(){
var self = this;
setTimeout({
$(self).toggleClass('btn-active');
},1000);
});
$('.btn').on('click',function(){
setTimeout(() => {
$(this).toggleClass('btn-active');
},1000);
});
ES6 new syntax of Arrow Function的更多相关文章
- ES6 new syntax of Default Function Parameters
Default Function Parameters.md Default Function Parameters function getSum(a,b){ a = (a !== undefine ...
- es6语法中的arrow function=>
(x) => x + 相当于 function(x){ ; }; var ids = this.sels.map(item => item.id).join() var ids = thi ...
- ES6 箭头函数(arrow function)
例行声明:接下来的文字内容全部来自 Understanding ECMAScript 6,作者是Nicholas C.Zakas,也就是大名鼎鼎的Professional JavaScript for ...
- [ES6系列-02]Arrow Function:Whats this?(箭头函数及它的this及其它)
[原创] 码路工人 大家好,这里是码路工人有力量,我是码路工人,你们是力量. 如果没用过CSharp的lambda 表达式,也没有了解过ES6,那第一眼看到这样代码什么感觉? /* eg.0 * fu ...
- [ES6] 06. Arrow Function =>
ES6 arrow function is somehow like CoffeeScirpt. CoffeeScript: //function call coffee = -> coffee ...
- vue & lifecycle methods & this bug & ES6 Arrow function & this bind bug
vue & lifecycle methods & this bug ES6 Arrow function & this bind bug bad fetchTableData ...
- ES6 Arrow Function & this bug
ES6 Arrow Function & this bug let accHeadings = document.querySelectorAll(`.accordionItemHeading ...
- ES6 Arrow Function All In One
ES6 Arrow Function All In One this const log = console.log; const arrow_func = (args) => log(`arg ...
- ES6 arrow function vs ES5 function
ES6 arrow function vs ES5 function ES6 arrow function 与 ES5 function 区别 this refs xgqfrms 2012-2020 ...
随机推荐
- python PIL模块学习
PIL PIL:Python Imaging Library.对于图像识别,大量的工作在于图像的处理,处理效果好,那么才能很好地识别,因此,良好的图像处理是识别的基础. PIL安装 安装推荐别人的吧, ...
- Item 15: 只要有可能,就使用constexpr
本文翻译自modern effective C++,由于水平有限,故无法保证翻译完全正确,欢迎指出错误.谢谢! 博客已经迁移到这里啦 如果说C++11中有什么新东西能拿"最佳困惑奖" ...
- [BZOJ 1190][HNOI2007]梦幻岛宝珠
1190: [HNOI2007]梦幻岛宝珠 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 1057 Solved: 611[Submit][Stat ...
- Java基础学习笔记二十四 MySQL安装图解
.MYSQL的安装 1.打开下载的mysql安装文件mysql-5.5.27-win32.zip,双击解压缩,运行“setup.exe”. 2.选择安装类型,有“Typical(默认)”.“Compl ...
- (译文)React----React应用程序流式服务端渲染
好处 React16推出了流式服务端渲染,它允许你并行地分发HTML片段.这样可以让渲染 出的首字节有意义的内容给用户速度更快. (例子1,上面部分是一次性转换,下面是流渲染,两种方式) 而且相对re ...
- (译文)开始学习Vue.js特性--Scoped Slots
什么是scoped slots A scoped slot is a special type of slot that functions as a reusable template (that ...
- 20162318 实验三《 敏捷开发与XP实践》实验报告
北京电子科技学院(BESTI) 实 验 报 告 课程:程序设计与数据结构 班级:1623班 姓名:张泰毓 指导老师:娄老师.王老师 实验日期:2017年5月12日 实验密级:非密级 实验器材:带Lin ...
- AWK读书笔记
1.awk 'parttern {action}' filename 从文件中逐行读取并匹配parttern,若匹配成功执行action否则读取下一行. parttern和action都可选,若省略p ...
- excel2003和excel2007文件的创建和读取
excel2003和excel2007文件的创建和读取在项目中用的很多,首先我们要了解excel的常用组件和基本操作步骤. 常用组件如下所示: HSSFWorkbook excel的文档对象 HSSF ...
- 【learning】多项式相关(求逆、开根、除法、取模)
(首先要%miskcoo,这位dalao写的博客(这里)实在是太强啦qwq大部分多项式相关的知识都是从这位dalao博客里面学的,下面这篇东西是自己对其博客学习后的一些总结和想法,大部分是按照其博客里 ...