淺談JavaScript中的this

吉吉var發表於2018-03-07
JavaScript

在看過阮一峰和jspang對JavaScript中this的解析，來談談我對這一方面的理解，也算是為了對即將到來的面試筆試鞏固下基礎。

在談this之前，不可避免的我們先要了解作用域這個概念

   var a = 1;//全域性變數
    function foo(){
        var b = 2;//區域性變數
           c = 3;//全域性變數
    }
複製程式碼

沒有用var宣告的變數是全域性變數

而this所繫結的物件，就取決於函式在執行過程中的呼叫位置，分為以下4種

1預設繫結

我喜歡叫它全域性繫結更容易記

   function foo(){
        var a = 2;
        console.log(this.a);
    }
    var a = 1;
    foo();//1
複製程式碼

我麼可以看到，在foo（）函式是獨立呼叫，即不是由其他物件所引用，所以此時他指向全域性但是如果在嚴格模式下，則會this繫結undefine

 "use strict"
    function foo(){
       
        console.log(this.a);
    }
    var a = 1;
    foo();//undefine
複製程式碼

2隱式繫結

如果呼叫位置存在上下文物件，則this指向呼叫的上一層

      var a = 3;
     function foo(){
         var a = 2;
         console.log(this.a);
     }
     var obj = {
         a:1,
         foo:foo
     };
     obj.foo();//1
複製程式碼

3顯示繫結

我的理解是強制繫結，最常見的就是call（）方法

      var a = 3;
     function foo(){
        
         console.log(this.a);
     }
     var obj = {
         a:1,
         foo:foo
     };
     foo();//3
     foo.call(obj);//1
複製程式碼

call（）方法可以在呼叫foo時強制把this繫結到指定的引數上

4new繫結

用new來呼叫函式，會自動執行以下操作

1.建立一個全新的物件

2.這個新的物件被執行【【prototype】】連結

3.新的物件繫結到this

4.如果函式沒有返回其他物件，那麼new表示式中函式呼叫自動返回這個新的物件

     function foo (a){
         
         this.a = a;
     }
     var bar = new foo(2);
     console.log(bar.a);//2
複製程式碼

用new來呼叫函式時，我們會構造一個新的物件繫結到函式呼叫的this上

相關文章