this的指向(簡單描述版)

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的指向是前端面試中經常出現的問題，以上只是暫時簡短總結了一下結果而已，後面會對各個函數調用的方式進行深入解析。