摘要：是直接使用不帶任何修飾的函數(shù)引用進行調(diào)用的，因此只能使用默認(rèn)綁定，無法應(yīng)用其他規(guī)則。這通常被稱為裝箱。綁定對于的初學(xué)者可能會把它和類的語言混淆首先我們重新定義一下中的構(gòu)造函數(shù)。在中，構(gòu)造函數(shù)只是一些使用操作符時被調(diào)用的函數(shù)。

前言： 名字取得可能有點大，this 關(guān)鍵字是 JavaScript 中最復(fù)雜的機制之一。筆者也困擾已久，但自從閱讀了《你不知道的Javascript》以后豁然開朗，整理成文。如需更更詳細(xì)的解釋，請閱讀《你不知道的Javascript》第二部分第1章第2章。

最常用的函數(shù)調(diào)用類型：獨立函數(shù)調(diào)用?？梢园堰@條規(guī)則看作是無法應(yīng)用 其他規(guī)則時的默認(rèn)規(guī)則。

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

foo() 是直接使用不帶任何修飾的函數(shù)引用進行調(diào)用的，因此只能使用 默認(rèn)綁定，無法應(yīng)用其他規(guī)則。
ps:不帶任何修飾的函數(shù)的描述如果有疑惑的話請不要糾結(jié)，繼續(xù)看下去就就會明白。

需要說明的一點是：如果使用嚴(yán)格模式（strict mode），那么全局對象將無法使用默認(rèn)綁定，因此 this 會綁定 到 undefined：

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

另一條需要考慮的規(guī)則是調(diào)用位置是否有上下文對象，或者說是否被某個對象擁有或者包 含，不過這種說法可能會造成一些誤導(dǎo)。

function foo() {      
    console.log( this.a ); 
    } 
 
var obj = {      
    a: 2,     
    foo: foo  
    }; 
 
obj.foo(); // 2  此處foo里的this就是指的.前面的對象

ps:啰嗦兩句，為什么obj.foo()可以執(zhí)行,這是一種屬性的引用鏈的寫法，因為obj 和foo 都掛在全局作用域上。如果還不明白再舉一個例子。

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

對象屬性引用鏈中只有最頂層或者說最后一層會影響調(diào)用位置.此處也就是obj2

這里說一個比較容易出錯的地方:

function foo() {      
    console.log( this.a ); 
    } 
var obj = {      
    a: 2,     
    foo: foo  
    }; 
    
var a = "oops, global"; // a 是全局對象的屬性 
 
 setTimeout( obj.foo, 100 ); // "oops, global

JavaScript 環(huán)境中內(nèi)置的 setTimeout() 函數(shù)實現(xiàn)和下面的偽代碼類似：

function setTimeout(fn,delay) {     // 等待 delay 毫秒
    fn(); // <-- 調(diào)用位置！ }

setTimeout的參數(shù)fn可以看做調(diào)用時候傳入的函數(shù)復(fù)制給fn,這個是掛在全局作用域上的(此處的說法不嚴(yán)謹(jǐn)，很多時候框架的不同此處的this被綁定到哪兒很不確定).所以，回調(diào)函數(shù)丟失 this 綁定是非常常見的。es6 的=>很好的解決了這個問題。

JavaScript 提供的絕大多數(shù)函數(shù)以及你自 己創(chuàng)建的所有函數(shù)都可以使用 call(..) 和 apply(..) 方法。它們會把這個對象綁定到 this，接著在調(diào)用函數(shù)時指定這個 this。因為你可以直接指定 this 的綁定對象，因此我 們稱之為顯式綁定。

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

通過 foo.call(..)，我們可以在調(diào)用 foo 時強制把它的 this 綁定到 obj 上。
如果你傳入了一個原始值（字符串類型、布爾類型或者數(shù)字類型）來當(dāng)作 this 的綁定對 象，這個原始值會被轉(zhuǎn)換成它的對象形式（也就是 new String(..)、new Boolean(..) 或者 new Number(..)）。這通常被稱為“裝箱”。

ps:硬綁定只能執(zhí)行一次，之后再綁別的都是綁不上去的。

由于硬綁定是一種非常常用的模式，所以在 ES5 中提供了內(nèi)置的方法 Function.prototype. bind，它的用法如下：

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

console.log( b ); // 5

bind(..) 會返回一個硬編碼的新函數(shù)，它會把參數(shù)設(shè)置為 this 的上下文并調(diào)用原始函數(shù)。

對于js的new 初學(xué)者可能會把它和JAVA類的語言混淆
首先我們重新定義一下 JavaScript 中的“構(gòu)造函數(shù)” 。在 JavaScript 中，構(gòu)造函數(shù)只是一些 使用 new 操作符時被調(diào)用的函數(shù)。它們并不會屬于某個類，也不會實例化一個類。實際上， 它們甚至都不能說是一種特殊的函數(shù)類型，它們只是被 new 操作符調(diào)用的普通函數(shù)而已。

創(chuàng)建（或者說構(gòu)造）一個全新的對象。

這個新對象會被執(zhí)行 [[ 原型 ]] 連接。

這個新對象會綁定到函數(shù)調(diào)用的 this。

如果函數(shù)沒有返回其他對象，那么 new 表達(dá)式中的函數(shù)調(diào)用會自動返回這個新對象。

2涉及到原型鏈的知識，本篇可忽視。

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

使用 new 來調(diào)用 foo(..) 時，我們會構(gòu)造一個新對象并把它綁定到 foo(..) 調(diào)用中的 this 上。new 是最后一種可以影響函數(shù)調(diào)用時 this 綁定行為的方法，我們稱之為 new 綁定。

ps:此處可能看得比較費解，請閱讀《你不知道的js》第二部的關(guān)于類與原型鏈的章節(jié)，還是比較復(fù)雜的，在此就不展開了。此處你可以理解為用函數(shù)new 了一個新對象，然后綁定到 函數(shù)的this上使用。

主要目的是預(yù)先設(shè)置函數(shù)的一些參數(shù)，這樣在使用 new 進行初始化時就可以只傳入其余的參數(shù)。bind(..) 的功能之一就是可以把除了第一個 參數(shù)（第一個參數(shù)用于綁定 this）之外的其他參數(shù)都傳給下層的函數(shù)（這種技術(shù)稱為“部 分應(yīng)用”，是“柯里化”的一種）。舉例來說：

function foo(p1,p2) {          
    this.val = p1 + p2; 
    } 
 
// 之所以使用 null 是因為在本例中我們并不關(guān)心硬綁定的 this 是什么 
// 反正使用 new 時 this 會被修改 
var bar = foo.bind( null, "p1" ); 
 
var baz = new bar( "p2" );  
 
baz.val; // p1p2

我們可以根據(jù)優(yōu)先級來判斷函數(shù)在某個調(diào)用位置應(yīng)用的是哪條規(guī)則?？梢园凑障旅娴?順序來進行判斷：
(數(shù)值越小優(yōu)先級越高)

1 函數(shù)是否在 new 中調(diào)用（new 綁定）？如果是的話 this 綁定的是新創(chuàng)建的對象。

var bar = new foo()

2 函數(shù)是否通過 call、apply（顯式綁定）或者硬綁定調(diào)用？如果是的話，this 綁定的是 指定的對象。

var bar = foo.call(obj2)

3 函數(shù)是否在某個上下文對象中調(diào)用（隱式綁定）？如果是的話，this 綁定的是那個上 下文對象。

var bar = obj1.foo()

4 如果都不是的話，使用默認(rèn)綁定。如果在嚴(yán)格模式下，就綁定到 undefined，否則綁定到 全局對象。

var bar = foo()

在某些場景下 this 的綁定行為會出乎意料，你認(rèn)為應(yīng)當(dāng)應(yīng)用其他綁定規(guī)則時，實際上應(yīng)用 的可能是默認(rèn)綁定規(guī)則。

如果你把 null 或者 undefined 作為 this 的綁定對象傳入 call、apply 或者 bind，這些值 在調(diào)用時會被忽略，實際應(yīng)用的是默認(rèn)綁定規(guī)則.

另一個需要注意的是，你有可能（有意或者無意地）創(chuàng)建一個函數(shù)的“間接引用”，在這 種情況下，調(diào)用這個函數(shù)會應(yīng)用默認(rèn)綁定規(guī)則。

function foo() {      
    console.log( this.a ); 
    }
    var a = 2;  
    var o = { a: 3, foo: foo };  
    var p = { a: 4 }; 
 
o.foo(); // 3 
(p.foo = o.foo)(); // 2

賦值表達(dá)式 p.foo = o.foo 的返回值是目標(biāo)函數(shù)的引用，因此調(diào)用位置是 foo() 而不是 p.foo() 或者 o.foo()。

1

用硬綁定之后就無法使用隱式綁定或者顯式綁定來修改 this。
如果可以給默認(rèn)綁定指定一個全局對象和 undefined 以外的值，那就可以實現(xiàn)和硬綁定相 同的效果，同時保留隱式綁定或者顯式綁定修改 this 的能力。

if (!Function.prototype.softBind) {

 Function.prototype.softBind = function(obj) {         
 var fn = this;         // 捕獲所有 curried 參數(shù)         
 var curried = [].slice.call( arguments, 1 );          
 var bound = function() {             
 return fn.apply(                 
 (!this || this === (window || global)) ?obj : this                                     
     curried.concat.apply( curried, arguments )             
     );          
  };         
  bound.prototype = Object.create( fn.prototype );         
     return bound;      
     }; }

箭頭函數(shù)并不是使用 function 關(guān)鍵字定義的，而是使用被稱為“胖箭頭”的操作符 => 定 義的。箭頭函數(shù)不使用 this 的四種標(biāo)準(zhǔn)規(guī)則，而是根據(jù)外層（函數(shù)或者全局）作用域來決 定 this。
之前我們有說過setTimeout的this綁定丟失的問題es6和es6以前的解決辦法如下，可以比較著看
es6：

function foo() {      
setTimeout(() => {         // 這里的 this 在此法上繼承自 foo()         
console.log( this.a ); },100); } 
 
var obj = {      
        a:2 
        }; 
 
foo.call( obj ); // 2

es5

function foo() {     
        var self = this; // lexical capture of this      
        setTimeout( function(){ console.log( self.a );     }, 100 ); }  
 
var obj = {     
    a: 2 
    }; 
 
foo.call( obj ); // 2

ES6 中的箭頭函數(shù)并不會使用四條標(biāo)準(zhǔn)的綁定規(guī)則，而是根據(jù)當(dāng)前的詞法作用域來決定 this，具體來說，箭頭函數(shù)會繼承外層函數(shù)調(diào)用的 this 綁定（無論 this 綁定到什么）。這 其實和 ES6 之前代碼中的 self = this 機制一樣。