es6箭頭函數 this 指向問題

標籤：func   val   col   代碼塊   window   obj   ret   導致   turn   

es5中 this 的指向

var factory = function(){   this.a = ‘a‘;   this.b = ‘b‘;   this.c = {        a:‘a+‘,        b:function(){return this.a}    }  };console.log(new factory().c.b());  // a+

通過es5的文法調用，返回的是 a+ ，this 的指向是該函數被調用的對象，也就是說函數被調用的時候，這個 this 指向的是誰，哪個對象調用的這個函數，這個 this 就是誰。

es6中 箭頭函數 this 的指向

var factory = function(){   this.a = ‘a‘;   this.b = ‘b‘;   this.c = {        a:‘a+‘,        b:() => {return this.a}    }  };console.log(new factory().c.b());  // a

箭頭函數函數體中 this 的指向是定義時 this 的指向。在定義 b 函數時，b當中的 this 指向的是 這個factory 函數體中的 this ，這個 factory 函數體中的 this 指向的是這個建構函式的執行個體，這個執行個體當中的 a 就等於 ‘a’；雖然是調用的b對象，但這個b對象指向的是這個執行個體。

箭頭函數的this指向：箭頭函數在定義時執行器內容相關的this的指向（不具有塊級範圍），即會取當前的函數的範圍鏈上的this，忽略塊級範圍中的this

 

1.

var x=11;var obj={  x:22,  say:function(){    console.log(this.x)  }}obj.say(); //22

一般的定義函數跟我們的理解是一樣的，啟動並執行時候決定this的指向，我們可以知道當運行obj.say()時候，this指向的是obj這個對象。

2.

var x=11;var obj={ x:22, say:()=>{   console.log(this.x); }}obj.say()；//11

es6箭頭函數中的this是定義時綁定的，就是this是繼承自父執行內容！！中的this，比如這裡的箭頭函數中的this.x，箭頭函數本身與say平級以key:value的形式，也就是箭頭函數本身所在的對象為obj，而obj的父執行內容就是window，因此這裡的this.x實際上表示的是window.x，因此輸出的是11。(this只有在函數被調用，或者通過建構函式new Object()的形式才會有this)

3.

var a=11function test1(){  this.a=22;  let b=function(){    console.log(this.a);  };  b();}var x=new test1();//11

var a=11function test1(){  this.a=22;  let b=function(){    console.log(this.a);  };  b();}test1();//22

箭頭函數情況下：

var a=11;function test2(){  this.a=22;  let b=()=>{console.log(this.a)}  b();}var x=new test2();//22

ES6中定義的時候綁定this的具體含義，應該繼承的是父執行內容裡面的this，切忌是父執行內容！！！

簡單對象（非函數）是沒有執行內容的！

箭頭函數中，this指向的固定化，並不是因為箭頭函數內部有綁定this的機制，實際原因是箭頭函數根本沒有自己的this，導致內部的this就是外層代碼塊的this。正是因為它沒有this，所以也就不能用作建構函式。

es6箭頭函數 this 指向問題