全局代碼中的this

• 全局中的代碼不管是否處于嚴格模式下，它的this都執行Window

  console.log(this) // Window 復制代碼

箭頭函數的this

• 箭頭函數的this由上下文的詞法作用域決定，即在哪定義的就指向哪里的this

() => {console.log(this) // window 或 global，在全局定義指向全局}obj = {fn: () => {console.log(this) // obj 在obj對象中定義，指向obj}} 復制代碼

普通函數中的this

• 直接調用函數(在全局或者其他函數內)

  • 在非嚴格模式下，this默認指向全局變量（window或global）

    ```js // 在瀏覽器中，全局對象是window, 在NODE中是global function test() {console.log(this) // Window 或者 global(function(){console.log(this) // Window 或者 global}) } test() ``` 復制代碼
    • 在嚴格模式下，this將保持進入執行環境的值，所以，如果沒有指定環境，則默認undefined
    function test() {console.log(this) // undefined (function(){console.log(this) // undefined}) } test() 復制代碼
    • 特殊點：當函數作為回調函數時，需要注意是否隱式綁定了所屬對象，例如：當作為setTimeout的參數時，就默認將函數綁定了window對象
    // setTimeout是window的方法，可以使用window.setTimeout調用 // 調用函數時，對象訪問大致路線：window -> setTimeout -> 獲取參數中test的引用參數 -> 執行 test 函數 function test() {console.log(this) } setTimeout(test, 100); // window 或 global 復制代碼

• 作為對象方法調用則指向當前對象

  • 注意：如下列代碼中的將對象的方法賦值給其他變量在調用，this將按上面的普通方法直接調用函數規則處理
  var a = 'global' function name() {console.log('name', this.a) // 通過普通調用方法直接調用，在嚴格模式下this為undefined，運行報錯，在非嚴格模式下global } var obj = {fn: function () {console.log('inner', this.a) // obj 通過對象obj調用，this指向該對象與模式沒有關系name() },a: 'obj' } obj.fn() var newFn = obj.fn() newFn() // 嚴格模式為undefined，非嚴格為window或者global，按普通方法直接調用的規則處理 function test(fn){fn() } test(obj.fn) // 相當于將fn=obj.fn， 嚴格模式為undefined，非嚴格為window或者global newObj = {fn: 2} test(newObj.fn=obj.fn) // 相當于 fn = newObj.fn = obj.fn， 嚴格模式為undefined，非嚴格為window或者global 復制代碼

• 執行new操作時，構造函數的this指向正在構造的新對象

  function TEST(){this.a = 'obj';console.log(this) //new操作時 TEST { a: 'obj'} this指向正在構造的對象(返回的對象) } var o = new TEST(); console.log(o); // TEST { a: 'obj'} this指向剛剛構造的對象 復制代碼
  • 對es6的class Person {} 使用new操作時，this執行它調用的環境
  class MyTest {constructor (callback) {this.callback = callbackcallback() // 指向window}func () {this.callback() // 指向MyTest} } // let的值不會綁定到window上，無法用window.name訪問 let name = 'global' function Test () {console.log(this, this.name) } new Test() // window 使用let輸出 '', 使用var輸出global let c = new MyTest(Test) // window 使用let輸出 '', 使用var輸出global c.func() // MyTest{} undefined 復制代碼
  • 其他情況下Constructor的執行與普通函數沒有區別，誰調用它則指向誰
  // 當函數直接調用的時候，在非嚴格模式下，this指向window；嚴格模式為undefined // 當函數作為對象的屬性調用的時候，this指向這個對象； // p1.constructor指向Person的構造函數(Person()函數本身)， // 在p1.constructor()時，Person是作為p1的屬性調用的，所以this指向p1； // 當調用p2 = p1.constructor;p2();時，其實就相當于直接調用Person();所以this指向window var name = 'global' function Person() {this.name = 'person';console.log(this); } var p1 = new Person(); p1.constructor(); // Person {name: "person"} var p2 = p1.constructor; p2(); // window 復制代碼

• 設置call/apply/bind后調用，則指向其第一個參數的this，如果為空則在嚴格模式下指向undefined，在非嚴格模式下指向window或global

  // 語法 // 1、函數.apply(對象, [參數列表]) // 2、函數.call(對象, arg1,arg2,arg3…argn) // 3、函數.bind(對象) // 'use strict' var a = 'global'function name() {console.log('name', this.a)}function name2() {console.log('name2', this)}var obj = {a: 'obj'}name.call(obj) // obj this指向通過call綁定的obj對象// name2.call() // 嚴格模式為undefined，非嚴格模式為widow或global 復制代碼

• 作為一個dom事件處理函數，它的this指向添加處理事件的元素（一些瀏覽器在使用非addEventListener的函數動態添加監聽函數時不遵守這個約定）

  // html <div id="A"><div id="B"></div> </div> // javascript var a = document.getElementById('A'); var b = document.getElementById('B'); function logs (e) {console.log(e.target, e.target===this); // 當e.target與e.currentTarget相等時為trueconsole.log(e.currentTarget, e.currentTarget===this); // 總是true } a.addEventListener('click', logs, false); // 點擊A時， // 輸出 A節點信息，true \n A節點信息， true // 點擊B時， // 輸出 B節點信息，false \n A節點信息， true // currentTarget表示實際綁定處理事件的元素 // target表示觸發事件的元素（如點擊B） // 所以處理事件中的this指向實際添加處理事件的元素 復制代碼

• 作為一個內聯事件處理函數，

  • 當代碼被內聯on-event 處理函數調用時，它的this指向監聽器所在的DOM元素，與模式沒有關系
  <button onclick="alert(this.tagName.toLowerCase());">Show this</button> 復制代碼
  • 當代碼包裹在內部函數中時，在非嚴格模式指向window或global對象(即非嚴格模式下調用的函數未設置this時指向的默認對象)，在嚴格模式下為undefined
  <button onclick="alert((function(){return this})());">Show inner this</button> 復制代碼

轉載于:https://juejin.im/post/5d11f193f265da1bd605b26b

總結

以上是生活随笔為你收集整理的理解严格模式下JavaScript的this指向的变化的全部內容，希望文章能夠幫你解決所遇到的問題。

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