鑑於this 風騷的運作方式,對this 的理解是永不過時的話題,本文試圖通過將其大卸六塊來釘住這個磨人的妖精。
this is all about context.
this 說白了就是找大佬,找擁有當前上下文(context)的物件(context object)。
大佬可以分為六層,層數越高權力越大, this 只會認最大的。
權力最小的大佬是作為備胎的存在,在普通情況下就是全局,瀏覽器裡就是window ;在use strict 的情況下就是undefined 。
function showThis () { console.log(this) } function showStrictThis () { 'use strict' console.log(this) } showThis() // window showStrictThis() // undefined
第二層大佬說白了就是找這個函數前面的點 . 。
如果用到 this 的那個函數是屬於某個 context object 的,那麼這個 context object 會綁定到 this 。
例如下面的例子, boss 是 returnThis 的 context object ,或者說 returnThis 屬於 boss 。
var boss = { name: 'boss', returnThis () { return this } } boss.returnThis() === boss // true
下面這個例子就要小心點咯,能想出答案麼?
var boss1 = { name: 'boss1', returnThis () { return this } } var boss2 = { name: 'boss2', returnThis () { return boss1.returnThis() } } var boss3 = { name: 'boss3', returnThis () { var returnThis = boss1.returnThis return returnThis() } } boss1.returnThis() // boss1 boss2.returnThis() // ? boss3.returnThis() // ?
答案是 boss1 和 window 哦,猜對了嗎。
只要看使用 this 的那個函數。
在boss2.returnThis 裡,使用this 的函數是boss1.returnThis ,所以this 綁定到boss1 ;
在boss3.returnThis 裡,使用this 的函數是returnThis ,所以this 綁定定到備胎。
要想把 this 綁定到 boss2 怎麼做呢?
var boss1 = { name: 'boss1', returnThis () { return this } } var boss2 = { name: 'boss2', returnThis: boss1.returnThis } boss2.returnThis() //boss2
沒錯,只要讓使用 this 的函數是屬於 boss2 就行。
第三層大佬是 Object.prototype.call 和 Object.prototype.apply ,它們可以透過參數指定 this 。 (注意this 是不可以直接賦值的哦, this = 2 會報ReferenceError 。)
function returnThis () { return this } var boss1 = { name: 'boss1' } returnThis() // window returnThis.call(boss1) // boss1 returnThis.apply(boss1) // boss1
第四層大佬是Object.prototype.bind ,他不但透過一個新函數來提供永久的綁定,還會覆蓋第三層大佬的命令。
function returnThis () { return this } var boss1 = { name: 'boss1'} var boss1returnThis = returnThis.bind(boss1) boss1returnThis() // boss1 var boss2 = { name: 'boss2' } boss1returnThis.call(boss2) // still boss1
一個比較容易忽略的會綁定 this 的地方就是 new 。當我們 new 一個函數時,就會自動把 this 綁定在新物件上,然後再呼叫這個函數。它會覆蓋 bind 的綁定。
function showThis () { console.log(this) } showThis() // window new showThis() // showThis var boss1 = { name: 'boss1' } showThis.call(boss1) // boss1 new showThis.call(boss1) // TypeError var boss1showThis = showThis.bind(boss1) boss1showThis() // boss1 new boss1showThis() // showThis
最後一個法力無邊的大佬就是 ES2015 的箭頭函數。箭頭函數裡的 this 不再妖艷,永遠封印到目前詞法作用域之中,稱為 Lexical this ,在程式碼運作前就可以確定。沒有其他大佬可以覆蓋。
這樣的好處就是方便讓回呼函數的 this 使用目前的作用域,不怕造成混淆。
所以對於箭頭函數,只要看它在哪裡建立的就行。
如果對 V8 實現的詞法作用域感興趣可以看看 這裡 。
function callback (cb) { cb() } callback(() => { console.log(this) }) // window var boss1 = { name: 'boss1', callback: callback, callback2 () { callback(() => { console.log(this) }) } } boss1.callback(() => { console.log(this) }) // still window boss1.callback2(() => { console.log(this) }) // boss1
下面這種奇葩的使用方式就需要注意:
var returnThis = () => this returnThis() // window new returnThis() // TypeError var boss1 = { name: 'boss1', returnThis () { var func = () => this return func() } } returnThis.call(boss1) // still window var boss1returnThis = returnThis.bind(boss1) boss1returnThis() // still window boss1.returnThis() // boss1 var boss2 = { name: 'boss2', returnThis: boss1.returnThis } boss2.returnThis() // boss2
如果你不知道最後為什麼會是boss2,繼續理解「對於箭頭函數,只要看它在哪裡創建」這句話。
以上就是JavaScript This 的六道坎的內容,更多相關內容請關注PHP中文網(www.php.cn)!