摘要：是什么本質(zhì)是一個綁定，在函數(shù)被調(diào)用時建立。它的指向是完全由函數(shù)被調(diào)用的調(diào)用點(diǎn)來決定的。因為函數(shù)的調(diào)用點(diǎn)在全局作用域，所以指向全局變量這里就是函數(shù)的調(diào)用點(diǎn)存在的意義在函數(shù)體內(nèi)部指代函數(shù)當(dāng)前的運(yùn)行環(huán)境。從而實現(xiàn)干凈的設(shè)計和更容易的復(fù)用。

this 本質(zhì)是一個綁定， 在函數(shù)被調(diào)用時建立。它的指向是完全由函數(shù)被調(diào)用的調(diào)用點(diǎn)來決定的。

function baz() {
    console.log(this);//因為baz函數(shù)的調(diào)用點(diǎn)在全局作用域，所以this指向全局變量
}
baz();//這里就是baz函數(shù)的調(diào)用點(diǎn)

在函數(shù)體內(nèi)部指代函數(shù)當(dāng)前的運(yùn)行環(huán)境。從而實現(xiàn)干凈的 API 設(shè)計和更容易的復(fù)用。

top-level scope

   1) In browsers, the top-level scope is the global scope. This means that within the browser var something will define a new global variable.In Node.js this is different. The top-level scope is not the global scope; var something inside a Node.js module will be local to that module. 
   2) 但是在Node REPL下，與瀏覽器的行為保持一致(timers除外)
       In browsers
           var that = this;
           setTimeout(function() {
             console.log(this);//window
           }, 0);
        Node REPL
           var that = this;
           setTimeout(function() {
             console.log(this);//Timeout {...}
           }, 0);   
       setInterval 結(jié)果相同

嚴(yán)格模式下

   指定的this不在被封裝為對象，而且如果沒有指定this，則this的值為undefined
   sloppy mode
       function foo() {
         console.log(this);
       }
       foo.apply("test"); //==>String?{"test"}0: "t"1: "e"2: "s"3: "t"length: 4...[[PrimitiveValue]]: "test"
    strict mode    
       function foo() {
         "use strict";
         console.log(this);
       }
       foo.apply("test"); //==>test        

調(diào)用方法時沒有明確對象,this指向全局對象

   sloppy mode
       In browsers，this指向window
           console.log(this);//window
       Node REPL, this指向global
           console.log(this);//global
   strict mode
       In browsers，this指向window
           "use strict";
           console.log(this);//window
       Node REPL, this指向global
           "use strict";
           console.log(this);//global            

匿名函數(shù)執(zhí)行時當(dāng)前對象是全局對象

   sloppy mode
       In browsers，
           (function() {
             console.log(this);//window
           })();
       Node REPL
           (function() {
             console.log(this);//global
           })(); 
   strict mode
       In browsers，
           (function() {
             "use strict";
             console.log(this);//undefined
           })();
       Node REPL
           (function() {
             "use strict";
             console.log(this);//undefined
           })(); 

強(qiáng)制一個函數(shù)調(diào)用使用某個特定對象作為 this 綁定,而不在這個對象上放置一個函數(shù)引用屬性
就 this 綁定的角度講，call(..) 和 apply(..) 是完全一樣的
call

   function foo() {
     console.log(this.a);
   }
   var obj = {
     a: 2
   };
   foo.call(obj); //==>2 強(qiáng)制函數(shù)foo()的 this 指向 obj

apply

   function foo() {
     console.log(this.a);
   }
   var obj = {
     a: 2
   };
   foo.apply(obj); //==>2 強(qiáng)制函數(shù)foo()的 this 指向 obj     
    
bind 返回一個硬編碼的新函數(shù)，它使用你指定的 this 環(huán)境來調(diào)用原本的函數(shù)
   function foo(something) {
     console.log(this.a, something);
     return this.a + something;
   }
   var obj = {
     a: 2
   };
   var a = 6;
   var bar = foo.bind(obj);//使用obj作為this環(huán)境調(diào)用foo()
   var b = bar(3); // 2 3
   console.log(b); // 5
   var test = bar.bind(window);//2 3 
   console.log(test(3)); // 5
   

傳遞 null 或 undefined 作為 call、apply 或 bind 的 this 綁定參數(shù)，那么這些值會被忽略掉。

   sloppy mode
       function foo() {
         console.log(this);
       }
       var obj = {};
       foo.call(null);//window or global
       foo.apply(null);//window or global
       var bar = foo.bind(null);
       console.log(bar());//window or global
    strict mode
       "use strict";
       function foo() {
         console.log(this);
       }
       var obj = {};
       foo.call(null);//null
       foo.apply(null);//null
       var bar = foo.bind(null);
       console.log(bar());//null        

new

   將新構(gòu)建的對象被設(shè)置為函數(shù)調(diào)用的 this 綁定
   function foo(a) {
     console.log(this);
     this.a = a;
   }
   var bar = new foo(2);//構(gòu)建了一個新的對象(foo?{a: 2})并把這個新對象作為 foo(..) 調(diào)用的 this
   console.log(bar); //foo?{a: 2}
   console.log(bar.a); // 2
   

arrow functions

   箭頭函數(shù)從封閉它的（函數(shù)或全局）作用域采用 this 綁定
   function foo() {
     // 返回一個箭頭函數(shù)
     return (a) => { //箭頭函數(shù)在詞法上捕獲 foo() 被調(diào)用時的 this(obj1)
       // 這里的 `this` 是詞法上從 `foo()` 采用的
       console.log(this.a);
     };
   }
   var obj1 = {
     a: 2
   };
   var obj2 = {
     a: 3
   };
   var bar = foo.call(obj1);
   bar.call(obj2); //2
   
   

Refer：

  https://github.com/CuiFi/You-Dont-Know-JS-CN
  https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/this