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

this的工作原理

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

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

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

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

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

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

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

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

ThisClownCar();
//

改動this

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

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

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

Function.prototype.apply 的行為和.call類似，但它傳遞給函數(shù)的參數(shù)是一個數(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()();
//