摘要：作為方法進(jìn)行調(diào)用，該上下文是方法的擁有者作為全局函數(shù)調(diào)用，其上下文永遠(yuǎn)是也就是說，該函數(shù)是的一個方法作為構(gòu)造器進(jìn)行調(diào)用時，其上下文對象則是新創(chuàng)建的對象實(shí)例。

this 是 JavaScript 中的一個關(guān)鍵字，當(dāng)一個函數(shù)被調(diào)用時，除了傳入函數(shù)的顯式參數(shù)以外，名為 this 的隱式參數(shù)也被傳入了函數(shù)。this 參數(shù)指向了一個自動生成的內(nèi)部對象，這個內(nèi)部對象被稱為函數(shù)上下文。與其他面向?qū)ο蟮恼Z言不同的是， JavaScript 中的 this 依賴于函數(shù)的調(diào)用方式。所以，想要明白 this 的指向問題，還必須先研究函數(shù)在 JavaScript 中是如何被調(diào)用的。

這說法有點(diǎn)奇怪，函數(shù)當(dāng)然是被作為函數(shù)進(jìn)行調(diào)用的，但我們說一個函數(shù)“作為函數(shù)”被調(diào)用，只是為了區(qū)別于其他的調(diào)用方式。先看一個簡單的例子：

function func1() {
    console.log(this === window); // true
}
func1();

var func2 = function () {
    console.log(this === window); // true
}
func2();

function func3() {
    "use strict";
    console.log(this); // undefined
}
func3();

上面例子中的第一第二個 this 在非嚴(yán)格模式下指向全局上下文，即 window 對象，第三個在嚴(yán)格模式下則為 undefined。

所以，當(dāng)函數(shù)被作為函數(shù)進(jìn)行調(diào)用時，在非嚴(yán)格模式下，函數(shù)的上下文是 window 對象，而在嚴(yán)格模式下，函數(shù)上下文為 undefined。

當(dāng)一個函數(shù)被賦值給一個對象的一個屬性，并使用引用該函數(shù)的這個屬性進(jìn)行調(diào)用函數(shù)時，那么函數(shù)就是作為該對象的一個方法進(jìn)行調(diào)用的。看下面的例子：

var obj = {
    func: function() {
        console.log(this === obj); // true
    }
};
obj.func();

上面的例子中，函數(shù) func 的調(diào)用對象為 obj，所以函數(shù)上下文便是 obj。由此可見，將函數(shù)作為對象的一個方法進(jìn)行調(diào)用時，該對象就是函數(shù)上下文，并且在函數(shù)內(nèi)部可以用 this 來訪問這個對象。

此時，我們再看一下第一種調(diào)用方式，即“作為函數(shù)”調(diào)用。“作為函數(shù)”進(jìn)行調(diào)用的函數(shù)是定義在 window 上的，調(diào)用時也不需要 window 的引用，其實(shí)方式 1 中例子中的 func1() 就是 window.func1()，所以例子中的函數(shù)上下文便是 this。

將函數(shù)作為構(gòu)造器時，函數(shù)的聲明與其他調(diào)用方式的函數(shù)聲明一致。將函數(shù)作為構(gòu)造器調(diào)用的例子如下：

function Student() {
    this.getContext = function() {
        return this;
    }
}
var stu = new Student();
console.log(stu.getContext() === stu); // true

將函數(shù)作為構(gòu)造器調(diào)用時，便會通過這個函數(shù)生成一個新對象，這時，this 指向這個新創(chuàng)建的對象。

從上面幾種調(diào)用方式來看，函數(shù)調(diào)用方式之間的主要差異是：作為 this 參數(shù)傳遞給執(zhí)行函數(shù)的上下文對象之間的區(qū)別。作為方法進(jìn)行調(diào)用，該上下文是方法的擁有者；作為全局函數(shù)調(diào)用，其上下文永遠(yuǎn)是 window （也就是說，該函數(shù)是 window 的一個方法）；作為構(gòu)造器進(jìn)行調(diào)用時，其上下文對象則是新創(chuàng)建的對象實(shí)例。

下面的一種調(diào)用方式可以顯式地指定上下文。

JavaScript 的每個函數(shù)都有 apply() 和 call() 函數(shù)，可以利用任何一個函數(shù)都可以顯式指定任何一個對象作為其函數(shù)上下文。

通過 apply() 方法來調(diào)用函數(shù)，我們要給 apply() 傳入兩個參數(shù)：一個作為函數(shù)上下文對象，另一個作為函數(shù)參數(shù)所組成的數(shù)組。call() 方法的使用方式類似，唯一不同的是給函數(shù)傳入的參數(shù)是一個參數(shù)列表，而不是單個數(shù)組。

function func() {
    var result = 0;
    for(var i = 0; i < arguments.length; i++) {
        result += arguments[i];
    }
    this.result = result;
}
var obj1 = {};
var obj2 = {};
func.apply(obj1, [1, 2, 3]);
func.call(obj2, 4, 5, 6);

console.log(obj1.result === 6); // true
console.log(obj2.result === 15); // true

在上面的代碼中，func.apply(obj1, [1, 2, 3]); 將函數(shù)的上下文定義為 obj1，并且傳入 1、2、3 三個參數(shù)，func.call(obj2, 4, 5, 6); 將函數(shù)的上下文定義為 obj2，并且傳入 4、5、6 三個參數(shù)。

那 apply 和 call 基本相同，那么我們該用哪一個呢？其實(shí) apply 和 call 的區(qū)別僅僅在于調(diào)用時傳入的參數(shù)不同，其他完全一樣。所以，在選擇時，主要看傳入的參數(shù)。如果已知參數(shù)已經(jīng)在數(shù)組里了則用 apply 即可，或者參數(shù)是動態(tài)生成的，可以把參數(shù) push 進(jìn)一個數(shù)組，然后再用 apply 調(diào)用。當(dāng)參數(shù)數(shù)量已知，或者在參數(shù)里有很多無關(guān)的值則用 call 方法調(diào)用。

先看下面例子：

var obj1 = {
    a: 1
};
var obj2 = {
    a: 2,
    func: function() {
        console.log(this.a);
    }.bind(obj1)
};

obj2.func(); // 1

ECMAScript 5 引入了 Function.prototype.bind，其會創(chuàng)建一個綁定函數(shù)，當(dāng)調(diào)用這個綁定函數(shù)時，函數(shù)上下文將會是 bind() 方法的第一個參數(shù)。上面的例子中，將 obj1 設(shè)置為函數(shù)上下文，所以利用 func 來調(diào)用函數(shù)時，函數(shù)的上下文為 obj1，而不是它的調(diào)用者 obj2。

5 個方法分別是：

Array.prototype.every(callbackfn [, thisArg ])

Array.prototype.some(callbackfn [, thisArg ])

Array.prototype.forEach(callbackfn [, thisArg ])

Array.prototype.map(callbackfn [, thisArg ])

Array.prototype.filter(callbackfn [, thisArg ])

當(dāng)調(diào)用以上 5 個方法時，傳入的參數(shù)除了回調(diào)函數(shù)以外，還可以傳入另外一個可選地參數(shù)，即函數(shù)上下文，代表回調(diào)函數(shù)中的函數(shù)上下文。如果省略該參數(shù)，則 callback 被調(diào)用時的 this 值，在非嚴(yán)格模式下為全局對象，在嚴(yán)格模式下傳入 undefined。看下面的例子：

var arr = ["segmentfault"];
var obj = {};
arr.forEach(function(ele, ind) {
    console.log(this === window); // true
});
arr.forEach(function(ele, ind) {
    console.log(this === obj);    // true
}, obj);

在網(wǎng)上找了幾個代碼小例子，來測試對上面內(nèi)容的理解，答案在最下面。

if (true) {
    // this
}

var obj = {
    someData: "a string"
};

function myFun() {
    // this
}

obj.staticFunction = myFun;
obj.staticFunction();

var obj = {
    myMethod : function () {
        // this
    }
};
var myFun = obj.myMethod;
myFun();

function myFun() {
    // this
}
var obj = {
    someData: "a string"
};
myFun.call(obj);

1、window

2、obj

3、window

4、obj

注：以上代碼均在瀏覽器環(huán)境中測試。