亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

[js高手之路]this知多少

APICloud / 2826人閱讀

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

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

第一種、多帶帶的this，指向的是window這個(gè)對(duì)象

console.log( this ); //window
注：當(dāng)前的執(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)用的時(shí)候，前面加上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后面的第一個(gè)參數(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是一個(gè)個(gè)把參數(shù)傳遞給函數(shù)的參數(shù)，而apply是把參數(shù)當(dāng)做數(shù)組傳遞給函數(shù)的參數(shù)，數(shù)組第一項(xiàng)傳遞給函數(shù)的第一個(gè)參數(shù)，第二項(xiàng)傳遞給函數(shù)的第二個(gè)參數(shù)。。。以此類推

第五種、定時(shí)器中的this,指向的是window

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

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

1 
2

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

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

如果沒(méi)有通過(guò)bind改變this，那么this的指向就會(huì)跟第六種情況一樣

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

var obj = {

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

如果把對(duì)象的方法，賦給一個(gè)全局變量，然后再調(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

學(xué)完之后，我們就來(lái)應(yīng)用下，下面這道題是騰訊考察this的面試題，你都能做出來(lái)嗎？

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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/85183.html

相關(guān)文章

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

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

    svtter 評(píng)論0 收藏0

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

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

    fevin 評(píng)論0 收藏0

  • 設(shè)計(jì)模式（通往高手之路的必備技能）

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

    paraller 評(píng)論0 收藏0

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

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

    binta 評(píng)論0 收藏0

  • [js高手之路]javascript騰訊面試題學(xué)習(xí)封裝一個(gè)簡(jiǎn)易的異步隊(duì)列

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

    hzx 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<