箭頭函式中的this

箭頭函式有幾個使用注意點。

（1）函式體內的this物件，就是定義時所在的物件，而不是使用時所在的物件。

（2）不可以當作建構函式，也就是說，不可以使用new命令，否則會丟擲乙個錯誤。

（3）不可以使用arguments物件，該物件在函式體內不存在。如果要用，可以用 rest 引數代替。

（4）不可以使用yield命令，因此箭頭函式不能用作 generator 函式。

上面四點中，第一點尤其值得注意。this物件的指向是可變的，但是在箭頭函式中，它是固定的。

function foo() , 100);
}var id = 21;
foo.call();// id: 42

上面**中，settimeout的引數是乙個箭頭函式，這個箭頭函式的定義生效是在foo函式生成時，而它的真正執行要等到 100 毫秒後。如果是普通函式，執行時this應該指向全域性物件window，這時應該輸出21。但是，箭頭函式導致this總是指向函式定義生效時所在的物件（本例是），所以輸出的是42。

箭頭函式可以讓settimeout裡面的this，繫結定義時所在的作用域，而不是指向執行時所在的作用域。下面是另乙個例子。

function timer() , 1000);
}var timer = new timer();
settimeout(() => console.log('s1: ', timer.s1), 3100);
settimeout(() => console.log('s2: ', timer.s2), 3100);// s1: 3
// s2: 0

上面**中，timer函式內部設定了兩個定時器，分別使用了箭頭函式和普通函式。前者的this繫結定義時所在的作用域（即timer函式），後者的this指向執行時所在的作用域（即全域性物件）。所以，3100 毫秒之後，timer.s1被更新了 3 次，而timer.s2一次都沒更新。

箭頭函式可以讓this指向固定化，這種特性很有利於封裝**函式。下面是乙個例子，dom 事件的**函式封裝在乙個物件裡面。

var handler = ,
dosomething: function(type) 
};

上面**的init方法中，使用了箭頭函式，這導致這個箭頭函式裡面的this，總是指向handler物件。否則，**函式執行時，this.dosomething這一行會報錯，因為此時this指向document物件。

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

所以，箭頭函式轉成 es5 的**如下。

// es6
function foo() , 100);
}// es5
function foo() , 100);
}

上面**中，轉換後的 es5 版本清楚地說明了，箭頭函式裡面根本沒有自己的this，而是引用外層的this。

請問下面的**之中有幾個this？

function foo() ;
};};
}var f = foo.call();
var t1 = f.call()()();// id: 1
var t2 = f().call()();// id: 1
var t3 = f()().call();// id: 1

上面**之中，只有乙個this，就是函式foo的this，所以t1、t2、t3都輸出同樣的結果。因為所有的內層函式都是箭頭函式，都沒有自己的this，它們的this其實都是最外層foo函式的this。

箭頭函式中的this

箭頭函式及箭頭函式中this的使用

箭頭函式中的this

ES6 函式箭頭函式箭頭函式中的this

箭頭函式中的this

箭頭函式及箭頭函式中this的使用

箭頭函式中的this

ES6 函式 箭頭函式 箭頭函式中的this

相關推薦

ES6 函式箭頭函式箭頭函式中的this