【前端工程師手冊】JavaScript之this的筆記

今天總結一下this。

誤解

熟悉Java或者其餘語言的同窗看到this會想固然的認爲this指向函數自己，然而在JavaScript中並非這樣子。

function func(){
    console.log(this.index)
}
func.index  = 123
func() // undefined

結果很顯然，this並非指向函數自身。

this究竟是什麼

那麼this究竟是什麼呢？
當一個函數被調用時，會建立一個活動記錄(有時候也稱爲執行上下文)。這個記錄會包 含函數在哪裏被調用(調用棧)、函數的調用方法、傳入的參數等信息。this 就是記錄的 其中一個屬性，會在函數執行的過程當中用到。
長話短說：this就是函數執行上下文的一個屬性
this 其實是在函數被調用時發生的綁定，它指向什麼徹底取決於函數在哪裏被調用。

this的綁定規則

• 默認綁定
  舉個栗子：

  function foo() {
         console.log( this.a );
     }
     var a = 2; 
     foo(); // 2

  當調用 foo() 時，this.a 被解析成了全局變量 a。爲何?由於在本例中，函數調用時應用了 this 的默認綁定，所以 this 指向全局對象。
  那麼咱們怎麼知道這裏應用了默認綁定呢?能夠經過分析調用位置來看看 foo() 是如何調 用的。在代碼中，foo() 是直接使用不帶任何修飾的函數引用進行調用的，所以只能使用 默認綁定，沒法應用其餘規則。
  可是此時若是使用了嚴格模式(strict mode)，那麼全局對象將沒法使用默認綁定，所以 this 會綁定 到 undefined：

  function foo() { 
         "use strict";
          console.log( this.a );
      }
  
     var a = 2;
     foo(); // TypeError: this is undefined

• 隱式綁定

  function foo() { 
         console.log( this.a );
     }
     var obj = { 
         a: 2,
         foo: foo 
     };
     obj.foo(); // 2

  調用位置會使用 obj 上下文來引用函數，所以你能夠說函數被調用時 obj 對象「擁 有」或者「包含」它。
  當 foo() 被調用時，它的落腳點確實指向 obj 對象。當函數引 用有上下文對象時，隱式綁定規則會把函數調用中的 this 綁定到這個上下文對象。由於調 用 foo() 時 this 被綁定到 obj，所以 this.a 和 obj.a 是同樣的。
  這種綁定方式的反面便是this的隱形丟失。

  function foo() { 
         console.log( this.a );
     }
     var obj = { 
         a: 2,
         foo: foo 
     };
     var bar = obj.foo; // 函數別名!
     var a = "oops, global"; // a 是全局對象的屬性
     bar(); // "oops, global"

• 顯式綁定
  一個小栗子：
  call和apply

  function foo() { 
         console.log( this.a );
     }
     var obj = { 
         a:2
     };
     foo.call( obj ); // 2

  第一個參數是一個對象，它們會把這個對象綁定到 this，接着在調用函數時指定這個 this。由於你能夠直接指定 this 的綁定對象，所以我 們稱之爲顯式綁定。
  bind

  function foo(something) { 
         console.log( this.a, something ); 
         return this.a + something;
     }
     function bind(fn, obj) {
         return function() {
             return fn.apply( obj, arguments );
         };
     }
     var obj = { 
         a:2
     };
     var bar = bind( foo, obj );
     var b = bar( 3 ); // 2 3
     console.log( b ); // 5

  因爲硬綁定是一種很是經常使用的模式，因此在 ES5 中提供了內置的方法 Function.prototype.bind
  bind(..) 會返回一個硬編碼的新函數，它會把參數設置爲 this 的上下文並調用原始函數

• new綁定
  使用 new 來調用函數，或者說發生構造函數調用時，會自動執行下面的操做。

  1. 建立(或者說構造)一個全新的對象。
  2. 這個新對象會被執行[[原型]]鏈接。
  3. 這個新對象會綁定到函數調用的this。

  4. 若是函數沒有返回其餘對象，那麼new表達式中的函數調用會自動返回這個新對象。
     例如：

     function foo(a) { 
           this.a = a;
       }
       var bar = new foo(2); 
       console.log( bar.a ); // 2

四種綁定規則的優先級

首先，默認綁定的優先級是四條規則中最低的

function foo() { 
    console.log( this.a );
}
var obj1 = { 
    a: 2,
    foo: foo 
};
var obj2 = { 
    a: 3,
    foo: foo 
};
obj1.foo(); // 2
obj2.foo(); // 3
obj1.foo.call( obj2 ); // 3
obj2.foo.call( obj1 ); // 2

結論：顯式綁定 > 隱式綁定

function foo(something) { 
    this.a = something;
}
var obj1 = { 
    foo: foo
};
var obj2 = {};
obj1.foo( 2 );
console.log( obj1.a ); // 2
obj1.foo.call( obj2, 3 );
console.log( obj2.a ); // 3

var bar = new obj1.foo( 4 );
console.log( obj1.a ); // 2 
console.log( bar.a ); // 4

結論：new 綁定 > 隱式綁定優先級

function foo(something) { 
    this.a = something;
}
var obj1 = {};
var bar = foo.bind( obj1 ); 
bar( 2 );
console.log( obj1.a ); // 2
var baz = new bar(3);
console.log( obj1.a ); // 2 
console.log( baz.a ); // 3

結論：new綁定 > es原生bind綁定
總結判斷this的方法：

1. 函數是否在new中調用(new綁定)?若是是的話this綁定的是新建立的對象。var bar = new foo()
2. 函數是否經過call、apply(顯式綁定)或者硬綁定調用?若是是的話，this綁定的是 指定的對象。var bar = foo.call(obj2)
3. 函數是否在某個上下文對象中調用(隱式綁定)?若是是的話，this 綁定的是那個上 下文對象。var bar = obj1.foo()
4. 若是都不是的話，使用默認綁定。若是在嚴格模式下，就綁定到undefined，不然綁定到 全局對象。var bar = foo()

參考資料：
你不知道的JavaScript-上卷