首頁  >  文章  >  web前端  >  JavaScript This 的六道坎

JavaScript This 的六道坎

黄舟
黄舟原創
2017-02-21 11:17:371410瀏覽



鑑於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)!


陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn