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