[js高手之路]this知多少

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 + '\n' + 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 + '\n' + 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 <input type="button" value="點我">
2 <script>
3 document.querySelector("input").onclick = function(){
4 alert(this); //指向當前按鈕
5 };
6 </script>

第七種、函數調用時若是綁定了bind, 那麼函數中的this就指向了bind中綁定的東西

1 <input type="button" value="點我">
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

 

你若是真的搞懂了this，面向對象水平也不錯的話，能夠來試試，個人博客中這道騰訊的面試題額:

學生問的一道javascript面試題[來自騰訊]