<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                合規國際互聯網加速 OSASE為企業客戶提供高速穩定SD-WAN國際加速解決方案。 廣告
                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(); ~~~ 2. 函數是否通過call、apply顯示綁定或硬綁定?如果是,this綁定的是指定的對象。 ~~~ var bar = foo.call(obj); ~~~ 3. 函數是否在某個上下文對象中隱式調用?如果是,this綁定的是那個上下文對象。 ~~~ var bar = obj.foo(); ~~~ 4. 上述全不是,則使用默認綁定。如果在嚴格模式下,就綁定到undefined,否則綁定到全局window對象。 ~~~ 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) ~~~ **PS**:注意和上述“2”處做對比 #### 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 ~~~ 轉載請寫明出處:[http://blog.csdn.net/ligang2585116](http://blog.csdn.net/ligang2585116)
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看