成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

[js高手之路]this知多少

APICloud / 2797人閱讀

摘要：關(guān)鍵字在中的變化非常的靈活，如果用的不好就非常惡心，用的好程序就非常的優(yōu)雅，靈活，飄逸所以掌握的用法，是每一個前端工程師必知必會的而且這個也是一些大公司筆試中常見的考察項第一種多帶帶的，指向的是這個對象注當前的執(zhí)行環(huán)境是所以指向了第二種全局函

this關(guān)鍵字在javascript中的變化非常的靈活，如果用的不好就非常惡心，用的好,程序就非常的優(yōu)雅，靈活，飄逸.所以掌握this的用法，是每一個前端工程師必知必會的.而且這個也是一些大公司筆試中常見的考察項.

第一種、多帶帶的this，指向的是window這個對象

console.log( this ); //window
注：當前的執(zhí)行環(huán)境是window, 所以this指向了window

第二種、全局函數(shù)中的this

1         function show(){
2             alert( this ); //window
3         }
4         show();

show()這樣子調(diào)用，指向的是window

第三種、函數(shù)調(diào)用的時候，前面加上new關(guān)鍵字，也就是構(gòu)造函數(shù)的調(diào)用方式

1     function show(){
2             alert( this ); //object
3         }
4         new show();

new show這樣調(diào)用，函數(shù)中的this指向的是object

第四種、用call與apply的方式調(diào)用函數(shù)，這里面的this分兩種情況

一般情況下，call與apply后面的第一個參數(shù), 該參數(shù)是什么， this就指向什么
call與apply后面如果是undefined和null，this指向的是window

1         function show(){
2             alert( this ); //abc
3         }
4         show.call("abc"); //abc
1          function show(){
2             alert( this );
3         }
4         show.call( null ); //window
5         show.call( undefined ); //window
6         show.call( "" ); //""
1         function show( a, b ){
2             alert( this + "
" + a + "," + b ); //abc, ghostwu, 22
3         }
4         show.call( "abc", "ghostwu", 22 );
5         show.apply( "abc", ["ghostwu", 22] );
1 function show( a, b ){
2             alert( this + "
" + a + "," + b );
3         }
4         show.call( "abc", "ghostwu", 22 ); //abc, ghostwu, 22
5         show.apply( null, ["ghostwu", 22] ); //window, ghostwu, 22
6         show.apply( undefined, ["ghostwu", 22] );// window, ghostwu, 22

這里要稍微注意一下, call與apply后面的參數(shù)傳遞的區(qū)別： call是一個個把參數(shù)傳遞給函數(shù)的參數(shù)，而apply是把參數(shù)當做數(shù)組傳遞給函數(shù)的參數(shù)，數(shù)組第一項傳遞給函數(shù)的第一個參數(shù)，第二項傳遞給函數(shù)的第二個參數(shù)。。。以此類推

第五種、定時器中的this,指向的是window

1      setTimeout( function(){
2             alert( this ); //window
3         }, 500 );

第六種、元素綁定事件，事件觸發(fā)后 執(zhí)行的函數(shù)中的this 指向的是當前的元素

1 
2

第七種、函數(shù)調(diào)用時如果綁定了bind, 那么函數(shù)中的this就指向了bind中綁定的東西

1 
2 document.querySelector("input").addEventListener("click", function(){
3 alert(this); //window
4 }.bind(window));

如果沒有通過bind改變this，那么this的指向就會跟第六種情況一樣

第八種、對象中的方法：該方法被哪個對象調(diào)用，那么方法中的this就指向該對象

var obj = {

    userName : "ghostwu",
    show : function(){
        return this.userName;
    }
};
alert( obj.show() ); //ghostwu

如果把對象的方法，賦給一個全局變量，然后再調(diào)用，那么this指向的就是window.

1         var obj = {
2             userName : "ghostwu",
3             show : function(){
4                 return this.userName;
5             }
6         };
7         var fn = obj.show;
8         var userName = "hello";
9         alert( fn() );// hello, this指向window

學完之后，我們就來應用下，下面這道題是騰訊考察this的面試題，你都能做出來嗎？

1         var x = 20;
 2         var a = {
 3             x: 15,
 4             fn: function () {
 5                 var x = 30;
 6                 return function () {
 7                     return this.x;
 8                 };
 9             }
10         };
11         console.log(a.fn()); //function(){return this.x}
12         console.log((a.fn())()); //20
13         console.log(a.fn()()); //20
14         console.log(a.fn()() == (a.fn())()); //true
15         console.log(a.fn().call(this)); // 20
16         console.log(a.fn().call(a)); // 15

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/85183.html

相關(guān)文章

  • [js高手之路]原型對象(prototype)與原型鏈相關(guān)屬性與方法詳解

    摘要：一，檢測左側(cè)的原型鏈上，是否存在右側(cè)的原型我在之前的兩篇文章高手之路構(gòu)造函數(shù)的基本特性與優(yōu)缺點高手之路一步步圖解的原型對象原型鏈已經(jīng)分享過了衛(wèi)莊二如果隱式原型指向調(diào)用方法的對象原型那么這個方法就返回，如衛(wèi)莊因為的隱式原型指向的都是，有朋友可 一，instanceof： instanceof檢測左側(cè)的__proto__原型鏈上，是否存在右側(cè)的prototype原型. 我在之前的兩篇文章 ...

    svtter 評論0 收藏0

  • [js高手之路]設計模式系列課程-發(fā)布者,訂閱者重構(gòu)購物車

    摘要：發(fā)布者訂閱者模式，是一種很常見的模式，比如一買賣房子生活中的買房，賣房，中介就構(gòu)成了一個發(fā)布訂閱者模式，買房的人，一般需要的是房源，價格，使用面積等信息，他充當了訂閱者的角色中介拿到賣主的房源信息，根據(jù)手頭上掌握的客戶聯(lián)系信息買房的人的手機 發(fā)布者訂閱者模式，是一種很常見的模式，比如: 一、買賣房子 生活中的買房，賣房，中介就構(gòu)成了一個發(fā)布訂閱者模式，買房的人，一般需要的是房源，價格，...

    fevin 評論0 收藏0

  • 設計模式（通往高手之路的必備技能）

    摘要：設計模式的定義在面向?qū)ο筌浖O計過程中針對特定問題的簡潔而優(yōu)雅的解決方案。從前由于使用的局限性，和做的應用相對簡單，不被重視，就更談不上設計模式的問題。 ‘從大處著眼，從小處著手’，以前對這句話一知半解，自從踏出校門走入社會，開始工作以來，有了越來越深的理解，偶有發(fā)現(xiàn)這句話用在程序開發(fā)中也有用，所以，近段時間開始嘗試著分析jQuery源碼，分析angularjs源碼，學習設計模式。 設...

    paraller 評論0 收藏0

  • [js高手之路]搞清楚面向?qū)ο?必須要理解對象在創(chuàng)建過程中的內(nèi)存表示

    摘要：面向?qū)ο缶幊谭绞剑瑢τ诔鯇W者來說，會比較難懂要學會面向?qū)ο笠约笆褂妹嫦驅(qū)ο缶幊?，理解對象的?chuàng)建在內(nèi)存中的表示，至關(guān)重要首先，我們來一段簡單的對象創(chuàng)建代碼衛(wèi)莊衛(wèi)莊上例，我們創(chuàng)建了兩個對象和如果有多個類似對象，我們可以通過函數(shù)封裝，這種函數(shù)封裝 javascript面向?qū)ο缶幊谭绞?，對于初學者來說，會比較難懂. 要學會面向?qū)ο笠约笆褂妹嫦驅(qū)ο缶幊?，理解對象的?chuàng)建在內(nèi)存中的表示，至關(guān)重要. ...

    binta 評論0 收藏0

  • [js高手之路]javascript騰訊面試題學習封裝一個簡易的異步隊列

    摘要：這道的面試題，是這樣的，頁面上有一個按鈕，一個，點擊按鈕的時候，每隔秒鐘向的后面追加一個一共追加個，的內(nèi)容從開始技術(shù)，首先我們用閉包封裝一個創(chuàng)建元素的函數(shù)頁面上的個元素點我代碼點擊按鈕的時候，用回調(diào)函數(shù)嵌套方式，這里我加入個，就已經(jīng)快受不了 這道js的面試題，是這樣的，頁面上有一個按鈕，一個ul，點擊按鈕的時候，每隔1秒鐘向ul的后面追加一個li, 一共追加10個，li的內(nèi)容從0開始技...

    hzx 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<