JavaScript溫故而知新——函數的4種調用方式

1、做爲函數調用

• 非嚴格模式下的調用上下文(this的值)是全局對象，嚴格模式this爲undefined

function myFunction() {
    return this;
}
myFunction();   // 返回window對象
複製代碼

2、做用方法調用

• 調用上下文爲當前對象，即this指向當前對象

var calculator = {
    value1: 1,
    value2: 1,
    add: function() {
        // this指代當前對象
        this.result = this.value1 + this.value2;
    }
};
calculator.add()    // 調用add方法結算結果
calculator.result   // =>2

// 方括號(屬性訪問表達式)進行屬性訪問操做
calculator["add"]()
複製代碼

• 嵌套函數做爲函數調用，非嚴格模式下this是全局對象，嚴格模式下爲undefined

var o = {
    m: function() {
        var self = this;                // 將this的值進行保存
        console.log(this === o);        // "true"
        f();                            // 調用嵌套函數f()
        
        function f() {
            console.log(this === o);    // "false": this的值爲全局對象或`undefined`
            console.log(self === o);    // "true": self指向外部函數this的值
        }
    }
}
複製代碼

3、構造函數調用

• 若是函數或者方法調用以前帶有new關鍵字，它就構成構造函數調用。
• 構造函數調用會建立一個新的空對象，並初始化這個新建立的對象，將這個對象用做其調用上下文。

var o = {
    m: function() {
        return 1;
    }
}
console.log(new o.m() === 1)    // "false"
複製代碼

在上面的代碼中，儘管構造函數看起來像一個方法調用，但它依然會使用new出來的新對象做爲調用上下文。也就是說，在表達式new o.m()中，調用上下文並非o。

4、間接調用

call()方法和apply()方法
call() 和 apply() 是預約義的函數方法。 兩個方法可用於調用函數，兩個方法的第一個參數是要調用函數的母對象，它是調用上下文。

function myFunction(a, b) {
    return a * b;
}
myObject = myFunction.call(myObject, 10, 2);     // 返回 20
複製代碼

function myFunction(a, b) {
    return a * b;
}
myArray = [10, 2];
myObject = myFunction.apply(myObject, myArray);  // 返回 20
複製代碼

tip：

• call() 和 apply()區別在於第二個參數： apply傳入的是一個參數數組，也就是將多個參數組合成爲一個數組傳入，而call則做爲call的參數傳入（從第二個參數開始）
• 在嚴格模式下, 在調用函數時第一個參數會成爲 this 的值， 即便該參數不是一個對象。
• 在非嚴格模下, 若是第一個參數的值是 null 或 undefined, 它將使用全局對象替代。

結尾

系列文章：

• JavaScript溫故而知新——原型和原型鏈
• JavaScript溫故而知新——執行環境和做用域
• JavaScript溫故而知新——做用域鏈和閉包
• JavaScript溫故而知新——call()和apply()的實現