this 到底指向哪里

以下如果沒提及，則為嚴格模式。

js中作用域有兩種:

詞法作用域

動態作用域

詞法作用域

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

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

動態作用域

動態作用域指在代碼運行時才被確定的作用域。
js中只有this的作用域是動態作用域

this的五種綁定

初學js時，會想當然認為this遵循某一條規律，就像物理學那樣，然而并不是。
this的綁定分為五種情況，這五種情況之間毫無規律可言。不過好在都很簡單。

一. 默認綁定

當以如下形式執行一個函數時，this為默認綁定；

func()

• 嚴格模式下，this為undefined
• 非嚴格模式下，this是全局對象。

與函數調用嵌套多少層如何嵌套無關

/* 全是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()

二. 隱式綁定

當以如下行駛執行一個函數時，this為隱式綁定；

a.b.func()

此時this指向點前面一個對象

賦值會改變隱式綁定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

• 函數被賦值成方法

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

• 賦值給參數

極為常見的是回調函數的this是undefined，因為回調函數被復制給參數，參數再調用時變成了默認綁定

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

三. 箭頭函數

箭頭函數會讓this指向最近的函數或全局作用域

• 與最近的函數的this指向相同

function foo() {// 返回一個箭頭函數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,嚴格模式下報錯 */

• 指向全局

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

• 指向實例

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

四. 顯示綁定

call, apply, bind指定this指向

五. new綁定

構造函數，ES6中的class
new構造函數，new class時，this指向實例

總結

五種綁定，后面兩種情況單一，前面兩種會因為方法，函數被賦值而互相轉化。

因為this處于動態作用域，而目前開發時又大量使用框架。我們寫下的代碼，并不總是由我們自己調用，而是被打包工具打包后，由框架調用。導致我們并不知道我們寫下的函數和方法是否被框架復制過或顯示綁定過而改變了this指向。以至this指向更加撲朔迷離。

寫完本文頓時覺得，python里指向明確的self完爆js的this。

總結

以上是生活随笔為你收集整理的this的五种指法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。