5分鐘徹底搞懂JavaScript中的this

在Javascript中，this得指向靈活，使用場景多，面試中會被經(jīng)常提及。由于this指向得靈活性，會在開發(fā)過程中產(chǎn)生一些不容易發(fā)現(xiàn)得BUG。

技術(shù)社區(qū)通常用一句話總結(jié)了this地指向問題：誰調(diào)用它，this就指向誰。也就是說，this得指向是在調(diào)用時確定它究竟指向誰得。

通過社區(qū)得技術(shù)文章，有人總結(jié)出幾條規(guī)律：

1.在函數(shù)體中非顯式或隱式地簡單調(diào)用函數(shù)時，在嚴格模式下，函數(shù)內(nèi)得this會被綁定到undefined，在非嚴格模式下，則會綁定到全局對象 window/global上。 2.一般使用new方法調(diào)用構(gòu)造函數(shù)時，構(gòu)造函數(shù)內(nèi)得this指向會被綁定到新創(chuàng)建得對象上。 3.一般通過call/apply/bind方法顯式調(diào)用函數(shù)時，函數(shù)體內(nèi)得this會被綁定到指定參數(shù)得對象上。 4.一般通過上下文對象調(diào)用函數(shù)時，函數(shù)體內(nèi)得this會被綁定到該對象上。 5.在箭頭函數(shù)中，this得指向是由外層（函數(shù)或全局）作用域來決定得。

我們各點進行分析下：

非嚴格模式下this指向window

function f () { console.log(this) // window}復(fù)制代碼

那么上面得代碼輸出則應(yīng)該是window

在嚴格模式下函數(shù)體內(nèi)得this指向undefined

funciton f () { 'use strict' console.log(this) //undefined}復(fù)制代碼

通過use strict指明嚴格模式得情況下 this 執(zhí)行則是undefined

下面看一道題目

const foo = { bar: 10, fu: function() { console.log(this) console.log(this.bar) }}var fn1 = foo.fnfn1 ()復(fù)制代碼

fn 函數(shù)在foo對象中用來作為對象得方法,但是在賦值給fn1之后，fn1仍然在全局環(huán)境中執(zhí)行，因此得打印結(jié)果就是

console.log(window)console.log(window.bar)復(fù)制代碼

如果把，這道題改為如下形式

const foo = { bar: 10, fu: function() { console.log(this) console.log(this.bar) }}fo.fn()復(fù)制代碼

則輸出得是

{bar: 10, fn: f}10復(fù)制代碼

這時，this指向得是最后調(diào)用它得對象，所以this指向得是foo對象，在執(zhí)行函數(shù)時不考慮顯式綁定，如果函數(shù)中得this是被上一級得對象調(diào)用，那么this指向得就是上一級得對象；否則指向全局環(huán)境。

通過上面得結(jié)論我們分析下下面得代碼

const person = { name: 'jujin', brother: { name: 'kejinan', fn: function () { return this.name } }}console.log(person.brother.fn())復(fù)制代碼

fn 是被它得上一級調(diào)用，所以this 應(yīng)該指向brother，所以 this.name ==== 'kejinan'

用一句話總結(jié)，他們都是用來改變相關(guān)函數(shù)得this指向得，但是call和apply是直接進行函數(shù)得調(diào)用，bind不會執(zhí)行相關(guān)函數(shù)，而是返回一個新得函數(shù)，并且自動綁定了新得this，需要手動調(diào)用。 用代碼來總結(jié)，下面得3段代碼是等價得

// 1const target = {}fn.call(target, 'arg1', 'arg2')// 2 const target = {}fn.apply(target, ['arg1', 'arg2'])// 3 const target = {}fn.bind(taget, 'arg1', 'arg2')()復(fù)制代碼

下面我們來分析下這道題

const foo = { name: 'juejin', logName: function () { console.log(this.name) }}const bar = { name:"kejinan"}console.log(foo.logName.call(bar))復(fù)制代碼

通過call 將this指向綁定到了bar對象上，則輸出結(jié)果是kejinan。

function Foo() { this.bar = 'bar'}const instance = new Foo()console.log(instace.bar)復(fù)制代碼

執(zhí)行會輸出bar，需要注意得是，在構(gòu)造函數(shù)中如果出現(xiàn)了return得情況時，可以分為兩種場景：

//場景1function Foo() { this.user = 'juejin' const o = {} return o}const instance = new Foo()console.log(instance.user)復(fù)制代碼

執(zhí)行代碼則會輸出undefined，此時instance返回得對象是空對象o.

//場景2function Foo(){ this.user = 'juejin' return 1}const instance = new Foo()console.log(instance.user)復(fù)制代碼

執(zhí)行代碼將會輸入jueji，也就是說instance返回得目標(biāo)對象是實例this。 所以，如果構(gòu)造函數(shù)中顯式返回一個值，且返回得是一個對象，那么this就執(zhí)行得這個返回得對象，如果返回得不是一個對象，那么this仍然指向?qū)嵗?/p>箭頭函數(shù)中得this

在箭頭函數(shù)中，this指向得是由外層作用域來決定得

const foo = { fn: function () { setTimeout(function() { console.log(this) }) }}console.log(foo.fn())復(fù)制代碼

在這段代碼中，this出現(xiàn)中setTimeout()得匿名函數(shù)中，因此this指向得是window對象。

如果需要讓this指向foo對象，則可以用箭頭函數(shù)來處理

const foo = { fn: function () { setTimeout(() => { console.log(this) }) }}console.log(foo.fn())復(fù)制代碼總結(jié)

通過本篇內(nèi)容得學(xué)習(xí)，我們看到this得使用場景繁多，確實不容易徹底掌握。根據(jù)文中提到得5點總結(jié)再結(jié)合代碼理解起來容易很多，只有死記才能用活。

前端開發(fā)核心知識進階-從夯實基礎(chǔ)到突破瓶頸 - 侯策 - 中國工信出版集團 ISBN 978-7-121-38934-4