this的指向(簡單描述版)

JameHou發表於2019-02-16

this的指向(簡單描述版)

函式的呼叫

在JS的物件導向中this是表示函式呼叫相關聯的物件(函式的上下文)。所以要想了解this的指向，我們先要清楚函式的呼叫的方式

1.作為函式呼叫

function add(a,b) {
    return a + b;
}

add(1,2);

以上程式碼就是函式作為函式直接被呼叫，那麼在這種情況下，函式上下文(this)就有兩種可能性質

  • 在瀏覽器環境中，this指向了window物件
  • 在嚴格模式下將會是undefined

2.作為方法被呼叫

var method = {};
method.add = function () {};
method.add();

當一個函式被賦值給一個物件屬性，並且通過物件屬性引用的方式時候，函式就會被作為物件的方法被呼叫。那麼在這種情況下，this指向的就是引用該方法的宿主物件

3.作為建構函式呼叫

let person = new Person();

在使用new的時候會有如下動作

  • 建立一個新物件
  • 該物件作為this引數傳遞給建構函式，成為建構函式的上下文
  • 新建構函式物件作為new的返回值

4.使用call,apply方法呼叫

function arguNum() {
    var result = 0;
    for(var i = 0; i < arguments.length; i++) {
        result += arguments[i];
    }

    this.result = result;
}

var obj1 = {};
var obj2 = {};

arguNum.apply(obj1, [1,2,3]);  // 6
arguNum.call(obj2, 1,2,3);  // 6

使用call,apply可以改變this的指向，call&apply區別在於傳遞的引數是通過什麼方式，call傳遞的是引數列表，apply傳遞的是一個陣列。

結語

關於this的指向是前端面試中經常出現的問題，以上只是暫時簡短總結了一下結果而已，後面會對各個函式呼叫的方式進行深入解析。

相關文章