本文解釋JavaScript中的this，希望有助你理解this的工作機(jī)制。作為JavaScript程序員，學(xué)習(xí)this對(duì)于你的發(fā)展有很大幫助，可以說(shuō)利大于弊。

this的工作原理

如果一個(gè)函數(shù)被作為一個(gè)對(duì)象的方法調(diào)用，那么this將被指派為這個(gè)對(duì)象。

var parent = {
    method: function () {
        console.log(this);
    }
};
 
parent.method();
//

注意這種行為非常“脆弱”，如果你獲取一個(gè)方法的引用并且調(diào)用，那么this的值不會(huì)是parent了，而是window全局對(duì)象。這讓大多數(shù)開(kāi)發(fā)者迷惑。

var parentless = parent.method;
 
parentless();
//

底線是你應(yīng)該查看調(diào)用鏈，以理解被調(diào)用函數(shù)是一個(gè)對(duì)象的屬性還是它自己。如果它被作為屬性調(diào)用，那么this的值將變成該屬性的對(duì)象，否則this的值將被指派為全局對(duì)象或window。如果在嚴(yán)格模式下，this的值將是undefined。

在被當(dāng)作構(gòu)造函數(shù)的情況下，當(dāng)使用new關(guān)鍵字時(shí)，this將被指派為被創(chuàng)建的實(shí)例對(duì)象。

function ThisClownCar () {
  console.log(this);
}
 
new ThisClownCar();
//

注意，在這種情況下沒(méi)有辦法識(shí)別出一個(gè)函數(shù)是否應(yīng)該被用作構(gòu)造函數(shù)，因此省略new關(guān)鍵字導(dǎo)致this的結(jié)果將是全局對(duì)象，就像我們上面看到的沒(méi)有用parent調(diào)用的例子。

ThisClownCar();
//

改動(dòng)this

.call、?.apply?和.bind?方法用來(lái)操作調(diào)用函數(shù)的方式，幫我們定義this的值和傳遞給函數(shù)的參數(shù)值。

Function.prototype.call 可以有任意數(shù)量的參數(shù)，第一個(gè)參數(shù)被分配給this，剩下的被傳遞給調(diào)用函數(shù)。

Array.prototype.slice.call([1, 2, 3], 1, 2)
//

Function.prototype.apply 的行為和.call類似，但它傳遞給函數(shù)的參數(shù)是一個(gè)數(shù)組，而不是任意參數(shù)。

String.prototype.split.apply('13.12.02', ['.'])
//

var arr = [1, 2];
var add = Array.prototype.push.bind(arr, 3);
 
// effectively the same as arr.push(3)
add();
 
// effectively the same as arr.push(3, 4)
add(4);
 
console.log(arr);
//

function scoping () {
  console.log(this);
 
  return function () {
    console.log(this);
  };
}
 
scoping()();
//

function retaining () {
  var self = this;
 
  return function () {
    console.log(self);
  };
}
 
retaining()();
//

function bound () {
  return function () {
    console.log(this);
  }.bind(this);
}
 
bound()();
//