[js高手之路]this知多少

APICloud 發布于2019-08-20 19:07 / 2777人閱讀

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

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

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

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

第二種、全局函數中的this

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

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

第三種、函數調用的時候，前面加上new關鍵字，也就是構造函數的調用方式

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

new show這樣調用，函數中的this指向的是object

第四種、用call與apply的方式調用函數，這里面的this分兩種情況

一般情況下，call與apply后面的第一個參數, 該參數是什么， 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后面的參數傳遞的區別： call是一個個把參數傳遞給函數的參數，而apply是把參數當做數組傳遞給函數的參數，數組第一項傳遞給函數的第一個參數，第二項傳遞給函數的第二個參數。。。以此類推

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

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

第六種、元素綁定事件，事件觸發后執行的函數中的this 指向的是當前的元素

1 
2

第七種、函數調用時如果綁定了bind, 那么函數中的this就指向了bind中綁定的東西

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

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

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

var obj = {

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

如果把對象的方法，賦給一個全局變量，然后再調用，那么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

GPU云服務器云服務器 spark實戰高手之路 js中的this js里面的this js中的this機制

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85183.html

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

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

svtter 2019-08-20 19:02 評論0 收藏0
[js高手之路]設計模式系列課程-發布者,訂閱者重構購物車

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

fevin 2019-08-20 19:09 評論0 收藏0
設計模式（通往高手之路的必備技能）

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

paraller 2019-08-21 18:35 評論0 收藏0
[js高手之路]搞清楚面向對象,必須要理解對象在創建過程中的內存表示

摘要：面向對象編程方式，對于初學者來說，會比較難懂要學會面向對象以及使用面向對象編程，理解對象的創建在內存中的表示，至關重要首先，我們來一段簡單的對象創建代碼衛莊衛莊上例，我們創建了兩個對象和如果有多個類似對象，我們可以通過函數封裝，這種函數封裝 javascript面向對象編程方式，對于初學者來說，會比較難懂. 要學會面向對象以及使用面向對象編程，理解對象的創建在內存中的表示，至關重要. ...

binta 2019-08-20 18:56 評論0 收藏0
[js高手之路]javascript騰訊面試題學習封裝一個簡易的異步隊列

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

hzx 2019-08-21 16:23 評論0 收藏0