1>基本知识
箭头函数是es6对函数的一种简写以及对this的词法分析,是一种语法糖。
2>注意点
2.1>箭头函数的this绑定看的是this所在的函数定义在哪个对象下,绑定到哪个对象则this就指向哪个对象,如果有对象多层嵌套的情况,则this绑定到最近的一层对象上。实际上他是,没有自己的this
function foo(){
setTimeout(()=>{
console.log('id:',this.id);
},1000);
}
var id=21;
foo.call({id:42});//{id:42}
function foo(){
setTimeout(function(){
console.log('id:',this.id);
},1000);
}
var id=21;
foo.call({id:42});//{id:21}
function foo(){
return ()=>{
return ()=>{
return ()=>{
console.log(this.id);
}
}
}
}
var f=foo.call({id:1});
var t1=f.call({id:2})()();//1
var t2=f().call({id:3})();//1
var t3=f()().call({id:4});//1
2.2>不能用作构造函数,不能使用new命令否则抛出错误。
2.3>不可以使用arguments对象,如果要用可以使用rest参数代替
var sum=(...args)=>{
var result=args.reduce((pre,cur,index,arr)=>{
return pre+cur
});
return result;
}
console.log(sum(1,2,3));//6
var sum=(args)=>{
...
}
console.log(sum(1,2,3));//报错
2.4>不能用call,apply,bind方法改变this的指向
2.5>不可以使用yield命令,因此箭头函数不能用作Generator函数
3>书写
1)如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。
var f = () => 5;
// 等同于var f = function () { return 5 };
var sum = (num1, num2) => num1 + num2;
// 等同于var sum = function(num1, num2) {
return num1 + num2;};
2)如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回。
大括号被解释为代码块,对于直接返回对象而言,必须要在对象外面加上括号,否则报错
var sum = (num1, num2) => { return num1 + num2; }
var getTemp=id=>({id:id})
console.log(getTemp(1))//{id:1}
4.2》es7函数绑定
ES7提出了“函数绑定”运算符,函数绑定运算符是并排的两个双冒号(::),双冒号左边是一个对象,右边是一个函数。该运算符会自动将左边的对象,作为上下文环境(即this对象),绑定到右边的函数上面。
foo::bar;
// 等同于bar.bind(foo);
2)如果双冒号左边为空,右边是一个对象的方法,则等于将该方法绑定在该对象上面
var method = obj::obj.foo;
// 等同于var method = ::obj.foo;