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