日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
解密JavaScript中的this

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

成都創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設、高性價比克東網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式克東網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設找我們，業(yè)務覆蓋克東地區(qū)。費用合理售后完善，十多年實體公司更值得信賴。

似是而非，這可能就是你對this的感覺：

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

this的工作原理

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

 
 
 
    
  
  
  
  1. var parent = {
    2. 
  
  
  
  2.     method: function () {
    3. 
  
  
  
  3.         console.log(this);
    4. 
  
  
  
  4.     }
    5. 
  
  
  
  5. };
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7. parent.method();
    8. 
  
  
  
  8. // <- parent
    9.

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

 
 
 
    
  
  
  
  1. var parentless = parent.method;
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3. parentless();
    4. 
  
  
  
  4. // <- Window
    5.

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

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

 
 
 
    
  
  
  
  1. function ThisClownCar () {
    2. 
  
  
  
  2.   console.log(this);
    3. 
  
  
  
  3. }
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5. new ThisClownCar();
    6. 
  
  
  
  6. // <- ThisClownCar {}
    7.

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

 
 
 
    
  
  
  
  1. ThisClownCar();
    2. 
  
  
  
  2. // <- Window
    3.

改動this

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

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

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

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

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

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

 
 
 
    
  
  
  
  1. var arr = [1, 2];
    2. 
  
  
  
  2. var add = Array.prototype.push.bind(arr, 3);
    3. 
  
  
  
  3.  
    4. 
  
  
  
  4. // effectively the same as arr.push(3)
    5. 
  
  
  
  5. add();
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7. // effectively the same as arr.push(3, 4)
    8. 
  
  
  
  8. add(4);
    9. 
  
  
  
  9.  
    10. 
  
  
  
  10. console.log(arr);
    11. 
  
  
  
  11. // <- [1, 2, 3, 3, 4]
    12.

作用域鏈中的this

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

 
 
 
    
  
  
  
  1. function scoping () {
    2. 
  
  
  
  2.   console.log(this);
    3. 
  
  
  
  3.  
    4. 
  
  
  
  4.   return function () {
    5. 
  
  
  
  5.     console.log(this);
    6. 
  
  
  
  6.   };
    7. 
  
  
  
  7. }
    8. 
  
  
  
  8.  
    9. 
  
  
  
  9. scoping()();
    10. 
  
  
  
  10. // <- Window
    11. 
  
  
  
  11. // <- Window
    12.

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

 
 
 
    
  
  
  
  1. function retaining () {
    2. 
  
  
  
  2.   var self = this;
    3. 
  
  
  
  3.  
    4. 
  
  
  
  4.   return function () {
    5. 
  
  
  
  5.     console.log(self);
    6. 
  
  
  
  6.   };
    7. 
  
  
  
  7. }
    8. 
  
  
  
  8.  
    9. 
  
  
  
  9. retaining()();
    10. 
  
  
  
  10. // <- Window
    11.

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

 
 
 
    
  
  
  
  1. function bound () {
    2. 
  
  
  
  2.   return function () {
    3. 
  
  
  
  3.     console.log(this);
    4. 
  
  
  
  4.   }.bind(this);
    5. 
  
  
  
  5. }
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7. bound()();
    8. 
  
  
  
  8. // <- Window
    9.

其他問題？

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

如果你喜歡這篇文章，一定要看看我即將到來的書《JavaScript 應用程序設計 | JavaScript Application Design》，您可以訪問購買早期版本的鏈接。


網(wǎng)站題目：解密JavaScript中的this
鏈接地址：http://m.5511xx.com/article/ccdpopj.html