碼上歡樂
相關內容    簡體    繁體

JavaScript中的this（你不知道的JavaScript）

本文轉載自   查看原文   2016-08-15 21:35   2230    JavaScript

JavaScript中的this，剛接觸JavaScript時大家都在大肆渲染說其多么多么的靈巧重要，然而自己並不關心；隨着自己對JavaScript一步步深入了解，突然恍然大悟，原來它真的很重要！所以，自己花費了大約2周的時間去查貼、翻閱之前讀的書籍，將this的全貌展示如下。

先出幾道題：

var a = {
value: 'a',
fn:function() {
alert(this.value);
}
};
var b = a.fn;
b();

//undefined

 

var a = {
value: 'a',
fn:function() {
alert(this.value);
}
};
setTimeout(a.fn);
//undefined

 

可以認為是作為“函數”調用。換種形式寫呢：

var a = {
value: 'a',
fn:function() {
alert(this.value);
}
};
var b;
(b = a.fn)();

//undefined

 

沒問題吧？再來個：

var a = {
value: 'a',
fn:function() {
alert(this.value);
}
};
var b = {
value: 'b'
};
(b.fn = a.fn)();

//undefined

 

至於這個為啥this指向window，可以認為進行表達式求值時，返回的是個函數，因此作為函數調用，再看

var a = {
value: 'a',
fn:function() {
alert(this.value);
}
};
(a.fn = a.fn)();
(a.fn, a.fn, a.fn)();

// undefined

// undefined

 

 

var a = {
value: 'a',
fn:function() {
alert(this.value);
}
};
(a.fn)();

//"a"

 

bind綁定問題

var a = {
value: 'a',
fn:function() {
alert(this.value);
}
};
var b = {
value: 'b'
};
a.fn = a.fn.bind(b);
a.fn();

//"b"

 

綁定過了，就不能改了？

var a = {
value: 'a',
fn:function() {
alert(this.value);
}
};
var b = {
value: 'b'
};
a.fn = a.fn.bind(b);
new a.fn();

//undefined

 

ES6的箭頭函數
我們知道如下的this指向window

var fn = function() {
setTimeout(function() {
alert(this.value)
});
};
fn.call({value:'a'});
//undefined

 

但對應的箭頭函數呢？

var fn = function() {
setTimeout(() => {
alert(this.value)
});
};
fn.call({value:'a'});

//

 

以上總總有感於《你不知道的JavaScript》，
書中關於this的介紹還是很詳細的。
還起了幾個名字呢？
默認綁定（函數調用）,
隱式綁定（方法調用）,
顯式綁定（call或apply）,
new綁定（new構造函數）
還像模像樣的給出了調用優先級(上面四種逆序)。。。
此書有英文版(共六本)，可以去啃啃。

 

一、this是什么--基於調用位置的上下文；調用位置不同，this值不同。

大家都JavaScript中this存在兩個誤解：
（1）this指向函數自身
（2）this指向函數的作用域

作用域無法通過JavaScript代碼訪問，它存在於JavaScript引擎內部。每當把this和詞法作用域的查找混合使用時，一定要提醒自己，這是無法實現的！

this是在運行時進行綁定的，並不是在編寫時綁定，它的上下文取決於函數調用時的各種條件。this的綁定和函數聲明的位置沒有任何關系，只取決於函數的調用位置（也就是函數的調用方式）！

示例：

[javascript] view plain copy
  1. var foo = "golbal foo";  
  2. var myObj = {foo : 'myObj foo'};  
  3. var say = function(){  
  4.     console.log(this.foo);  
  5. }  
  6.   
  7. myObj.say = say;  
  8. myObj.say();    //結果：myObj foo  
  9. say();      //結果：golbal foo  

二、為什么使用this

[javascript] view plain copy
  1. var me = {  
  2.     name: "fenfei"  
  3. };  
  4.   
  5. //不使用this，調用  
  6. function speak(name){  
  7.     console.log("Hello, I'm "+ name);  
  8. }  
  9. speak(me.name);     //Hello, I'm fenfei  
  10.   
  11. //使用this，調用  
  12. function speak(){  
  13.     console.log("Hello, I'm "+ this.name);  
  14. }  
  15. speak.call(me);     //Hello, I'm fenfei  

this提供了一種更優雅的方式來隱式“傳遞”對象引用，因此可以將API設計得更加簡潔並易於復用。

三. this的四大綁定規則

1. 默認綁定--函數調用類型：獨立函數調用，this指向全局對象。

[javascript] view plain copy
  1. var a = "foo";  
  2. function foo(){  
  3.     console.log(this.a);  
  4. }  
  5. foo();  // "foo"  

在嚴格模式下，全局對象將無法使用默認綁定，因此this會綁定到undefined。

[javascript] view plain copy
  1. var a = "foo";  
  2. function foo(){  
  3.     "use strict";  
  4.     console.log(this.a);  
  5. }  
  6. foo();  // TypeError：this is undefined  

2. 隱式綁定--調用位置是否有上下文對象，或者說被某個對象擁有或者包含

[javascript] view plain copy
  1. function foo(){  
  2.     console.log(this.a);  
  3. }  
  4. var obj1 = {  
  5.     a : 2,  
  6.     foo : foo  
  7. }  
  8. var obj2 = {  
  9.     a : 1,  
  10.     obj1 : obj1  
  11. }  
  12. obj2.obj1.foo();    //結果：2  

當foo()被調用時，它的落腳點指向obj1對象，隱式綁定規則會把函數調用中的this綁定到這個上下文對象。
對象屬性引用鏈中只有最頂層或者說最后一次層會影響調用位置。

注意：隱式丟失

常見的this綁定問題就是“隱式綁定”的函數會丟失綁定對象，也就是“默認綁定”，從而把this綁定到全局對象（嚴格模式下為undefined）。

[javascript] view plain copy
  1. var a = "foo";  
  2. function foo(){  
  3.     console.log(this.a);  
  4. }  
  5. var obj = {  
  6.     a : 2,  
  7.     foo : foo  
  8. }  
  9. var bar = obj.foo;  
  10. bar();  //"foo"  

雖然bar是obj.foo的一個引用，但是實際上，它引用的是foo函數本身，因此此時的bar()其實是不帶任何修飾的函數調用，因此應用了默認綁定。

[javascript] view plain copy
  1. var a = "foo";  
  2. function foo(){  
  3.     console.log(this.a);  
  4. }  
  5. function doFoo(fn){     //var fn = obj.foo  
  6.     fn();  
  7. }  
  8. var obj = {  
  9.     a : 2,  
  10.     foo : foo  
  11. }  
  12. doFoo(obj.foo); //"foo"  
  13.   
  14. setTimeout(obj.foo, 100);   //"foo"  

參數傳遞其實就是一種隱式賦值，因此傳入函數式會被隱式賦值（LHS）

3. 顯示綁定

（1）call、apply
（2）硬綁定

[javascript] view plain copy
  1. function foo(){  
  2.     console.log(this.a);  
  3. }  
  4. var obj = { a:2 };  
  5. var bar = function(){  
  6.     foo.call(obj);  
  7. };  
  8. bar(); //2  
  9. setTimeout( bar, 1000); //2  
  10. bar.call( window ); //2  

創建了函數bar()，在其內部手動調用了foo.call(obj)，因此強制把foo的this綁定到了obj上。無論之后如何調用函數bar，總會手動在obj上調用foo。這種顯示的強制綁定，稱為“硬綁定”。

4. new綁定

new調用函數會自動執行下面操作：
（1）創建（或者說構造）一個全新的對象；
（2）這個新對象會被執行[[原型]]連接；
（3）這個新對象會綁定到函數調用的this；
（4）如果函數沒有返回其他對象，那么new表達式中的函數調用會自動返回這個新對象。

四、優先級

了解了函數調用中this綁定的四條規則，需要做的就是找到函數的調用位置並判斷對應哪條規則。

1. 函數是否是new綁定？如果是，this綁定的是新創建的對象。

[javascript] view plain copy
  1. var bar = new Foo();  

2. 函數是否通過call、apply顯示綁定或硬綁定？如果是，this綁定的是指定的對象。

[javascript] view plain copy
  1. var bar = foo.call(obj);  

3. 函數是否在某個上下文對象中隱式調用？如果是，this綁定的是那個上下文對象。

[javascript] view plain copy
  1. var bar = obj.foo();  

4. 上述全不是，則使用默認綁定。如果在嚴格模式下，就綁定到undefined，否則綁定到全局window對象。

[javascript] view plain copy
  1. var bar = foo();  

五、綁定this注意點

1. 忽略this

把null或undefined作為this的綁定對象傳入call、apply、bind，調用時會被忽略，實際應用的是默認綁定規則！

[javascript] view plain copy
  1. function foo(){  
  2.     console.log(this.a);  
  3. }  
  4. var a = 1;  
  5. foo.call(null, 2);          //1  
  6. foo.apply(undefined, [3]);  //1  

2. 間接引用

[javascript] view plain copy
  1. function foo(){  
  2.     console.log(this.a);  
  3. }  
  4. var a = 2;  
  5. var o = { a : 3,foo : foo};  
  6. var p = { a : 4};  
  7. o.foo();            //3  
  8. (p.foo = o.foo)();  //2 間接引用  
  9. var pfoo = o.foo;  
  10. pfoo();         //2 隱式丟失  

注意：同上述“隱式丟失”結果一樣，但是過程不太一樣，區分！！

3. ES6箭頭函數

箭頭函數不使用this的四種標准規則，而是根據外層（函數或者全局）作用域來決定this。
箭頭函數的綁定無法被修改。常用於回調函數中，如事件處理器或定時器。和ES6之前代碼中的this = self機制一樣。

[javascript] view plain copy
  1. function foo(){  
  2.     setTimeout(()=>{  
  3.         console.log(this.a);  
  4.     },100);  
  5. }  
  6. var obj = { a : 2};  
  7. foo.call(obj);  

等價於：

[javascript] view plain copy
  1. function foo(){  
  2.     var self = this;  
  3.     setTimeout(function(){  
  4.         console.log(self.a);  
  5.     },100);  
  6. }  
  7. var obj = { a : 2};  
  8. foo.call(obj);  

六、詳解如何確定this

1.（隱式綁定）如果某個對象中某個成員是個function，當從這個對象上調用這個方法時this指向當前對象。

[javascript] view plain copy
  1. var FenFei = {  
  2.     firstname:"li",  
  3.     lastname:"gang",  
  4.     timeTravel:function(year){  
  5.         console.log(this.firstname + " " + this.lastname + " is time traveling to " + year);  
  6.     }  
  7. }  
  8.   
  9. FenFei.timeTravel(2014);    //li gang is time traveling to 2014（父/擁有者對象：FenFei）  

2.（隱私綁定）可以通過創建一個新的對象，來引用FenFei對象上的timeTravel方法。

[javascript] view plain copy
  1. var Camile = {  
  2.     firstname:"li",  
  3.     lastname:"yunxia"  
  4. }  
  5.   
  6. Camile.timeTravel = FenFei.timeTravel;  
  7. Camile.timeTravel(2014);    //li yunxia is time traveling to 2014（父/擁有者對象：Camile）  

注意：此示例同上述“隱式丟失”、“間接引用”區分！！！

3.（隱式丟失）使用變量保存FenFei.timeTravel方法的引用

[javascript] view plain copy
  1. var getTimeTravel = FenFei.timeTravel;  
  2. getTimeTravel(2014);    //undefined undefined is time traveling to 2014（父/擁有者對象：Window；window對象里並沒有firstName和lastName屬性）  

PS：謹記方法中的this將指向調用它的那個父/擁有者對象！無論何時，當一個函數被調用，我們必須看方括號或者是圓括號左邊緊鄰的位置，如果我們看到一個引用（reference），那么傳到function里面的this值就是指向這個方法所屬於的那個對象，如若不然，那它就是指向全局對象的。

4. 異步調用的方法內部的this

[html] view plain copy
  1. <button id="async">點擊我</button>  
[javascript] view plain copy
  1. var btnDom = document.getElementById("async");  
  2. btnDom.addEventListener('click',FenFei.timeTravel);//undefined undefined is time traveling to [object MouseEvent]（父/擁有者對象：button）  
  3.   
  4. btnDom.addEventListener('click',function(e){  
  5.     FenFei.timeTravel(2014);//li gang is time traveling to 2014（父/擁有者對象：FenFei）  
  6. });  

5.（new綁定）構造函數里的this

當使用構造函數創建一個對象的實例時，構造函數里的this就是新建的實例。

[javascript] view plain copy
  1. var TimeTravel = function(fName, lName){  
  2.     this.firstname = fName;  
  3.     this.lastname = lName;  
  4. }  
  5.   
  6. var FenFei = new TimeTravel("li", "gang");  
  7. console.log(FenFei.firstname + " " + FenFei.lastname);      //li gang  

6.（顯示綁定）call和apply方法設定this值

[javascript] view plain copy
  1. var Camile = {  
  2.     firstname:"li",  
  3.     lastname:"yunxia"  
  4. }  
  5.   
  6. FenFei.timeTravel.call(Camile,2014);        //li yunxia is time traveling to 2014（指定this對象為Camile）  
  7. FenFei.timeTravel.apply(Camile,[2014]); //li yunxia is time traveling to 2014（指定this對象為Camile）  

PS：注意和上述“2”處做對比

7.（顯示綁定）bind將函數綁定至某個對象（ES5）

[javascript] view plain copy
  1. function f(y){  
  2.     return this.x + y;  
  3. }  
  4. var o = {x:1};  
  5. /* f.bind(o)返回一個新函數，調用g(2)會把原始的函數f()當作o的方法來調用 */  
  6. var g = f.bind(o);    
  7. g(2);   // 3  

補充：ES5之前方法模擬bind()方法

[javascript] view plain copy
  1. function myBind(f, o){  
  2.     if(f.bind){  
  3.         return f.bind(o);  
  4.     }else{  
  5.         return function(){  
  6.             return f.apply(o, arguments);  
  7.         }  
  8.     }  
  9. }  

bind的作用和apply，call類似都是改變函數的execute context，也就是runtime時this關鍵字的指向。但是使用方法略有不同。一個函數進行bind后可稍后執行。 

七、補充

1. 使用new為函數創建多個實例的時候，這些實例會共享prototype。

當在一個實例里直接給this添加屬性的時，會隱藏prototype中與之同名的屬性。
如果想訪問prototype中的屬性值而不是自己的設定的屬性值：
（1）刪除實例自己添加的屬性： delete 實例名.屬性名
（2）直接訪問prototype中的屬性：Thing.prototype.name

[javascript] view plain copy
  1. function Thing(){}  
  2. Thing.prototype.name = "leegang";  
  3. Thing.prototype.getName = function(){  
  4.     console.log(this.name);  
  5. }  
  6. Thing.prototype.setName = function(newName){  
  7.     this.name = newName;  
  8. }  
  9. Thing.prototype.deleteName = function(){  
  10.     delete this.name;  
  11. }  
  12.   
  13. var thing = new Thing();    /*thing：Thing {}*/  
  14. thing.setName("liyunxia");  /*thing：Thing {name: "liyunxia"}*/  
  15. thing.getName();        //結果：liyunxia  
  16. thing.deleteName();     /*thing：Thing {}*/  
  17. thing.getName();        //結果：leegang    thing.__proto__為Thing {name: "leegang"}  
  18.   
  19. thing.name = "liyunxia";    /*Thing {name: "liyunxia"}*/  
  20. thing.getName();        //結果：liyunxia  
  21. delete thing.name;      /*thing：Thing {}*/  
  22. thing.getName();        //結果：leegang thing.__proto__為Thing {name: "leegang"}  

2. 柯里化

把接受多個參數的函數變換成接受一個單一參數(最初函數的第一個參數)的函數，如果其他的參數是必要的，返回接受余下的參數且返回結果的新函數

[javascript] view plain copy
    1. var sum = function(x, y){  
    2.     return x + y;  
    3. }  
    4. var succ = sum.bind(null, 1);  
    5. succ(2);    //3  
    6.   
    7. function f(y, z){  
    8.     return this.x + y +z;  
    9. }  
    10. var g = f.bind({x:1}, 2);  
    11. g(3);   //6  


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 JavaScript中你所不知道的Object（一） 你所不知道的JavaScript數組 [筆記]你不知道的JavaScript（上） 《你不知道的JavaScript》整理（二）——this js類型----你所不知道的JavaScript系列（5） js值----你所不知道的JavaScript系列（6） 《你不知道的 JavaScript 上卷》 學習筆記 《你不知道的JavaScript》整理（三）——對象 javascript你可能不知道的事 【讀書筆記】-- 你不知道的JavaScript
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM