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

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

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

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

我們各點(diǎn)進(jìn)行分析下：

非嚴(yán)格模式下this指向window

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

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

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

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

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

下面看一道題目

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

fn 函數(shù)在foo對(duì)象中用來(lái)作為對(duì)象得方法,但是在賦值給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ù)制代碼

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

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

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

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

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

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

下面我們來(lái)分析下這道題

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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