• 作者：陳大魚頭
• github： KRISACHAN
• 鏈接：github.com/YvetteLau/S…
• 背景：最近高級前端工程師 劉小夕 在 github 上開了個每個工作日布一個前端相關題的 repo，懷著學習的心態我也參與其中，以下為我的回答，如果有不對的地方，非常歡迎各位指出。

例子

<script>// 瀏覽器正常情況下console.log(this === window) // true </script> <script>// 函數調用a = 10;function fn1 () {console.log(this.a)}fn1() // 10b = 2console.log(this.b) //2function fn2 () {this.b = 3}fn2()console.log(this.b) // 3 </script> <script>// 方法調用function test () {console.log(this.x)}x = 2var o = {}o.x = 1o.m = testo.m() // 1 </script> <script>// 構造函數調用x = 2function test () {this.x = 1}var o = new test()console.log(x) // 2 </script> <script>// apply調用x = 0function test () {console.log(this.x)}var o = {}o.x = 1o.m = testo.m.apply(o) // 1 </script> <script>// 函數 apply調用var zz = {};zz.a = 1000;a = 10;function fn1 () {console.log(this.a)}fn1.apply(zz) // 1000b = 2console.log(this.b) //2function fn2 () {this.b = 3}fn2.apply(zz)console.log(this.b) // 2 </script> <script>// 函數 apply調用var qqq = {a: 1}var ttt = {a: 2}var mmm = {a: 3}function fq () {console.log(this)}fq.bind(qqq).bind(ttt).bind(mmm)() // {a: 1} </script> <script>// forEachvar arr = [1, 2, 3, 4]var newarr = [5, 6, 7, 8]var newnewarr = [9, 10, 11, 12]arr.forEach(function (e, i, a) {console.log(this) // newarr}, newarr)arr.forEach((e, i, a) => {console.log(this) // window}, newarr) </script> <script>// 立即執行函數(function () {console.log(this) // window})()var o = {};o.x = 999;(function () {console.log(this) // {x:999}}).apply(o);(() => {console.log(this) // window})();(() => {console.log(this) // window}).apply(o) </script> <script>'use strict'console.log(this === window) // true </script> <script>'use strict'var k = {a: 1,b: 2,c: 3}const fn1 = function () {console.log(this)}fn1() // undefinedfn1.apply(k) // {a: 1, b: 2, c: 3}k.m = fn1k.m() // {a: 1, b: 2, c: 3, m: ?} </script> <script>'use strict'const o = {a: 1,b: 2,c: 3}const fn2 = () => {console.log(this)}fn2() // windowfn2.apply(o) // windowo.m = fn2o.m() // window </script> <script>'use strict'const oo = {d: function () {console.log(this)},e: () => {console.log(this)}}const ooo = {a: 1,b: 2,c: 3}oo.d() // {d: ?, e: ?}oo.e() // windowoo.d.apply(ooo) // {a: 1, b: 2, c: 3}oo.e.apply(ooo) // windowvar xxx = oo.dvar yyy = oo.exxx() // undefinedyyy() // window </script> <script>'use strict'// forEachvar arr = [1, 2, 3, 4]var newarr = [5, 6, 7, 8]var newnewarr = [9, 10, 11, 12]arr.forEach(function (e, i, a) {console.log(this) // newarr}, newarr)arr.forEach((e, i, a) => {console.log(this) // window}, newarr) </script> 復制代碼

總結

上面簡單列了 window 下的幾種情況，但其實在node下的情況也類似。 其實法則總結起來就是下面幾點：

無論是否在嚴格模式下，在全局執行環境中（在任何函數體外部） this 都指向全局對象。

簡單函數調用， this 在一般模式下指向全局對象；嚴格模式下 this 默認為 ndefined 。

call , bind, apply在非箭頭函數下修改 this 值；箭頭函數下無法修改（由于 箭頭函數沒有自己的this指針，通過 call() 或 apply() 方法調用一個函數時，只能傳遞參數），不管call , bind, apply多少次，函數的 this 永遠由第一次的決定。

當函數作為對象里的方法被調用時，它們的 this 是調用該函數的對象。

如果該方法存在于一個對象的原型鏈上，那么this指向的是調用這個方法的對象，就像該方法在對象上一樣。

當一個函數用作構造函數時（使用new關鍵字），它的this被綁定到正在構造的新對象。

在ECMA內， this 會調用 原生方法 ResolveThisBinding() 原生方法ResolveThisBinding使用正在運行的執行上下文的LexicalEnvironment確定關鍵字this的綁定。 ResolveThisBinding執行以下步驟：

設置 envRec 為 GetThisEnvironment()；

返回 envRec.GetThisBinding() 。

原生方法GetThisEnvironment找到當前提供關鍵字 this 綁定的環境記錄。 GetThisEnvironment 執行以下步驟：

設置 lex 為??正在運行的執行上下文的 LexicalEnvironment 。

重復以下行為： a. 設置 envRec 為 lex 的 環境記錄； b. 設置 exists 為 envRec.HasThisBinding() c. 如果 exists 為真，返回出 envRec d.設置 outer 為 lex 的外部環境參考值。 e. 斷言： outer 不是 null f. 設置 lex 為 outer

注意：步驟2中的循環必須終止，因為列表的環境總是以全局環境這個綁定。

如果你、喜歡探討技術，或者對本文有任何的意見或建議，你可以掃描下方二維碼，關注微信公眾號“魚頭的Web海洋”，隨時與魚頭互動。歡迎！衷心希望可以遇見你。

總結

以上是生活随笔為你收集整理的前端进阶之如何正确判断this的指向？的全部內容，希望文章能夠幫你解決所遇到的問題。

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