涵義

this可以用在構(gòu)造函數(shù)之中夯尽，表示實(shí)例對(duì)象。除此之外登馒，this還可以用在別的場(chǎng)合匙握。但不管是什么場(chǎng)合，this都有一個(gè)共同點(diǎn)：它總是返回一個(gè)對(duì)象陈轿。

簡(jiǎn)單說(shuō)圈纺，this就是屬性或方法“當(dāng)前”所在的對(duì)象。

this.property

上面代碼中麦射，this就代表property屬性當(dāng)前所在的對(duì)象蛾娶。

下面是一個(gè)實(shí)際的例子。

var person = {
  name: '張三',
  describe: function () {
    return '姓名：'+ this.name;
  }
};

person.describe()
// "姓名：張三"

上面代碼中潜秋，this.name表示name屬性所在的那個(gè)對(duì)象蛔琅。由于this.name是在describe方法中調(diào)用，而describe方法所在的當(dāng)前對(duì)象是person峻呛，因此this指向person罗售，this.name就是person.name。

由于對(duì)象的屬性可以賦給另一個(gè)對(duì)象杀饵，所以屬性所在的當(dāng)前對(duì)象是可變的莽囤，即this的指向是可變的。

var A = {
  name: '張三',
  describe: function () {
    return '姓名：'+ this.name;
  }
};

var B = {
  name: '李四'
};

B.describe = A.describe;
B.describe() // "姓名：李四"

上面代碼中切距，A.describe屬性被賦給B朽缎，于是B.describe就表示describe方法所在的當(dāng)前對(duì)象是B，所以this.name就指向B.name。

稍稍重構(gòu)這個(gè)例子话肖，this的動(dòng)態(tài)指向就能看得更清楚北秽。

function f() {
  return '姓名：'+ this.name;
}

var A = {
  name: '張三',
  describe: f
};

var B = {
  name: '李四',
  describe: f
};

A.describe() // "姓名：張三"
B.describe() // "姓名：李四"

上面代碼中，函數(shù)f內(nèi)部使用了this關(guān)鍵字最筒，隨著f所在的對(duì)象不同贺氓，this的指向也不同。

只要函數(shù)被賦給另一個(gè)變量床蜘，this的指向就會(huì)變辙培。

var A = {
  name: '張三',
  describe: function () {
    return '姓名：'+ this.name;
  }
};

var name = '李四';
var f = A.describe;
f() // "姓名：李四"

上面代碼中，A.describe被賦值給變量f邢锯，內(nèi)部的this就會(huì)指向f運(yùn)行時(shí)所在的對(duì)象（本例是頂層對(duì)象）扬蕊。

再看一個(gè)網(wǎng)頁(yè)編程的例子。

<input type="text" name="age" size=3 onChange="validate(this, 18, 99);">

<script>
function validate(obj, lowval, hival){
  if ((obj.value < lowval) || (obj.value > hival))
    console.log('Invalid Value!');
}
</script>

上面代碼是一個(gè)文本輸入框丹擎，每當(dāng)用戶輸入一個(gè)值尾抑，就會(huì)調(diào)用onChange回調(diào)函數(shù)，驗(yàn)證這個(gè)值是否在指定范圍蒂培。瀏覽器會(huì)向回調(diào)函數(shù)傳入當(dāng)前對(duì)象再愈，因此this就代表傳入當(dāng)前對(duì)象（即文本框），然后就可以從this.value上面讀到用戶的輸入值护戳。

總結(jié)一下翎冲，JavaScript 語(yǔ)言之中，一切皆對(duì)象媳荒，運(yùn)行環(huán)境也是對(duì)象府适，所以函數(shù)都是在某個(gè)對(duì)象之中運(yùn)行，this就是函數(shù)運(yùn)行時(shí)所在的對(duì)象（環(huán)境）肺樟。這本來(lái)并不會(huì)讓用戶糊涂，但是 JavaScript 支持運(yùn)行環(huán)境動(dòng)態(tài)切換逻淌，也就是說(shuō)么伯，this的指向是動(dòng)態(tài)的，沒(méi)有辦法事先確定到底指向哪個(gè)對(duì)象卡儒。

實(shí)質(zhì)

JavaScript 語(yǔ)言之所以有this的設(shè)計(jì)田柔，跟內(nèi)存里面的數(shù)據(jù)結(jié)構(gòu)有關(guān)系。

var obj = { foo:  5 };

上面的代碼將一個(gè)對(duì)象賦值給變量obj骨望。JavaScript 引擎會(huì)先在內(nèi)存里面硬爆，生成一個(gè)對(duì)象{ foo: 5 }，然后把這個(gè)對(duì)象的內(nèi)存地址賦值給變量obj擎鸠。也就是說(shuō)缀磕，變量obj是一個(gè)地址。后面如果要讀取obj.foo，引擎先從obj拿到內(nèi)存地址袜蚕，然后再?gòu)脑摰刂纷x出原始的對(duì)象糟把，返回它的foo屬性。

原始的對(duì)象以字典結(jié)構(gòu)保存牲剃，每一個(gè)屬性名都對(duì)應(yīng)一個(gè)屬性描述對(duì)象遣疯。舉例來(lái)說(shuō)，上面例子的foo屬性凿傅，實(shí)際上是以下面的形式保存的缠犀。

{
  foo: {
    [[value]]: 5
    [[writable]]: true
    [[enumerable]]: true
    [[configurable]]: true
  }
}

注意，foo屬性的值保存在屬性描述對(duì)象的value屬性里面聪舒。

這樣的結(jié)構(gòu)是很清晰的辨液，問(wèn)題在于屬性的值可能是一個(gè)函數(shù)。

var obj = { foo: function () {} };

這時(shí)过椎，引擎會(huì)將函數(shù)單獨(dú)保存在內(nèi)存中室梅，然后再將函數(shù)的地址賦值給foo屬性的value屬性。

{
  foo: {
    [[value]]: 函數(shù)的地址
    ...
  }
}

由于函數(shù)是一個(gè)單獨(dú)的值疚宇，所以它可以在不同的環(huán)境（上下文）執(zhí)行亡鼠。

var f = function () {};
var obj = { f: f };

// 單獨(dú)執(zhí)行
f()

// obj 環(huán)境執(zhí)行
obj.f()

JavaScript 允許在函數(shù)體內(nèi)部，引用當(dāng)前環(huán)境的其他變量敷待。

var f = function () {
  console.log(x);
};

上面代碼中间涵，函數(shù)體里面使用了變量x。該變量由運(yùn)行環(huán)境提供榜揖。

現(xiàn)在問(wèn)題就來(lái)了勾哩，由于函數(shù)可以在不同的運(yùn)行環(huán)境執(zhí)行，所以需要有一種機(jī)制举哟，能夠在函數(shù)體內(nèi)部獲得當(dāng)前的運(yùn)行環(huán)境（context）思劳。所以，this就出現(xiàn)了妨猩，它的設(shè)計(jì)目的就是在函數(shù)體內(nèi)部潜叛，指代函數(shù)當(dāng)前的運(yùn)行環(huán)境。

var f = function () {
  console.log(this.x);
}

上面代碼中壶硅，函數(shù)體里面的this.x就是指當(dāng)前運(yùn)行環(huán)境的x威兜。

var f = function () {
  console.log(this.x);
}

var x = 1;
var obj = {
  f: f,
  x: 2,
};

// 單獨(dú)執(zhí)行
f() // 1

// obj 環(huán)境執(zhí)行
obj.f() // 2

上面代碼中，函數(shù)f在全局環(huán)境執(zhí)行庐椒，this.x指向全局環(huán)境的x椒舵；在obj環(huán)境執(zhí)行，this.x指向obj.x约谈。

使用場(chǎng)合

this主要有以下幾個(gè)使用場(chǎng)合笔宿。
（1）全局環(huán)境
全局環(huán)境使用this犁钟，它指的就是頂層對(duì)象window。

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

上面代碼說(shuō)明措伐，不管是不是在函數(shù)內(nèi)部特纤，只要是在全局環(huán)境下運(yùn)行，this就是指頂層對(duì)象window侥加。
（2）構(gòu)造函數(shù)
構(gòu)造函數(shù)中的this捧存，指的是實(shí)例對(duì)象。

var Obj = function (p) {
  this.p = p;
};

上面代碼定義了一個(gè)構(gòu)造函數(shù)Obj担败。由于this指向?qū)嵗龑?duì)象昔穴，所以在構(gòu)造函數(shù)內(nèi)部定義this.p，就相當(dāng)于定義實(shí)例對(duì)象有一個(gè)p屬性提前。

var o = new Obj('Hello World!');
o.p // "Hello World!"

（3）對(duì)象的方法
如果對(duì)象的方法里面包含this吗货，this的指向就是方法運(yùn)行時(shí)所在的對(duì)象。該方法賦值給另一個(gè)對(duì)象狈网，就會(huì)改變this的指向宙搬。

但是，這條規(guī)則很不容易把握拓哺。請(qǐng)看下面的代碼株旷。

var obj ={
  foo: function () {
    console.log(this);
  }
};

obj.foo() // obj

上面代碼中沼侣，obj.foo方法執(zhí)行時(shí)澡刹，它內(nèi)部的this指向obj豪治。

但是，下面這幾種用法烤礁，都會(huì)改變this的指向讼积。

// 情況一
(obj.foo = obj.foo)() // window
// 情況二
(false || obj.foo)() // window
// 情況三
(1, obj.foo)() // window

上面代碼中，obj.foo就是一個(gè)值脚仔。這個(gè)值真正調(diào)用的時(shí)候勤众，運(yùn)行環(huán)境已經(jīng)不是obj了，而是全局環(huán)境鲤脏，所以this不再指向obj决摧。

可以這樣理解，JavaScript 引擎內(nèi)部凑兰，obj和obj.foo儲(chǔ)存在兩個(gè)內(nèi)存地址，稱(chēng)為地址一和地址二边锁。obj.foo()這樣調(diào)用時(shí)姑食，是從地址一調(diào)用地址二，因此地址二的運(yùn)行環(huán)境是地址一茅坛，this指向obj音半。但是则拷，上面三種情況，都是直接取出地址二進(jìn)行調(diào)用曹鸠，這樣的話煌茬，運(yùn)行環(huán)境就是全局環(huán)境，因此this指向全局環(huán)境彻桃。上面三種情況等同于下面的代碼坛善。

// 情況一
(obj.foo = function () {
  console.log(this);
})()
// 等同于
(function () {
  console.log(this);
})()

// 情況二
(false || function () {
  console.log(this);
})()

// 情況三
(1, function () {
  console.log(this);
})()

如果this所在的方法不在對(duì)象的第一層，這時(shí)this只是指向當(dāng)前一層的對(duì)象邻眷，而不會(huì)繼承更上面的層眠屎。

var a = {
  p: 'Hello',
  b: {
    m: function() {
      console.log(this.p);
    }
  }
};

a.b.m() // undefined

上面代碼中，a.b.m方法在a對(duì)象的第二層肆饶，該方法內(nèi)部的this不是指向a改衩，而是指向a.b，因?yàn)閷?shí)際執(zhí)行的是下面的代碼驯镊。

var b = {
  m: function() {
   console.log(this.p);
  }
};

var a = {
  p: 'Hello',
  b: b
};

(a.b).m() // 等同于 b.m()

如果要達(dá)到預(yù)期效果葫督，只有寫(xiě)成下面這樣。

var a = {
  b: {
    m: function() {
      console.log(this.p);
    },
    p: 'Hello'
  }
};

如果這時(shí)將嵌套對(duì)象內(nèi)部的方法賦值給一個(gè)變量板惑，this依然會(huì)指向全局對(duì)象橄镜。

var a = {
  b: {
    m: function() {
      console.log(this.p);
    },
    p: 'Hello'
  }
};

var hello = a.b.m;
hello() // undefined

上面代碼中，m是多層對(duì)象內(nèi)部的一個(gè)方法洒放。為求簡(jiǎn)便蛉鹿，將其賦值給hello變量，結(jié)果調(diào)用時(shí)往湿，this指向了頂層對(duì)象妖异。為了避免這個(gè)問(wèn)題，可以只將m所在的對(duì)象賦值給hello领追，這樣調(diào)用時(shí)他膳，this的指向就不會(huì)變。

var hello = a.b;
hello.m() // Hello

使用注意點(diǎn)

避免多層 this

由于this的指向是不確定的绒窑，所以切勿在函數(shù)中包含多層的this棕孙。

var o = {
  f1: function () {
    console.log(this);
    var f2 = function () {
      console.log(this);
    }();
  }
}

o.f1()
// Object
// Window

上面代碼包含兩層this，結(jié)果運(yùn)行后些膨，第一層指向?qū)ο?code>o蟀俊，第二層指向全局對(duì)象，因?yàn)閷?shí)際執(zhí)行的是下面的代碼订雾。

var temp = function () {
  console.log(this);
};

var o = {
  f1: function () {
    console.log(this);
    var f2 = temp();
  }
}

一個(gè)解決方法是在第二層改用一個(gè)指向外層this的變量肢预。

var o = {
  f1: function() {
    console.log(this);
    var that = this;
    var f2 = function() {
      console.log(that);
    }();
  }
}

o.f1()
// Object
// Object

上面代碼定義了變量that，固定指向外層的this洼哎，然后在內(nèi)層使用that烫映，就不會(huì)發(fā)生this指向的改變沼本。

事實(shí)上，使用一個(gè)變量固定this的值锭沟，然后內(nèi)層函數(shù)調(diào)用這個(gè)變量抽兆，是非常常見(jiàn)的做法。

JavaScript 提供了嚴(yán)格模式族淮，也可以硬性避免這種問(wèn)題辫红。嚴(yán)格模式下，如果函數(shù)內(nèi)部的this指向頂層對(duì)象瞧筛，就會(huì)報(bào)錯(cuò)厉熟。

var counter = {
  count: 0
};
counter.inc = function () {
  'use strict';
  this.count++
};
var f = counter.inc;
f()
// TypeError: Cannot read property 'count' of undefined

上面代碼中，inc方法通過(guò)'use strict'聲明采用嚴(yán)格模式较幌，這時(shí)內(nèi)部的this一旦指向頂層對(duì)象揍瑟，就會(huì)報(bào)錯(cuò)。

避免數(shù)組處理方法中的 this

數(shù)組的map和foreach方法乍炉，允許提供一個(gè)函數(shù)作為參數(shù)绢片。這個(gè)函數(shù)內(nèi)部不應(yīng)該使用this。

var o = {
  v: 'hello',
  p: [ 'a1', 'a2' ],
  f: function f() {
    this.p.forEach(function (item) {
      console.log(this.v + ' ' + item);
    });
  }
}

o.f()
// undefined a1
// undefined a2

上面代碼中岛琼，foreach方法的回調(diào)函數(shù)中的this底循，其實(shí)是指向window對(duì)象，因此取不到o.v的值槐瑞。原因跟上一段的多層this是一樣的熙涤，就是內(nèi)層的this不指向外部，而指向頂層對(duì)象困檩。

解決這個(gè)問(wèn)題的一種方法祠挫，就是前面提到的，使用中間變量固定this悼沿。

var o = {
  v: 'hello',
  p: [ 'a1', 'a2' ],
  f: function f() {
    var that = this;
    this.p.forEach(function (item) {
      console.log(that.v+' '+item);
    });
  }
}

o.f()
// hello a1
// hello a2

另一種方法是將this當(dāng)作foreach方法的第二個(gè)參數(shù)等舔，固定它的運(yùn)行環(huán)境。

var o = {
  v: 'hello',
  p: [ 'a1', 'a2' ],
  f: function f() {
    this.p.forEach(function (item) {
      console.log(this.v + ' ' + item);
    }, this);
  }
}

o.f()
// hello a1
// hello a2

避免回調(diào)函數(shù)中的 this

回調(diào)函數(shù)中的this往往會(huì)改變指向糟趾，最好避免使用慌植。

var o = new Object();
o.f = function () {
  console.log(this === o);
}

// jQuery 的寫(xiě)法
$('#button').on('click', o.f);

上面代碼中，點(diǎn)擊按鈕以后义郑，控制臺(tái)會(huì)顯示false蝶柿。原因是此時(shí)this不再指向o對(duì)象，而是指向按鈕的 DOM 對(duì)象非驮，因?yàn)?code>f方法是在按鈕對(duì)象的環(huán)境中被調(diào)用的只锭。這種細(xì)微的差別，很容易在編程中忽視院尔，導(dǎo)致難以察覺(jué)的錯(cuò)誤蜻展。

為了解決這個(gè)問(wèn)題，可以采用下面的一些方法對(duì)this進(jìn)行綁定邀摆，也就是使得this固定指向某個(gè)對(duì)象纵顾，減少不確定性。

綁定 this 的方法

this的動(dòng)態(tài)切換栋盹，固然為 JavaScript 創(chuàng)造了巨大的靈活性施逾，但也使得編程變得困難和模糊。有時(shí)例获，需要把this固定下來(lái)汉额，避免出現(xiàn)意想不到的情況。JavaScript 提供了call榨汤、apply蠕搜、bind這三個(gè)方法，來(lái)切換/固定this的指向收壕。

Function.prototype.call()

函數(shù)實(shí)例的call方法妓灌，可以指定函數(shù)內(nèi)部this的指向（即函數(shù)執(zhí)行時(shí)所在的作用域），然后在所指定的作用域中蜜宪，調(diào)用該函數(shù)虫埂。

var obj = {};

var f = function () {
  return this;
};

f() === window // true
f.call(obj) === obj // true

上面代碼中，全局環(huán)境運(yùn)行函數(shù)f時(shí)圃验，this指向全局環(huán)境（瀏覽器為window對(duì)象）掉伏；call方法可以改變this的指向，指定this指向?qū)ο?code>obj澳窑，然后在對(duì)象obj的作用域中運(yùn)行函數(shù)f斧散。

call方法的參數(shù)，應(yīng)該是一個(gè)對(duì)象照捡。如果參數(shù)為空颅湘、null和undefined，則默認(rèn)傳入全局對(duì)象栗精。

var n = 123;
var obj = { n: 456 };

function a() {
  console.log(this.n);
}

a.call() // 123
a.call(null) // 123
a.call(undefined) // 123
a.call(window) // 123
a.call(obj) // 456

上面代碼中闯参，a函數(shù)中的this關(guān)鍵字，如果指向全局對(duì)象悲立，返回結(jié)果為123鹿寨。如果使用call方法將this關(guān)鍵字指向obj對(duì)象，返回結(jié)果為456薪夕〗挪荩可以看到，如果call方法沒(méi)有參數(shù)原献，或者參數(shù)為null或undefined馏慨，則等同于指向全局對(duì)象埂淮。

如果call方法的參數(shù)是一個(gè)原始值，那么這個(gè)原始值會(huì)自動(dòng)轉(zhuǎn)成對(duì)應(yīng)的包裝對(duì)象写隶，然后傳入call方法倔撞。

var f = function () {
  return this;
};

f.call(5)
// Number {[[PrimitiveValue]]: 5}

上面代碼中，call的參數(shù)為5慕趴，不是對(duì)象痪蝇，會(huì)被自動(dòng)轉(zhuǎn)成包裝對(duì)象（Number的實(shí)例），綁定f內(nèi)部的this冕房。

call方法還可以接受多個(gè)參數(shù)躏啰。

func.call(thisValue, arg1, arg2, ...)

call的第一個(gè)參數(shù)就是this所要指向的那個(gè)對(duì)象，后面的參數(shù)則是函數(shù)調(diào)用時(shí)所需的參數(shù)耙册。

function add(a, b) {
  return a + b;
}

add.call(this, 1, 2) // 3

上面代碼中给僵，call方法指定函數(shù)add內(nèi)部的this綁定當(dāng)前環(huán)境（對(duì)象），并且參數(shù)為1和2觅玻，因此函數(shù)add運(yùn)行后得到3想际。

call方法的一個(gè)應(yīng)用是調(diào)用對(duì)象的原生方法。

var obj = {};
obj.hasOwnProperty('toString') // false

// 覆蓋掉繼承的 hasOwnProperty 方法
obj.hasOwnProperty = function () {
  return true;
};
obj.hasOwnProperty('toString') // true

Object.prototype.hasOwnProperty.call(obj, 'toString') // false

上面代碼中溪厘，hasOwnProperty是obj對(duì)象繼承的方法胡本，如果這個(gè)方法一旦被覆蓋，就不會(huì)得到正確結(jié)果畸悬。call方法可以解決這個(gè)問(wèn)題侧甫，它將hasOwnProperty方法的原始定義放到obj對(duì)象上執(zhí)行，這樣無(wú)論obj上有沒(méi)有同名方法蹋宦，都不會(huì)影響結(jié)果披粟。

Function.prototype.apply()

apply方法的作用與call方法類(lèi)似，也是改變this指向冷冗，然后再調(diào)用該函數(shù)守屉。唯一的區(qū)別就是，它接收一個(gè)數(shù)組作為函數(shù)執(zhí)行時(shí)的參數(shù)蒿辙，使用格式如下拇泛。

func.apply(thisValue, [arg1, arg2, ...])

apply方法的第一個(gè)參數(shù)也是this所要指向的那個(gè)對(duì)象，如果設(shè)為null或undefined思灌，則等同于指定全局對(duì)象俺叭。第二個(gè)參數(shù)則是一個(gè)數(shù)組，該數(shù)組的所有成員依次作為參數(shù)泰偿，傳入原函數(shù)熄守。原函數(shù)的參數(shù)，在call方法中必須一個(gè)個(gè)添加，但是在apply方法中裕照，必須以數(shù)組形式添加攒发。

function f(x, y){
  console.log(x + y);
}

f.call(null, 1, 1) // 2
f.apply(null, [1, 1]) // 2

上面代碼中，f函數(shù)本來(lái)接受兩個(gè)參數(shù)晋南，使用apply方法以后晨继，就變成可以接受一個(gè)數(shù)組作為參數(shù)。

利用這一點(diǎn)搬俊，可以做一些有趣的應(yīng)用。
（1）找出數(shù)組最大元素
JavaScript 不提供找出數(shù)組最大元素的函數(shù)蜒茄。結(jié)合使用apply方法和Math.max方法唉擂，就可以返回?cái)?shù)組的最大元素。

var a = [10, 2, 4, 15, 9];
Math.max.apply(null, a) // 15

（2）將數(shù)組的空元素變?yōu)?code>undefined
通過(guò)apply方法檀葛，利用Array構(gòu)造函數(shù)將數(shù)組的空元素變成undefined玩祟。

Array.apply(null, ['a', ,'b'])
// [ 'a', undefined, 'b' ]

空元素與undefined的差別在于，數(shù)組的forEach方法會(huì)跳過(guò)空元素屿聋，但是不會(huì)跳過(guò)undefined空扎。因此，遍歷內(nèi)部元素的時(shí)候润讥，會(huì)得到不同的結(jié)果转锈。

var a = ['a', , 'b'];

function print(i) {
  console.log(i);
}

a.forEach(print)
// a
// b

Array.apply(null, a).forEach(print)
// a
// undefined
// b

（3）轉(zhuǎn)換類(lèi)似數(shù)組的對(duì)象
另外，利用數(shù)組對(duì)象的slice方法楚殿，可以將一個(gè)類(lèi)似數(shù)組的對(duì)象（比如arguments對(duì)象）轉(zhuǎn)為真正的數(shù)組撮慨。

Array.prototype.slice.apply({0: 1, length: 1}) // [1]
Array.prototype.slice.apply({0: 1}) // []
Array.prototype.slice.apply({0: 1, length: 2}) // [1, undefined]
Array.prototype.slice.apply({length: 1}) // [undefined]

上面代碼的apply方法的參數(shù)都是對(duì)象，但是返回結(jié)果都是數(shù)組脆粥，這就起到了將對(duì)象轉(zhuǎn)成數(shù)組的目的砌溺。從上面代碼可以看到，這個(gè)方法起作用的前提是变隔，被處理的對(duì)象必須有length屬性规伐，以及相對(duì)應(yīng)的數(shù)字鍵。
（4）綁定回調(diào)函數(shù)的對(duì)象
前面的按鈕點(diǎn)擊事件的例子匣缘，可以改寫(xiě)如下猖闪。

var o = new Object();

o.f = function () {
  console.log(this === o);
}

var f = function (){
  o.f.apply(o);
  // 或者 o.f.call(o);
};

// jQuery 的寫(xiě)法
$('#button').on('click', f);

上面代碼中，點(diǎn)擊按鈕以后孵户，控制臺(tái)將會(huì)顯示true萧朝。由于apply方法（或者call方法）不僅綁定函數(shù)執(zhí)行時(shí)所在的對(duì)象，還會(huì)立即執(zhí)行函數(shù)夏哭，因此不得不把綁定語(yǔ)句寫(xiě)在一個(gè)函數(shù)體內(nèi)检柬。更簡(jiǎn)潔的寫(xiě)法是采用下面介紹的bind方法。

Function.prototype.bind()

bind方法用于將函數(shù)體內(nèi)的this綁定到某個(gè)對(duì)象，然后返回一個(gè)新函數(shù)何址。

var d = new Date();
d.getTime() // 1481869925657

var print = d.getTime;
print() // Uncaught TypeError: this is not a Date object.

上面代碼中里逆，我們將d.getTime方法賦給變量print，然后調(diào)用print就報(bào)錯(cuò)了用爪。這是因?yàn)?code>getTime方法內(nèi)部的this原押，綁定Date對(duì)象的實(shí)例，賦給變量print以后偎血，內(nèi)部的this已經(jīng)不指向Date對(duì)象的實(shí)例了诸衔。

bind方法可以解決這個(gè)問(wèn)題。

var print = d.getTime.bind(d);
print() // 1481869925657

上面代碼中颇玷，bind方法將getTime方法內(nèi)部的this綁定到d對(duì)象笨农，這時(shí)就可以安全地將這個(gè)方法賦值給其他變量了。

bind方法的參數(shù)就是所要綁定this的對(duì)象帖渠，下面是一個(gè)更清晰的例子谒亦。

var counter = {
  count: 0,
  inc: function () {
    this.count++;
  }
};

var func = counter.inc.bind(counter);
func();
counter.count // 1

上面代碼中，counter.inc方法被賦值給變量func空郊。這時(shí)必須用bind方法將inc內(nèi)部的this份招，綁定到counter，否則就會(huì)出錯(cuò)狞甚。

this綁定到其他對(duì)象也是可以的锁摔。

var counter = {
  count: 0,
  inc: function () {
    this.count++;
  }
};

var obj = {
  count: 100
};
var func = counter.inc.bind(obj);
func();
obj.count // 101

上面代碼中，bind方法將inc方法內(nèi)部的this入愧，綁定到obj對(duì)象鄙漏。結(jié)果調(diào)用func函數(shù)以后，遞增的就是obj內(nèi)部的count屬性棺蛛。

bind還可以接受更多的參數(shù)怔蚌，將這些參數(shù)綁定原函數(shù)的參數(shù)。

var add = function (x, y) {
  return x * this.m + y * this.n;
}

var obj = {
  m: 2,
  n: 2
};

var newAdd = add.bind(obj, 5);
newAdd(5) // 20

上面代碼中旁赊，bind方法除了綁定this對(duì)象桦踊，還將add函數(shù)的第一個(gè)參數(shù)x綁定成5，然后返回一個(gè)新函數(shù)newAdd终畅，這個(gè)函數(shù)只要再接受一個(gè)參數(shù)y就能運(yùn)行了籍胯。

如果bind方法的第一個(gè)參數(shù)是null或undefined，等于將this綁定到全局對(duì)象离福，函數(shù)運(yùn)行時(shí)this指向頂層對(duì)象（瀏覽器為window）杖狼。

function add(x, y) {
  return x + y;
}

var plus5 = add.bind(null, 5);
plus5(10) // 15

上面代碼中，函數(shù)add內(nèi)部并沒(méi)有this妖爷，使用bind方法的主要目的是綁定參數(shù)x蝶涩，以后每次運(yùn)行新函數(shù)plus5，就只需要提供另一個(gè)參數(shù)y就夠了。而且因?yàn)?code>add內(nèi)部沒(méi)有this绿聘，所以bind的第一個(gè)參數(shù)是null嗽上，不過(guò)這里如果是其他對(duì)象，也沒(méi)有影響熄攘。

bind方法有一些使用注意點(diǎn)兽愤。
（1）每一次返回一個(gè)新函數(shù)
bind方法每運(yùn)行一次，就返回一個(gè)新函數(shù)挪圾，這會(huì)產(chǎn)生一些問(wèn)題浅萧。比如，監(jiān)聽(tīng)事件的時(shí)候哲思，不能寫(xiě)成下面這樣惯殊。

element.addEventListener('click', o.m.bind(o));

上面代碼中，click事件綁定bind方法生成的一個(gè)匿名函數(shù)也殖。這樣會(huì)導(dǎo)致無(wú)法取消綁定，所以务热，下面的代碼是無(wú)效的忆嗜。

element.removeEventListener('click', o.m.bind(o));

正確的方法是寫(xiě)成下面這樣：

var listener = o.m.bind(o);
element.addEventListener('click', listener);
//  ...
element.removeEventListener('click', listener);

（2）結(jié)合回調(diào)函數(shù)使用
回調(diào)函數(shù)是 JavaScript 最常用的模式之一，但是一個(gè)常見(jiàn)的錯(cuò)誤是崎岂，將包含this的方法直接當(dāng)作回調(diào)函數(shù)捆毫。解決方法就是使用bind方法，將counter.inc綁定counter冲甘。

var counter = {
  count: 0,
  inc: function () {
    'use strict';
    this.count++;
  }
};

function callIt(callback) {
  callback();
}

callIt(counter.inc.bind(counter));
counter.count // 1

上面代碼中绩卤，callIt方法會(huì)調(diào)用回調(diào)函數(shù)。這時(shí)如果直接把counter.inc傳入江醇，調(diào)用時(shí)counter.inc內(nèi)部的this就會(huì)指向全局對(duì)象濒憋。使用bind方法將counter.inc綁定counter以后，就不會(huì)有這個(gè)問(wèn)題陶夜，this總是指向counter凛驮。

還有一種情況比較隱蔽，就是某些數(shù)組方法可以接受一個(gè)函數(shù)當(dāng)作參數(shù)条辟。這些函數(shù)內(nèi)部的this指向黔夭，很可能也會(huì)出錯(cuò)。

var obj = {
  name: '張三',
  times: [1, 2, 3],
  print: function () {
    this.times.forEach(function (n) {
      console.log(this.name);
    });
  }
};

obj.print() // 沒(méi)有任何輸出

上面代碼中羽嫡，obj.print內(nèi)部this.times的this是指向obj的本姥，這個(gè)沒(méi)有問(wèn)題。但是杭棵，forEach方法的回調(diào)函數(shù)內(nèi)部的this.name卻是指向全局對(duì)象婚惫，導(dǎo)致沒(méi)有辦法取到值。稍微改動(dòng)一下，就可以看得更清楚辰妙。

obj.print = function () {
  this.times.forEach(function (n) {
    console.log(this === window);
  });
};

obj.print()
// true
// true
// true

解決這個(gè)問(wèn)題鹰祸，也是通過(guò)bind方法綁定this。

obj.print = function () {
  this.times.forEach(function (n) {
    console.log(this.name);
  }.bind(this));
};

obj.print()
// 張三
// 張三
// 張三

（3）結(jié)合call方法使用
利用bind方法密浑，可以改寫(xiě)一些 JavaScript 原生方法的使用形式蛙婴，以數(shù)組的slice方法為例。

[1, 2, 3].slice(0, 1) // [1]
// 等同于
Array.prototype.slice.call([1, 2, 3], 0, 1) // [1]

上面的代碼中尔破，數(shù)組的slice方法從[1, 2, 3]里面街图，按照指定位置和長(zhǎng)度切分出另一個(gè)數(shù)組。這樣做的本質(zhì)是在[1, 2, 3]上面調(diào)用Array.prototype.slice方法懒构，因此可以用call方法表達(dá)這個(gè)過(guò)程餐济，得到同樣的結(jié)果。

call方法實(shí)質(zhì)上是調(diào)用Function.prototype.call方法胆剧，因此上面的表達(dá)式可以用bind方法改寫(xiě)絮姆。

var slice = Function.prototype.call.bind(Array.prototype.slice);
slice([1, 2, 3], 0, 1) // [1]

上面代碼的含義就是，將Array.prototype.slice變成Function.prototype.call方法所在的對(duì)象秩霍，調(diào)用時(shí)就變成了Array.prototype.slice.call篙悯。類(lèi)似的寫(xiě)法還可以用于其他數(shù)組方法。

var push = Function.prototype.call.bind(Array.prototype.push);
var pop = Function.prototype.call.bind(Array.prototype.pop);

var a = [1 ,2 ,3];
push(a, 4)
a // [1, 2, 3, 4]

pop(a)
a // [1, 2, 3]

如果再進(jìn)一步铃绒，將Function.prototype.call方法綁定到Function.prototype.bind對(duì)象鸽照，就意味著bind的調(diào)用形式也可以被改寫(xiě)。

function f() {
  console.log(this.v);
}

var o = { v: 123 };
var bind = Function.prototype.call.bind(Function.prototype.bind);
bind(f, o)() // 123

上面代碼的含義就是颠悬，將Function.prototype.bind方法綁定在Function.prototype.call上面矮燎，所以bind方法就可以直接使用，不需要在函數(shù)實(shí)例上使用赔癌。