1. 程式人生 > >前端-淺談箭頭函式的this和普通函式的this

前端-淺談箭頭函式的this和普通函式的this

說起胖函式的this指向這個坑我是踩了很多遍啊,

說起this,我相信只要是做程式設計寫程式碼的對this一定都有了解。我現在和大家說說JavaScript的胖函式的this指向和es5普通函式的this指向什麼不一樣吧。

OK ,我理解的是ES6的箭頭函式的this指向是,在哪裡定義的箭頭函式那麼它的this就指向哪裡。

而ES5普通函式的this指向是,在哪裡呼叫的函式,那麼this就指向哪裡。

我們來看下面的例子


var name='window'; var obj = { name:'obj', nameprintf:function(){ console.log(this
.name) } } obj.nameprintf();//'obj' var w = obj.nameprintf; w();//'window'



第一處列印呼叫了obj.nameprintf(),按照我們前面說的誰呼叫函式,函式裡面的this就指向誰,因此這裡的this指向obj,所以列印obj.name也就是obj。

第二處列印呼叫w(),這裡其實就是把obj.nameprintf這個函式的函式體賦給了w這個函式,相當於在全域性空間下寫了一個w函式,裡面的程式碼就是obj.nameprintf裡面的程式碼,所以此時的this指向window,因此列印的this.name就是window。


我們試試用箭頭函式定義nameprintf這個函式


var name='window'; var obj = { name:'obj', nameprintf:()=>{ console.log(this.name) } } obj.nameprintf();

OK ,我們現在可以看到obj.nameprintf()的執行結果是window。

我們試著和上面普通函式定義的nameprintf比較一下,都是相同的obj.nameprintf()呼叫,列印的this。name卻是不一樣的,

上面我們已經解釋了普通函式的this指向,

現在我們來解釋箭頭函式的this,其實箭頭函式裡是沒有this的

,而普通函式的是有this的。

但是普通函式在定義的時候並不知道自己的this要指向哪裡,所以在被呼叫的時候普通函式裡的this會指向呼叫它的那個物件。

而箭頭函式因為本身沒有this,它會直接繫結到它的詞法作用域內的this,也就是定義它時的作用域內的this值。

通俗點說 就是它會直接繫結到它父級的執行上下文裡的this。

所以上面第二例子裡的箭頭函式裡的this其實指向的是window