摘要：實際上并不存在什么構(gòu)造函數(shù)，只存在對于函數(shù)的構(gòu)造調(diào)用發(fā)生構(gòu)造函數(shù)的調(diào)用時，會自動執(zhí)行下邊的操作創(chuàng)建一個全新的對象。說明綁定的優(yōu)先級高于硬綁定。

原文閱讀

??js中的this是很容易讓人覺得困惑的地方，這篇文章打算說一下this綁定的幾種情況，相信可以解決大部分關(guān)于this的疑惑。

this是在運行的時候綁定的，不是在編寫的時候綁定的，函數(shù)調(diào)用的方式不同，就可能使this所綁定的對象不同。

??函數(shù)調(diào)用的位置對this的指向有著很大的影響，但卻不是完全取決于它。下面是幾種this的綁定規(guī)則：

??默認規(guī)則的意思就是在一般情況下，如果沒有別的規(guī)則出現(xiàn)，就將this綁定到全局對象上，我們看如下代碼：

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

??這段代碼中，this是被默認綁定到了全局對象上，所以this.a得到的是2。我們?nèi)绾闻袛噙@里應(yīng)用了默認綁定呢？foo在調(diào)用的時候直接使用不帶任何修飾的函數(shù)引用，只能使用默認綁定。有人會誤認為結(jié)果是3，this常有的幾種錯誤理解之一就是認為this指向當前函數(shù)的詞法作用域，this與詞法作用域以及作用域?qū)ο笫峭耆煌臇|西，作用域?qū)ο笫窃谝鎯?nèi)部的，js代碼是無法訪問的。還有本文我們不討論嚴格模式下的情況，嚴格模式這里的this會綁定到undefined。

??如果在調(diào)用位置有上下文對象，說簡單點就是這個函數(shù)調(diào)用時是用一個對象.出來的。就像下邊這樣，它就遵循隱式綁定：

function foo() {
    console.log(this.a);
}
var obj = {
    a: 2,
    foo: foo
}
var a = "opps, gloabl";                //全局對象的屬性
obj.foo();                    //2
var bar = obj.foo;
bar();                        //"opps, gloabl"

??第9行代碼，就是函數(shù)在調(diào)用的時候，是用前邊的對象加上.操作符調(diào)用出來的，此時就用到了隱式綁定規(guī)則，隱式綁定規(guī)則會將函數(shù)調(diào)用中的this綁定到這個上下文對象，此時的this.a和obj.a是一樣的。
??而隱式綁定會出現(xiàn)一個問題，就是隱式丟失，上邊的第10行代碼，是新建一個foo函數(shù)的引用，即bar，在最后一行調(diào)用的時候，這個函數(shù)不具有上下文對象，此時采用默認綁定規(guī)則，得到的結(jié)果自然是opps, gloabl;
??綁定丟失也會發(fā)生在函數(shù)作為參數(shù)傳遞的情況下，即傳入回調(diào)函數(shù)時，因為參數(shù)傳遞就是一種隱式賦值，看如下代碼：

function foo() {
    console.log( this.a );
}
function doFoo(fn) {
    fn();            //在此處調(diào)用，參數(shù)傳遞是隱式賦值，丟失this綁定
}
var obj = {
    a: 2,
    foo: foo
};
var a = "opps, global";
doFoo( obj.foo );        //看似是隱式綁定，輸出opps, global

??javascript環(huán)境中內(nèi)置的函數(shù)，在具有接受一個函數(shù)作為參數(shù)的功能的時候，也會發(fā)生像上邊這種狀況。例如setTimeout函數(shù)的實現(xiàn)就類似于下邊的偽代碼：

function setTimeout(fn, delay) {
    //等待delay毫秒
    fn();//在此處調(diào)用
}

??所以回調(diào)函數(shù)丟失this綁定是非常常見的，后邊我們再看如何通過固定this來修復(fù)這個問題。

??在此之前，相信你已經(jīng)用過很多次apply和call函數(shù)了，使用這兩個函數(shù)可以直接為你要執(zhí)行的函數(shù)指定this，所以這種方式稱為顯式綁定。

function foo() {        //顯式綁定this，這種方式依然無法解決綁定丟失的問題
    console.log( this.a );
}
var obj = {
    a: 2
};
foo.call( obj );        //2

??通過像上邊這樣調(diào)用，我們可以將foo的this強制綁定到obj上。如果給call傳入的是一個基本類型數(shù)據(jù)，這個基本類型數(shù)據(jù)將會被轉(zhuǎn)換成對應(yīng)的基本包裝類型。不過這種方式依然無法解決上邊的丟失綁定問題。

??為了解決這個問題，我們可以寫像下邊這樣的代碼：

function foo() {
    console.log( this.a );
}
var obj = {
    a: 2
};
var bar = function() {         //創(chuàng)建一個包裹函數(shù)，以確保obj的綁定
    foo.call( obj );
};
bar();                       //2
setTimeout( bar, 100 );           //2
bar.call( window );           //2

??上邊這樣的函數(shù)確實解決了綁定丟失的問題，每次調(diào)用bar就可以確保obj的綁定，不過還不能為函數(shù)傳參，而且這種方法復(fù)用率低，所以又出現(xiàn)了這樣的輔助綁定函數(shù)：

function foo(something) {
    console.log( this.a, something );
    return this.a + something;
}
function bind(fn, obj) {        //輔助綁定函數(shù)
    return function() {
        return fn.apply( obj, arguments );
    };
}
var obj = {
    a: 2
};
var bar = bind( foo, obj );
var b = bar(3);
console.log(b);

??因為這種模式很常用，所以ES5內(nèi)置了這個方法，就是bind，bind(...)返回一個硬編碼的新函數(shù)，將你指定的對象綁定到調(diào)用它的函數(shù)的this上。

function foo(something) {
    console.log( this.a, something );
    return this.a + something;
}
var obj = {
    a: 2
};
var bar = foo.bind( obj );    //bind返回一個綁定到obj上的新函數(shù)
var b = bar(3);
console.log(b);
var a = "window"s a";
foo("!");                       //對原來的函數(shù)不產(chǎn)生影響

??許多第三方庫里的函數(shù)，以及許多語言內(nèi)置的函數(shù)，都提供了一個可選的參數(shù)用來指定函數(shù)執(zhí)行的this：

function foo(el) {
    console.log( el, this.id );
}
var obj = {
    id: "awesome"
};
[1, 2, 3].forEach( foo, obj );   //forEach的第二個參數(shù)就是用來設(shè)置this

js中的所謂的構(gòu)造函數(shù)，其實和一般的普通函數(shù)沒有什么區(qū)別，并不具有特殊性，它們只是被new操作符調(diào)用的普通函數(shù)而已。實際上并不存在什么構(gòu)造函數(shù)，只存在對于函數(shù)的構(gòu)造調(diào)用

發(fā)生構(gòu)造函數(shù)的調(diào)用時，會自動執(zhí)行下邊的操作：

創(chuàng)建一個全新的對象。

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

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

執(zhí)行這個函數(shù)里的代碼。

如果函數(shù)沒有返回其他對象，則自動返回這個新對象。

這個在執(zhí)行new操作的時候?qū)?b>this的綁定就叫做new綁定。

function fun() {
  this.a = 1;
  this.b = 2;
}
var instance = new fun();
console.log(instance.a);

??ES6中的箭頭函數(shù)是無法使用以上幾種規(guī)則的，它是根據(jù)外層的作用域來決定this，即取決于外層的函數(shù)作用域或全局作用域，而且箭頭函數(shù)的綁定無法修改，即使是new綁定也不可以。

function foo() {
    return (a) => {
        console.log( this.a );
    }
}
var obj1 = {
    a: 2
};
var obj2 = {
    a: 3
};
var bar = foo.apply(obj1);
bar.apply(obj2);        //2

??前邊我們已經(jīng)說了this的幾種綁定規(guī)則，當函數(shù)調(diào)用的位置可以使用多條綁定規(guī)則的時候，我們就需要確定這幾種規(guī)則的優(yōu)先級。

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

??從上邊的代碼可以看出來，顯式綁定的優(yōu)先級要高于隱式綁定，下邊再看看顯式綁定和new綁定的優(yōu)先級：

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

??仔細看這段代碼，bar是foo綁定到obj1上返回的一個函數(shù)，對這個函數(shù)進行new操作，并傳入新的a值，發(fā)現(xiàn)改變的是新對象baz的屬性，和obj1已經(jīng)脫離關(guān)系。說明new綁定的優(yōu)先級高于硬綁定。

??綜上所述，我們在遇到this時，如果不是箭頭函數(shù)，就可以以這種順序判斷它的指向：

如果函數(shù)在new中調(diào)用，綁定到新建的對象。

函數(shù)通過call或apply或者硬綁定調(diào)用，this綁定到指定的對象上。

函數(shù)在某個上下文對象中調(diào)用，綁定到這個上下文對象上。

采用默認綁定規(guī)則。

??以上就是這篇博客的所有內(nèi)容了，如果有什么理解的不對的地方歡迎討論，這里是我的博客以及github,歡迎來訪。

參考書籍：《你不知道的JavaScript（上卷）》