箭头函数和普通函数的区别

面试时被问到箭头函数和普通函数的区别。。。

-_-||

举个例子:

[javascript]  view plain  copy

1. function make () {  
2.   return ()=>{  
3.     console.log(this);  
4.   }  
5. }  
6. var testFunc = make.call({ name:'foo' });  
7. testFunc();   
8. testFunc.call({ name:'bar' });   

[javascript]  view plain  copy

1. Object {name: "foo"}  
2. Object {name: "foo"}  

可以看到箭头函数在定义之后，this 就不会发生改变了，无论用什么样的方式调用它，this 都不会改变；

原因：箭头函数不会自动绑定局部变量，如this，arguments，super(ES6)，new.target(ES6)等

所以箭头函数没有它自己的this值，箭头函数内的this值继承自外围作用域。在箭头函数中调用 this 时，仅仅是简单的沿着作用域链向上寻找，找到最近的一个 this 拿来使用

[javascript]  view plain  copy

1. {  
2.       ...  
3.       addAll: function addAll(pieces) {  
4.         var self = this;  
5.         _.each(pieces, function (piece) {  
6.           self.add(piece);  
7.         });  
8.       },  
9.       ...  
10.     }  

在这里，你希望在内层函数里写的是this.add(piece)，不幸的是，内层函数并未从外层函数继承this的值。在内层函数里，this会是window或undefined，临时变量self用来将外部的this值导入内部函数。（另一种方式是在内部函数上执行.bind(this)，两种方法都不甚美观。）这时候就可以使用箭头函数来达到要求.