[javascript]搞清this的指向只需問兩個問題

hailx發表於2017-12-04
JavaScript

在確定身份時我們需要問兩個問題： 1，我是誰；2，我在那

一，考慮一下情景

  • 問：我是學生，我在哪（this = ?）？
    答：學校
  • 問：我是員工，我在哪（this = ?）？
    答：公司
  • 問：我是中國人，我在哪（this = ?）？
    答：中國
  • 問：我去參加運動會，掛著我們學校的名牌，我在哪（this = ?）？
    答：xxx實驗高中

二，再看javascript中的this指向

考慮下面的程式碼

// test01.js

function fa(){
    console.log(this)
}

var obja = {
    fb: function(){
        console.log(this)
    }
}

var objb = {};

var fc = obja.fb;

//執行
fa();
obja.fb();
fc();
fa.call(objb);
fa.apply(objb);
複製程式碼
1，fa()直接呼叫

這是告訴瀏覽器函式fa是全域性作用域（window）下的一個函式，這時候去問fa在哪？，答：全域性作用域，this = window

2，obja.fb()

這是告訴瀏覽器函式fb是物件obja的一個屬性，這時候去問fb在哪？，答：obja，this = obja

3，fc()

fc是obja.fb的引用，這裡有一點需要注意this的指向是在執行階段確定的，fc和fa的執行方式是一樣的，運動會比賽時穿同樣的校服所以是同一個學校的，問：fc在哪？，答：和fa一樣全域性作用域，this = window

4，fa.call(objb) / fa.apply(objb)

進行跑步比賽時同一個學校的學生會被分到一個跑道上面去，在javascript中這個過程通過call、apply實現。運動員fa在跑道objb學校的跑道上面跑，問：fa在哪？ 答：objb，this = objb

總結

簡單來說是在誰上呼叫就指向誰。

  • 通過函式名直接呼叫fa();fc()，相當於是在window上面呼叫，this指向window；
  • 通過物件屬性名呼叫obja.fb()，this 指向該物件
  • 通過指定this的方式呼叫fa.call(objb);fa.apply(objb)，指定的是誰就指向誰

相關文章