關於javascript的this指向問題

陳杰就是我發表於2018-06-30
JavaScript

JavaScript中的this關鍵詞是使很多程式設計師的一個頭痛的問題，很多人都會選擇其他代替的方法來逃避this的問題，接下來會給出一些this的用例子（例子都是在瀏覽器壞境下執行），來說明this分別指向誰。

首先要知道每個函式的this是在呼叫時被繫結的，完全取決於函式的呼叫位置（也就是函式的呼叫方法）

例子1

var obj = {
      say: function () {
        setTimeout(() => {
          console.log(this) // obj
        }, 0)
      }
    }
    obj.say()
複製程式碼

上面例子的setTimeout中是箭頭函式,在箭頭函式中的this和上一級指向是同一個。上面程式碼可以寫成

var obj = {
      say: function () {
        let _self = this
        setTimeout(() => {
          console.log(_self) 
        }, 0)
      }
    }
    obj.say()
複製程式碼

這裡是obj呼叫的say，所以say這個函式中的this是指向obj的，也就是_self是obj，那麼上面的例子中的this是指向obj的。

例子2

function test() {
      console.log(this) // Window
    }
 test()
複製程式碼

該例子中的this指向的是Window，test() 相當於 window.test()

例子3

var obj = {
        say: function () {
          function _say() {
            console.log(this) // Window
          }
          return _say.bind(obj)
        } 
      }
      obj.say()
複製程式碼

該列子中的this指向的是Window,要理解這個this要先了解這個程式碼的執行順序

第一步：var obj; 宣告變數
第二步： _say.bind(obj)  給say賦值  這步的時候obj為undefinde
第三步 obj = {...} 給obj賦值
複製程式碼

這裡有句話說obj.bind(arg) arg為mull 和 undefinde 時 obj函式中的this是指向Window的。

例子4

    var obj = {} 
obj.say = function () {
        function _say() {
          console.log(this)  // obj
        }
        return _say.bind(obj)
      }()
      obj.say()
複製程式碼

該例子和上一個很相似，區別是 執行 _say.bind(obj) 該程式碼時 引數obj不一樣，上面為 undefinde，而在該例子中執行bind時obj已經賦值{},所以該例子中的this為obj

結尾

最後關於this問題《你不知道的JavaScript》中有非常詳細的說明。

相關文章