JavaScript中的this,剛接觸JavaScript時大家都在大肆渲染說其多麼多麼的靈巧重要,然而自己並不關心;隨着自己對JavaScript一步步深入瞭解,突然恍然大悟,原來它真的很重要!所以,自己花費了大約2周的時間去查貼、翻閱之前讀的書籍,將this的全貌展示如下。
一、this是什麼--基於調用位置的上下文;調用位置不同,this值不同。
大家都JavaScript中this存在兩個誤解:(1)this指向函數自身
(2)this指向函數的作用域
作用域無法通過JavaScript代碼訪問,它存在於JavaScript引擎內部。每當把this和詞法作用域的查找混合使用時,一定要提醒自己,這是無法實現的!
this是在運行時進行綁定的,並不是在編寫時綁定,它的上下文取決於函數調用時的各種條件。this的綁定和函數聲明的位置沒有任何關係,只取決於函數的調用位置(也就是函數的調用方式)!
示例:- var foo = "golbal foo";
- var myObj = {foo : 'myObj foo'};
- var say = function(){
- console.log(this.foo);
- }
- myObj.say = say;
- myObj.say(); //結果:myObj foo
- say(); //結果:golbal foo
二、爲什麼使用this
- var me = {
- name: "fenfei"
- };
- //不使用this,調用
- function speak(name){
- console.log("Hello, I'm "+ name);
- }
- speak(me.name); //Hello, I'm fenfei
- //使用this,調用
- function speak(){
- console.log("Hello, I'm "+ this.name);
- }
- speak.call(me); //Hello, I'm fenfei
this提供了一種更優雅的方式來隱式“傳遞”對象引用,因此可以將API設計得更加簡潔並易於複用。
三. this的四大綁定規則
1. 默認綁定--函數調用類型:獨立函數調用,this指向全局對象。
- var a = "foo";
- function foo(){
- console.log(this.a);
- }
- foo(); // "foo"
在嚴格模式下,全局對象將無法使用默認綁定,因此this會綁定到undefined。
- var a = "foo";
- function foo(){
- "use strict";
- console.log(this.a);
- }
- foo(); // TypeError:this is undefined
2. 隱式綁定--調用位置是否有上下文對象,或者說被某個對象擁有或者包含
- function foo(){
- console.log(this.a);
- }
- var obj1 = {
- a : 2,
- foo : foo
- }
- var obj2 = {
- a : 1,
- obj1 : obj1
- }
- obj2.obj1.foo(); //結果:2
當foo()被調用時,它的落腳點指向obj1對象,隱式綁定規則會把函數調用中的this綁定到這個上下文對象。
對象屬性引用鏈中只有最頂層或者說最後一次層會影響調用位置。
常見的this綁定問題就是“隱式綁定”的函數會丟失綁定對象,也就是“默認綁定”,從而把this綁定到全局對象(嚴格模式下爲undefined)。
- var a = "foo";
- function foo(){
- console.log(this.a);
- }
- var obj = {
- a : 2,
- foo : foo
- }
- var bar = obj.foo;
- bar(); //"foo"
雖然bar是obj.foo的一個引用,但是實際上,它引用的是foo函數本身,因此此時的bar()其實是不帶任何修飾的函數調用,因此應用了默認綁定。
- var a = "foo";
- function foo(){
- console.log(this.a);
- }
- function doFoo(fn){ //var fn = obj.foo
- fn();
- }
- var obj = {
- a : 2,
- foo : foo
- }
- doFoo(obj.foo); //"foo"
- setTimeout(obj.foo, 100); //"foo"
參數傳遞其實就是一種隱式賦值,因此傳入函數式會被隱式賦值(LHS)
3. 顯示綁定
(1)call、apply(2)硬綁定
- function foo(){
- console.log(this.a);
- }
- var obj = { a:2 };
- var bar = function(){
- foo.call(obj);
- };
- bar(); //2
- setTimeout( bar, 1000); //2
- 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綁定的是新創建的對象。- var bar = new Foo();
- var bar = foo.call(obj);
- var bar = obj.foo();
- var bar = foo();
五、綁定this注意點
1. 忽略this
把null或undefined作爲this的綁定對象傳入call、apply、bind,調用時會被忽略,實際應用的是默認綁定規則!
- function foo(){
- console.log(this.a);
- }
- var a = 1;
- foo.call(null, 2); //1
- foo.apply(undefined, [3]); //1
2. 間接引用
- function foo(){
- console.log(this.a);
- }
- var a = 2;
- var o = { a : 3,foo : foo};
- var p = { a : 4};
- o.foo(); //3
- (p.foo = o.foo)(); //2 間接引用
- var pfoo = o.foo;
- pfoo(); //2 隱式丟失
3. ES6箭頭函數
箭頭函數不使用this的四種標準規則,而是根據外層(函數或者全局)作用域來決定this。
箭頭函數的綁定無法被修改。常用於回調函數中,如事件處理器或定時器。和ES6之前代碼中的this = self機制一樣。
- function foo(){
- setTimeout(()=>{
- console.log(this.a);
- },100);
- }
- var obj = { a : 2};
- foo.call(obj);
- function foo(){
- var self = this;
- setTimeout(function(){
- console.log(self.a);
- },100);
- }
- var obj = { a : 2};
- foo.call(obj);
六、詳解如何確定this
1.(隱式綁定)如果某個對象中某個成員是個function,當從這個對象上調用這個方法時this指向當前對象。
- var FenFei = {
- firstname:"li",
- lastname:"gang",
- timeTravel:function(year){
- console.log(this.firstname + " " + this.lastname + " is time traveling to " + year);
- }
- }
- FenFei.timeTravel(2014); //li gang is time traveling to 2014(父/擁有者對象:FenFei)
2.(隱私綁定)可以通過創建一個新的對象,來引用FenFei對象上的timeTravel方法。
- var Camile = {
- firstname:"li",
- lastname:"yunxia"
- }
- Camile.timeTravel = FenFei.timeTravel;
- Camile.timeTravel(2014); //li yunxia is time traveling to 2014(父/擁有者對象:Camile)
3.(隱式丟失)使用變量保存FenFei.timeTravel方法的引用
- var getTimeTravel = FenFei.timeTravel;
- getTimeTravel(2014); //undefined undefined is time traveling to 2014(父/擁有者對象:Window;window對象裏並沒有firstName和lastName屬性)
PS:謹記方法中的this將指向調用它的那個父/擁有者對象!無論何時,當一個函數被調用,我們必須看方括號或者是圓括號左邊緊鄰的位置,如果我們看到一個引用(reference),那麼傳到function裏面的this值就是指向這個方法所屬於的那個對象,如若不然,那它就是指向全局對象的。
4. 異步調用的方法內部的this
- <button id="async">點擊我</button>
- var btnDom = document.getElementById("async");
- btnDom.addEventListener('click',FenFei.timeTravel);//undefined undefined is time traveling to [object MouseEvent](父/擁有者對象:button)
- btnDom.addEventListener('click',function(e){
- FenFei.timeTravel(2014);//li gang is time traveling to 2014(父/擁有者對象:FenFei)
- });
5.(new綁定)構造函數裏的this
當使用構造函數創建一個對象的實例時,構造函數裏的this就是新建的實例。- var TimeTravel = function(fName, lName){
- this.firstname = fName;
- this.lastname = lName;
- }
- var FenFei = new TimeTravel("li", "gang");
- console.log(FenFei.firstname + " " + FenFei.lastname); //li gang
6.(顯示綁定)call和apply方法設定this值
- var Camile = {
- firstname:"li",
- lastname:"yunxia"
- }
- FenFei.timeTravel.call(Camile,2014); //li yunxia is time traveling to 2014(指定this對象爲Camile)
- FenFei.timeTravel.apply(Camile,[2014]); //li yunxia is time traveling to 2014(指定this對象爲Camile)
7.(顯示綁定)bind將函數綁定至某個對象(ES5)
- function f(y){
- return this.x + y;
- }
- var o = {x:1};
- /* f.bind(o)返回一個新函數,調用g(2)會把原始的函數f()當作o的方法來調用 */
- var g = f.bind(o);
- g(2); // 3
補充:ES5之前方法模擬bind()方法
- function myBind(f, o){
- if(f.bind){
- return f.bind(o);
- }else{
- return function(){
- return f.apply(o, arguments);
- }
- }
- }
bind的作用和apply,call類似都是改變函數的execute context,也就是runtime時this關鍵字的指向。但是使用方法略有不同。一個函數進行bind後可稍後執行。
七、補充
1. 使用new爲函數創建多個實例的時候,這些實例會共享prototype。
當在一個實例裏直接給this添加屬性的時,會隱藏prototype中與之同名的屬性。如果想訪問prototype中的屬性值而不是自己的設定的屬性值:
(1)刪除實例自己添加的屬性: delete 實例名.屬性名
(2)直接訪問prototype中的屬性:Thing.prototype.name
- function Thing(){}
- Thing.prototype.name = "leegang";
- Thing.prototype.getName = function(){
- console.log(this.name);
- }
- Thing.prototype.setName = function(newName){
- this.name = newName;
- }
- Thing.prototype.deleteName = function(){
- delete this.name;
- }
- var thing = new Thing(); /*thing:Thing {}*/
- thing.setName("liyunxia"); /*thing:Thing {name: "liyunxia"}*/
- thing.getName(); //結果:liyunxia
- thing.deleteName(); /*thing:Thing {}*/
- thing.getName(); //結果:leegang thing.__proto__爲Thing {name: "leegang"}
- thing.name = "liyunxia"; /*Thing {name: "liyunxia"}*/
- thing.getName(); //結果:liyunxia
- delete thing.name; /*thing:Thing {}*/
- thing.getName(); //結果:leegang thing.__proto__爲Thing {name: "leegang"}
2. 柯里化
把接受多個參數的函數變換成接受一個單一參數(最初函數的第一個參數)的函數,如果其他的參數是必要的,返回接受餘下的參數且返回結果的新函數
- var sum = function(x, y){
- return x + y;
- }
- var succ = sum.bind(null, 1);
- succ(2); //3
- function f(y, z){
- return this.x + y +z;
- }
- var g = f.bind({x:1}, 2);
- g(3); //6