我想在本文解釋JavaScript中的this，希望有助你理解this的工作機(jī)制。作為JavaScript程序員，學(xué)習(xí)this對(duì)于你的發(fā)展 有很大幫助，可以說(shuō)利大于弊。這篇文章的靈感來(lái)自于我最近的工作——我即將完成的書(shū)的***章節(jié)——《JavaScript 應(yīng)用程序設(shè)計(jì) | JavaScript Application Design》（注意：現(xiàn)在你可以購(gòu)買早期版本），我寫(xiě)的是關(guān)于scope工作原理的方面。

似是而非，這可能就是你對(duì)this的感覺(jué)：

[[107304]]

很瘋狂，不是嗎？在這篇短文，我想揭開(kāi)它的神秘面紗。

this的工作原理

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

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

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

var parentless = parent.method; 
  
parentless(); 
// <- Window 

底線是你應(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(); 
// <- 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(); 
// <- Window 

改動(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) 
// <- [2] 

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

String.prototype.split.apply('13.12.02', ['.']) 
// <- ['13', '12', '02'] 

Function.prototype.bind 創(chuàng)建一個(gè)特殊的函數(shù)，該函數(shù)將永遠(yuǎn)使用傳遞給.bind的參數(shù)作為this的值，以及能夠分配部分參數(shù)，創(chuàng)建原函數(shù)的珂里化（curride）版本。

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); 
// <- [1, 2, 3, 3, 4] 

作用域鏈中的this

在下面的例子，this將無(wú)法在作用域鏈中保持不變。這是規(guī)則的缺陷，并且常常會(huì)給業(yè)余開(kāi)發(fā)者帶來(lái)困惑。

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

有一個(gè)常見(jiàn)的方法，創(chuàng)建一個(gè)局部變量保持對(duì)this的引用，并且在子作用域中不能有同命變量。子作用域中的同名變量將覆蓋父作用域中對(duì)this的引用。

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

除非你真的想同時(shí)使用父作用域的this,以及當(dāng)前this值，由于某些莫名其妙的原因,我更喜歡是使用的方法.bind函數(shù)。這可以用來(lái)將父作用域的this指定給子作用域。

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

其他問(wèn)題？

你是否有任何關(guān)于this的問(wèn)題？關(guān)于this怎樣？如果你認(rèn)為我錯(cuò)過(guò)了任何其他邊界情況，或優(yōu)雅的解決方案，請(qǐng)讓我知道

如果你喜歡這篇文章，一定要看看我即將到來(lái)的書(shū)《JavaScript 應(yīng)用程序設(shè)計(jì) | JavaScript Application Design》，您可以訪問(wèn)購(gòu)買早期版本的鏈接。

原文鏈接：http://blog.jobbole.com/54267/