箭头函数this指向的实践

timg.jpg
先上一波代码福利；(^__) 嘻嘻……

<code>
//箭头函数表示
function foo(){
console.log(this.id);
return ()=>{
console.log(this.id);
return ()=>{
console.log(this.id);
return ()=>{
console.log(this.id);
}
}
}
}
var f=foo.call({id:1});
f.call({id:2})()();
f().call({id:3})();
f()().call({id:4});
//输出为10个1
</code>

<code>
//正常函数表示
function foo(){
console.log(this.id);
return function(){
console.log(this.id);
return function(){
console.log(this.id);
return function(){
console.log(this.id);
}
}
}
}
var f=foo.call({id:1});
f.call({id:2})()();
f().call({id:3})();
f()().call({id:4});
//输出为1、2、undefined、undefined、undefined、3、undefined、undefined、undefined、4

</code>

箭头函数是没有自己的<code>this</code>值，只能继承外围作用域，也就是<code>foo</code>。

正常情况下，<code>foo</code>的<code>this</code>指向<code>window</code>，因为<code>foo.call({id:1})</code>这句代码，<code>foo</code>的<code>this</code>指向转移到了<code>{id:1}</code>。

所以箭头函数中的<code>this.id</code>全部是 1；

而正常函数中，所有的<code>this</code>指向都是<code>window</code>，经过<code>foo.call({id:1})、f.call({id:2})、f().call({id:3})、f()().call({id:4})</code>

的代码处理之后，各自<code>this</code>指向都变为了自己指定的那个对象，所以<code>this.id</code>如上面结果所示。

有说的不对地方欢迎各位指正！

<blockquote>关于apply、call的使用 http://blog.csdn.net/business122/article/details/8000676</blockquote>
<blockquote>ECMAScript6入门.pdf</blockquote>