如下来文字来自阮大神所著书籍摘记。为了加深记忆。本人就手动敲了一遍(相关代码本人也执行过,可保证运行经过.)app
箭头函数注意事项:函数
1) 函数体内的this对象就是定义时所在的对象,而不是使用时所在的对象。this
2) 不能够当作构造函数。也就是说,不可使用new命令,不然会抛出错误。spa
3)不可使用arguments对象,该对象在函数体内不存在。若是要用,能够用rest参数代替。rest
关于什么是arguments对象。能够参考MDN连接https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/argumentscode
4) 不可使用yield命令,所以箭头函数不能用做Generator函数。对象
其中,第一点尤为值得注意,this对象的指向是可变的,但在箭头函数中它是固定的。blog
下面有几个例子体会一下箭头函数的使用:事件
function foo(){ setTimeout(()=> { console.log('id:',this.id); },100); } var id=21; foo.call({id:42}) //输出42
setTimeout的参数是一个箭头函数,这个箭头函数的定义是在foo函数生成时生效的,真正执行要到100ms秒之后。若是是普通函数,执行时this应该指向全局对象window,这时应该输出21.可是箭头函数致使this老是指向函数定义生效时所在的对象(本例是{id:42}),因此输出的是42.ip
var handler={ id:'123456', init:function() { document.addEventListener('click', event=>this.doSomething(event.type,false); }, doSomething:function(type) { console.log('Handling '+type+' for'+this.id); } }
以上代码的init方法中使用了箭头函数,这致使箭头函数里边的this老是指向handler对象。
function foo() { return ()=> { return ()=> { return ()=> { console.log('id:',this.id); } } } } var f=foo.call({id:1}); var t1=f.call({id:2})()(); var t2=f().call({id:3})(); var t3=f()().call({id:4})
上面的代码只有一个this,就是函数foo的this,因此t1,t2,t3都输出一样的结果。由于全部的内层函数都是箭头函数。都没有本身的this,它们的this其实都是最外层foo函数的this.
function foo() { setTimeout(()=> { console.log('args:',arguments) },100) } foo(2,4,6,8)
上面的代码中,箭头函数内部的变量arguments实际上是函数foo的arguments变量。
(function() { return [ console.log((()=>this.x).bind({x:'inner'})()) ] }).call({x:'outer'}); //输出['outer']
上面的代码中,箭头函数没有本身的this,因此bind方法无效,内部的this指向外部的this.