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

原文閱讀

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

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

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

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

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

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

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

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

??第9行代碼，就是函數(shù)在調(diào)用的時(shí)候，是用前邊的對(duì)象加上.操作符調(diào)用出來的，此時(shí)就用到了隱式綁定規(guī)則，隱式綁定規(guī)則會(huì)將函數(shù)調(diào)用中的this綁定到這個(gè)上下文對(duì)象，此時(shí)的this.a和obj.a是一樣的。
??而隱式綁定會(huì)出現(xiàn)一個(gè)問題，就是隱式丟失，上邊的第10行代碼，是新建一個(gè)foo函數(shù)的引用，即bar，在最后一行調(diào)用的時(shí)候，這個(gè)函數(shù)不具有上下文對(duì)象，此時(shí)采用默認(rèn)綁定規(guī)則，得到的結(jié)果自然是opps, gloabl;
??綁定丟失也會(huì)發(fā)生在函數(shù)作為參數(shù)傳遞的情況下，即傳入回調(diào)函數(shù)時(shí)，因?yàn)閰?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ù)，在具有接受一個(gè)函數(shù)作為參數(shù)的功能的時(shí)候，也會(huì)發(fā)生像上邊這種狀況。例如setTimeout函數(shù)的實(shí)現(xiàn)就類似于下邊的偽代碼：

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

??所以回調(diào)函數(shù)丟失this綁定是非常常見的，后邊我們?cè)倏慈绾瓮ㄟ^固定this來修復(fù)這個(gè)問題。

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

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

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

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

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

??上邊這樣的函數(shù)確實(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);

??因?yàn)檫@種模式很常用，所以ES5內(nèi)置了這個(gè)方法，就是bind，bind(...)返回一個(gè)硬編碼的新函數(shù)，將你指定的對(duì)象綁定到調(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返回一個(gè)綁定到obj上的新函數(shù)
var b = bar(3);
console.log(b);
var a = "window"s a";
foo("!");                       //對(duì)原來的函數(shù)不產(chǎn)生影響

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

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

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

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

創(chuàng)建一個(gè)全新的對(duì)象。

這個(gè)對(duì)象會(huì)被執(zhí)行[[Prototype]]連接。

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

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

如果函數(shù)沒有返回其他對(duì)象，則自動(dòng)返回這個(gè)新對(duì)象。

這個(gè)在執(zhí)行new操作的時(shí)候?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ī)則，當(dāng)函數(shù)調(diào)用的位置可以使用多條綁定規(guī)則的時(shí)候，我們就需要確定這幾種規(guī)則的優(yōu)先級(jí)。

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)先級(jí)要高于隱式綁定，下邊再看看顯式綁定和new綁定的優(yōu)先級(jí)：

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

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

??綜上所述，我們?cè)谟龅?b>this時(shí)，如果不是箭頭函數(shù)，就可以以這種順序判斷它的指向：

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

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

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

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

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

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