前端-淺談箭頭函式的this和普通函式的this
說起胖函式的this指向這個坑我是踩了很多遍啊,
說起this,我相信只要是做程式設計寫程式碼的對this一定都有了解。我現在和大家說說JavaScript的胖函式的this指向和es5普通函式的this指向什麼不一樣吧。
OK ,我理解的是ES6的箭頭函式的this指向是,在哪裡定義的箭頭函式那麼它的this就指向哪裡。
而ES5普通函式的this指向是,在哪裡呼叫的函式,那麼this就指向哪裡。
我們來看下面的例子
第一處列印呼叫了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其實指向的是window