this 到底指向哪里

以下如果沒(méi)提及，則為嚴(yán)格模式。

js中作用域有兩種:

詞法作用域

動(dòng)態(tài)作用域

詞法作用域

詞法作用域指在書寫代碼時(shí)就被確定的作用域。
看如下代碼

var value = 1;function foo() {console.log(value);}function bar() {var value = 2;foo();}bar();// 結(jié)果是1

動(dòng)態(tài)作用域

動(dòng)態(tài)作用域指在代碼運(yùn)行時(shí)才被確定的作用域。
js中只有this的作用域是動(dòng)態(tài)作用域

this的五種綁定

初學(xué)js時(shí)，會(huì)想當(dāng)然認(rèn)為this遵循某一條規(guī)律，就像物理學(xué)那樣，然而并不是。
this的綁定分為五種情況，這五種情況之間毫無(wú)規(guī)律可言。不過(guò)好在都很簡(jiǎn)單。

一. 默認(rèn)綁定

當(dāng)以如下形式執(zhí)行一個(gè)函數(shù)時(shí)，this為默認(rèn)綁定；

func()

• 嚴(yán)格模式下，this為undefined
• 非嚴(yán)格模式下，this是全局對(duì)象。

與函數(shù)調(diào)用嵌套多少層如何嵌套無(wú)關(guān)

/* 全是undefined */ function printThis(){return this } var obj = {say(){console.log('obj.say',printThis())} } function funcB(){console.log('funcB',printThis());obj.say(); } console.log('funcA',printThis()) obj.say() funcB()

二. 隱式綁定

當(dāng)以如下行駛執(zhí)行一個(gè)函數(shù)時(shí)，this為隱式綁定；

a.b.func()

此時(shí)this指向點(diǎn)前面一個(gè)對(duì)象

賦值會(huì)改變隱式綁定this的指向

• 方法賦值給變量

class T {dotInvoke() {console.log('dotInvoke', this.sayThis())}sayThis() {return this}assignInvoke() {var sayThis = this.sayThis;console.log('assignInvoke', sayThis())} } var tt = new T(); tt.dotInvoke()// 指向T tt.assignInvoke()// undefined

• 函數(shù)被賦值成方法

function printThis(){return this } var obj = {}; obj.say = printThis; obj.say()/* 指向obj */

• 賦值給參數(shù)

極為常見的是回調(diào)函數(shù)的this是undefined，因?yàn)榛卣{(diào)函數(shù)被復(fù)制給參數(shù)，參數(shù)再調(diào)用時(shí)變成了默認(rèn)綁定

function asyncFun(cb){cb() } var obj = {callback(){console.log(this)} } obj.callback()/*隱式綁定 obj */ asyncFun(obj.callback);/*默認(rèn)綁定 undefined */

三. 箭頭函數(shù)

箭頭函數(shù)會(huì)讓this指向最近的函數(shù)或全局作用域

• 與最近的函數(shù)的this指向相同

function foo() {// 返回一個(gè)箭頭函數(shù)return (a)=>{//this 繼承自 foo()return this.a};}var obj1 = {a: 'obj1'};var obj2 = {a: 'obj2'}var arrow1 = foo.call(obj1);var arrow2 = foo.call(obj2);var arrow3 = foo();console.log('arrow1',arrow1())/* obj1 */console.log('arrow2',arrow2())/* obj2 */console.log('arrow3',arrow3())/* undefined,嚴(yán)格模式下報(bào)錯(cuò) */

• 指向全局

var printThis = ()=>this; console.log('printThis',printThis());/* global */

• 指向?qū)嵗?/li>

class Test {printThis = ()=>{return this} } //會(huì)被babel翻譯成 var test = function test() {var _this = this;this.printThis = function () {return _this;}; };

四. 顯示綁定

call, apply, bind指定this指向

五. new綁定

構(gòu)造函數(shù)，ES6中的class
new構(gòu)造函數(shù)，new class時(shí)，this指向?qū)嵗?

總結(jié)

五種綁定，后面兩種情況單一，前面兩種會(huì)因?yàn)榉椒?#xff0c;函數(shù)被賦值而互相轉(zhuǎn)化。

因?yàn)閠his處于動(dòng)態(tài)作用域，而目前開發(fā)時(shí)又大量使用框架。我們寫下的代碼，并不總是由我們自己調(diào)用，而是被打包工具打包后，由框架調(diào)用。導(dǎo)致我們并不知道我們寫下的函數(shù)和方法是否被框架復(fù)制過(guò)或顯示綁定過(guò)而改變了this指向。以至this指向更加撲朔迷離。

寫完本文頓時(shí)覺(jué)得，python里指向明確的self完爆js的this。

總結(jié)

以上是生活随笔為你收集整理的this的五种指法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。