介紹

　　在前端面試過程中，面試官經常會問一些關于this關鍵字的問題，即使是工作多年的人也可能知之甚少。因此，本文對this關鍵字進行了詳細分析，以便他人深入了解。

　　什么是"this"?

　　調用函數時，將創建一個執行環境，this 在運行時根據函數的執行環境綁定。它允許函數在內部引用上下文中的執行變量，使函數編程更加優雅和簡潔。

　　看看下面的代碼，想想為什么不同的調用方法會打印出不同的結果。

　　其實很簡單，因為不同的調用方法的this指向不同的點。為什么這指向不同的函數調用方法?是什么決定了這一點?現在讓我們開始帶著問題深入了解這個問題!

　　“this”的約束規則

　　默認綁定

　　默認綁定規則下，函數的運行環境為全局環境，this默認指向Window。

　　默認綁定規則如下：

　　1、this指向Window的全局函數

　　在全局函數中直接打印 this 時，可以看到 this 指向 Window。

　　2、獨立函數調用this指向Window

　　獨立的函數調用，即直接調用函數，如 foo()。

　　這里的foo默認鏈接到Window，相當于window.foo()。根據函數的隱式綁定規則，誰調用誰就指向誰。這里的 this 指向 Window。結果如下：

　　同樣，如果嵌套函數中直接調用的函數也是獨立的函數調用，那么this也指向Window：

　　在上面的代碼中，子函數son也嵌套在對象obj的方法foo中。當直接調用子方法時，子里面的this指向Window，所以子函數里面的this.a結果是全局變量a，也就是10。

　　如果要在子函數中使用 obj 中的變量 a 怎么辦?只需將 this 對象分配給另一個變量，并在子方法中引用此變量：

　　3、對于自執行函數調用，this指向window

　　自執行函數，顧名思義，就是定義函數后自動調用的函數，自執行函數的this指向如下代碼：

　　上面代碼中的foo函數內部嵌套了一個自執行函數son，而son內部的this指向Window。這里this指向的原理類似于獨立函數調用，即先聲明一個son方法，然后通過son()執行該函數。如果要獲取son中上層對象obj的變量，可以在調用時將this點作為參數傳遞給自執行函數son。

　　4、閉包里面的this指向Window

　　閉包可以理解為一個函數內部定義的函數，可以訪問其他函數的內部變量。當我們查看閉包中的 this 點時，我們可以看到 this 指向 Window。

　　上面代碼中，foo函數的第一個this.a的this指向obj對象，所以結果是20。return函數調用的this指向Window，結果是10。obj.foo ()() 可以理解為：

　　fn 是 obj.foo() 返回的函數。fn 函數是獨立調用的，this 指向 Window。

　　隱式綁定

　　當函數作為方法調用時，this指向函數的直接父對象，稱為隱式綁定。

　　在隱式綁定規則中，認為 this 指向調用函數的人，并將指向函數的直接父對象。比如obj.foo()中foo函數里面的this指向obj，而obj1中的foo函數。obj2.foo() 指向 obj2。

　　上面的代碼也是對 foo 函數的調用。調用方法不同，結果不同。

　　‘exp1’中的foo直接被獨立函數調用，所以，this指向Window，結果為10;‘exp2’中的調用方法是obj。foo()，foo函數的this指向上級調用對象obj;結果是 20。'exp3' 中 foo 函數的直接上級對象是 obj2，所以結果是 30。

　　隱式綁定丟失

　　隱式綁定丟失意味著隱式綁定的函數丟失了它的綁定對象，所以默認綁定到Window。這種方法在我們的項目中很容易導致錯誤，但也很常見。

　　1、隱式綁定的函數被分配為沒有 this 指向的變量。

　　在下面的代碼中，obj下的foo值實際上是foo函數的地址信息，并不是真正的foo函數。當 obj.調用 foo() 時， this 的 this 隱式綁定到 obj。當 var fn=obj.foo 為 fn 分配一個函數時。相當于把foo函數的地址賦給fn。這時候fn沒有和obj關聯，所以這里fn()的運行環境就是全局環境，this指向Window，this的結果a 是 10。

　　2、隱式綁定的函數作為參數傳給函數，丟失了this點。

　　當一個隱式綁定的函數直接作為參數傳遞給另一個函數時，這個綁定會丟失，從而指向全局Window。obj.foo作為參數傳給bar函數后，this.a的結果是10。這里bar(obj.foo)等價于var fn=obj.foo; bar(fn)。

　　3、內置對象setTimeout和setInterval函數的隱式綁定丟失

　　內置函數 setTimeout 和 setInterval 的 this 默認指向 Window。

　　對了，當setTimeout或者setInterval的第一個參數是箭頭函數時，this會指向上層的函數執行環境。代碼如下：

　　顯式綁定

　　當我們要將函數綁定到指定對象時，可以使用call、apply、bind等方法手動改變this的方向，即顯式綁定。

　　在下面的代碼中，將 foo 顯式綁定到 p 對象的方法分別使用 call、apply 和 bind 來舉例說明。顯式綁定 call 和 apply 的方法會在顯式綁定后直接調用，而顯式綁定 this 到 bind 的方法需要手動調用。

　　關于硬裝訂

　　顯式綁定可以幫我們把this改成指定對象，但是不能解決隱式綁定缺失的問題，比如：

　　在上面的代碼中，調用是綁定 this 指向 p 對象，但最終 this 指向的是 Window。此時，我們可以通過硬綁定來解決這個問題。

　　“new”綁定

　　new綁定是我們常用的方法。事實上，我們可以創建一個構造，然后新建一個實例對象。這時候this指向了new出來的實例對象。

　　當我們彼此認識時，我們主要做以下事情：

　　a、創建一個新對象

　　b、讓這一點指向新對象并執行構造體

　　c、將新對象的 proto 屬性設置為指向構造的原型對象

　　d、判斷構造的返回類型。如果是，則返回新對象。如果它是引用類型，它將返回此類型的對象。首先，創建了“Person”的構造，然后，通過“new”創建了一個“zhangsan”的實例對象。在“zhangsan”的“foo”函數中，“this”指向“zhangsan”的實例。

　　在嚴格模式下，“this”指向一個問題。

　　1.獨立調用函數的內部“this”是“undefined”

　　2.“call()”和“apply()”中的this總是他們的第一個參數

　　總結

　　這是一個比較復雜的知識點。當然，如果我們真的理解了this的原理，那么遇到this所指出的問題就很簡單了。如果我們明白了這一點，不僅可以為前端面試加分，也有利于我們的發展和學習。

　　讓我們總結一下，其約束原則如下：

　　默認綁定，this指向全局Window。

　　不要忘記隱藏綁定的丟失。

　　它顯示了綁定。他通過使用 call、apply 和 bind 改變了這個方向。

　　new綁定，構造new的一個實例，this指向new的實例對象。