js中箭头函数和普通函数this的区别

　　最近在学习angularJs的时候因为里面涉及到了箭头函数，箭头函数除了声明上有点区别之外，和普通函数最主要的区别仍是在this的问题上。

Js中函数中嵌套的函数this不会 “继承”。好比说如下代码:

 

 1             var o = {
 2                 name:'xwt',
 3                 age:13
 4             }
 5             function outer(){
 6                 console.log(this);//输出{name:'xwt,age:13}
 7                 !function inner(){
 8                     console.log(this);//输出window
 9                 }();
10             }
11             outer.call(o);

　　上面代码咱们理想的输出是应该都是o，可是很遗憾，inner中的this已是指向全局的window了。也能够这么理解，”this“关键字一般指当前正在执行的函数所在的对象，然而，若是函数并无在对象上被调用，好比在内部函数中，”this“就被设置为全局对象（window）。之前咱们想在inner中使用outer中的this,只能在outer中定义一个变量去保存this,通常是 var that = this;而后在inner中使用that来代替this。

　　用function定义的函数的this是调用的时候去获取的，是不固定的。而箭头函数中的this是箭头函数定义的时候就定义的，而且在函数销毁以前的this都不会随之改变。箭头函数的this

指的就是函数声明时候做用域的this。用一下代码来讲明区别：

 1             name = "cm";
 2             age = 15;
 3             var o = {
 4                 name:'xwt',
 5                 age:13,
 6                 sayName:()=>console.log(this.name),
 7                 sayAge:function(){
 8                     console.log(this.age);
 9                 }
10             };
11             o.sayName();//输出cm
12             o.sayAge();//输出13

　　这里输出的13是没有任何问题的，可是这里为何是输出cm而不是xwt呢？这个回答能够用上面的原理来解答。由于函数sayAge是在声明对象o的时候声明的。此时o是在全局中声明的

一个对象，全部这里sayName绑定的this就是全局的this。那么咱们能够改变sayName的this吗？答案是固然能够。咱们只要建立一个函数，而后在函数中声明o，而后经过call或者apply去改变

函数的this，那么声明出来的sayName的this就是绑定了call或者apply传进来的对象了。

 1             function aa(){
 2                 var o = {
 3                     name:'xwt',
 4                     age:13,
 5                     sayName:()=>console.log(this.name),
 6                     sayAge:function(){
 7                         console.log(this.age);
 8                     }
 9                 };
10                 o.sayName();//输出bb
11                 o.sayAge();//输出13
12             }
13             var bb = {
14                 name:'bb',
15                 age:111
16             }
17             aa.call(bb);

　　如上面的代码是经过call改变声明了o对象时候的做用域中的this，因此sayName绑定的this就是aa函数中的this，也就是bb。全部sayName输出的就是'bb'；

　　这里差很少就解释完了箭头函数中this和普通function中this的区别了。还有若是这里有朋友不是在游览器上运行，而是用node.js来运行的话，node里面的全局指的是global，可是this

不是指向global的，他是指向module.exports（默认也是exports指向的对象）所指向的对象的。因此exports.name = 'xwt'也能够用this.name = 'xwt'来代替。这也是题外话了···

　　参考：http://note.youdao.com/noteshare?id=893741a0f08ce95e930c48265a5a728e&sub=AB0F9A256AD7431699C331F45514A925