摘要：函數(shù)定義在全局作用域中，引用了對(duì)象，調(diào)用函數(shù)之前，的值并不確定，可能會(huì)在代碼執(zhí)行過(guò)程中引用不同的對(duì)象。在全局環(huán)境中調(diào)用函數(shù)時(shí)，引用的就是全局對(duì)象。這兩個(gè)方法的用途都是在特定的作用域中調(diào)用函數(shù)，實(shí)際上等于設(shè)置函數(shù)體內(nèi)對(duì)象的值。

本文首發(fā)于知乎專(zhuān)欄：前端指南

this是函數(shù)內(nèi)部的一個(gè)特殊對(duì)象，它引用的是函數(shù)據(jù)以執(zhí)行的環(huán)境對(duì)象。

當(dāng)在網(wǎng)頁(yè)的全局作用域中調(diào)用函數(shù)時(shí)，this對(duì)象引用的就是window。

console.log(this);//Window

function f() {
    return this;
}
f();//Window

函數(shù)f()定義在全局作用域中，引用了this對(duì)象，調(diào)用函數(shù)之前，this的值并不確定，可能會(huì)在代碼執(zhí)行過(guò)程中引用不同的對(duì)象。在全局環(huán)境中調(diào)用函數(shù)f()時(shí)，this引用的就是全局對(duì)象Window。

將一個(gè)函數(shù)賦給對(duì)象，通過(guò)對(duì)象調(diào)用這個(gè)函數(shù)，它們的this是調(diào)用該函數(shù)的對(duì)象。

var o = {
    color: "blue",
    sayColor: function () {
        return this.color;
    }
};

o.sayColor();//blue

將函數(shù)sayColor賦給對(duì)象o，o.sayColor()被調(diào)用時(shí)，函數(shù)內(nèi)部的this被綁定到o
我們也可以用如下方法：

var o = { color: "blue" };

function sayColor() {
    return this.color;
}

o.sayColor = sayColor;
o.sayColor();//blue

函數(shù)的名字僅僅是一個(gè)包含指針的變量，在何處定義調(diào)用函數(shù)不會(huì)影響到this的行為，全局的sayColor()與o.sayColor()指向的是同一個(gè)函數(shù)。

函數(shù)或方法之前帶有關(guān)鍵字new，它就構(gòu)成了構(gòu)造函數(shù)調(diào)用。通過(guò)構(gòu)造函數(shù)生成一個(gè)新的對(duì)象，this指向新對(duì)象、

function person() {
    this.name = "Jack";
}
var o = new person();
console.log(o.name);//Jack

每個(gè)函數(shù)都包含兩個(gè)非繼承而來(lái)的方法，apply()和call()。這兩個(gè)方法的用途都是在特定的作用域中調(diào)用函數(shù)，實(shí)際上等于設(shè)置函數(shù)體內(nèi)this對(duì)象的值。首先apply()方法接收兩個(gè)參數(shù)：一個(gè)是在其中運(yùn)行函數(shù)的作用域，另一個(gè)是參數(shù)數(shù)組。其中，第二個(gè)參數(shù)可以是Array實(shí)例，也可以是 arguments對(duì)象。

function sum(num1, num2) {
    return num1 + num2;
}
function callSum1(num1, num2) {
    return sum.apply(this, arguments);
}
function callSum2(num1, num2) {
    return sum.apply(this, [num1, num2]);
}
console.log(callSum1(10, 10));//20
console.log(callSum2(10, 10));//20

上邊這個(gè)例子中，callSum1()在執(zhí)行sum()函數(shù)時(shí)傳入了this作為this值（在作用域中調(diào)用的，傳入的就是window對(duì)象）和arguments對(duì)象。而callSum2()也調(diào)用了sum()函數(shù)，但傳入的是this和一個(gè)參數(shù)數(shù)組。

注：在嚴(yán)格模式下，未指定環(huán)境對(duì)象而調(diào)用函數(shù)，則this值不會(huì)被轉(zhuǎn)型為window，除非明確把函數(shù)添加到某個(gè)對(duì)象或者調(diào)用apply()或call()，否則this值是undefined。

call()與apply()方法作用相同，區(qū)別僅僅在于接收參數(shù)方式不同，對(duì)call()而言，第一個(gè)參數(shù)是this沒(méi)有變化，不同的是其余參數(shù)都直接傳遞給函數(shù)。換句話(huà)說(shuō)，在使用call()方法時(shí)，傳遞給函數(shù)的參數(shù)必須逐個(gè)列舉出來(lái)。

function sum(num1, num2) {
    return num1 + num2;
}
function callSum(num1, num2) {
    return sum.call(this, num1, num2);
}
console.log(callSum(10, 10));//20

call()和apply()真正強(qiáng)大的地方在于能擴(kuò)充函數(shù)賴(lài)以運(yùn)行的作用域。

window.color = "red";
var o = { color: "blue" };
function sayColor() {
    console.log(this.color);
}
sayColor();//red
sayColor.call(this);//red
sayColor.call(window);//red
sayColor.call(o);//blue

使用call()或者apply()擴(kuò)充作用域最大的好處，就是對(duì)象不需要與方法有任何耦合關(guān)系。

ES5還定義了bind,這個(gè)方法會(huì)創(chuàng)建一個(gè)函數(shù)的實(shí)例，其this值會(huì)被綁定傳給bind()函數(shù)的值

window.color = "red";
var o = { color: "blue" };
function sayColor() {
    console.log(this.color);
}
var objectSayColor = sayColor.bind(o);
objectSayColor();//blue

在sayColor()調(diào)用bind()并傳入對(duì)象o，創(chuàng)建了objectSayColor()函數(shù),該函數(shù)的this值等于o因此即使在全局作用域中調(diào)用這個(gè)函數(shù)，也會(huì)看到“blue”。

閉包中使用this對(duì)象可能會(huì)導(dǎo)致一些問(wèn)題，this對(duì)象在運(yùn)行時(shí)是基于函數(shù)的執(zhí)行環(huán)境對(duì)象的：在全局函數(shù)中，this等于window，而當(dāng)函數(shù)被作為某個(gè)對(duì)象方法調(diào)用時(shí)，this等于那個(gè)對(duì)象。匿名函數(shù)的執(zhí)行環(huán)境具有全局性，因此其this對(duì)象通常指向window。

var color = "red";
var o = {
    name: "blue",
    sayColor: function () {
        return function () {
            return this.color;
        };
    }
}
console.log(o.sayColor()());//red
//改進(jìn)
var o = {
    color: "blue",
    sayColor: function () {
        var that = this;
        return function () {
            return that.color;
        };
    }
}
console.log(o.sayColor()());//blue

this引用的是函數(shù)據(jù)以執(zhí)行的環(huán)境對(duì)象。但是在使用箭頭函數(shù)時(shí)，函數(shù)體內(nèi)的this對(duì)象，就是定義時(shí)所在的對(duì)象，而不是使用時(shí)所在的對(duì)象。箭頭函數(shù)的使用可參考鏈接
http://es6.ruanyifeng.com/#do...

function foo() {
    setTimeout(() => {
        console.log("id:", this.id);
    }, 100)
}
var id = 21;
foo.call({ id: 42 });//id：42

箭頭函數(shù)中的this指向foo的this，箭頭函數(shù)中也不存在arguments，指向外層函數(shù)foo對(duì)象的arguments。

由于箭頭函數(shù)沒(méi)有自己的this，所以也不能用call()、apply()、bind()改變this的指向。

函數(shù)綁定運(yùn)算符是::，雙冒號(hào)是左邊是一個(gè)對(duì)象，右邊是一個(gè)函數(shù)。該運(yùn)算符會(huì)自動(dòng)將左邊的對(duì)象作為上下文環(huán)境（this對(duì)象），綁定到右邊函數(shù)上。詳細(xì)可參考鏈接
http://es6.ruanyifeng.com/#do...

foo::bar;
//等同于
bar.bind(foo);

在判斷this指向時(shí)，要記住，在沒(méi)有綁定this的情況下，this動(dòng)態(tài)綁定，指向運(yùn)行時(shí)的環(huán)境，而非代碼中的位置，只有箭頭函數(shù)才是靜態(tài)綁定，將this綁定到代碼中的位置。