JS 中的 This 別再被問倒了，面試常見問題分析

cod7ce 發(fā)布于2019-08-20 16:07 / 400人閱讀

摘要：的功能之一就是可以把除了第一個(gè)參數(shù)第一個(gè)參數(shù)用于綁定之外的其他參數(shù)都傳給下層的函數(shù)這種技術(shù)稱為部分應(yīng)用，是柯里化的一種。

GitHub地址：https://github.com/SimonZhang...

this的指向問題應(yīng)該是讓每一個(gè)前端er都頭疼的問題，我也一樣，曾經(jīng)遇到甚至都是一頓亂猜。最近在研讀一些書籍如《你不知道的JavaScript》和《JavaScript語言精粹與編程實(shí)踐》，讓我對(duì)this的問題豁然開朗。故寫下此篇文章，分享一下我的心得。

隱式綁定

關(guān)于this，一般來說，誰調(diào)用了方法，該方法的this就指向誰，如：

function foo(){
    console.log(this.a)
}

var a = 3;

var obj = {
    a: 2,
    foo: foo
};

obj.foo(); // 輸出2,因?yàn)槭莖bj調(diào)用的foo，所以foo的this指向了obj，而obj.a = 2

如果存在多次調(diào)用，對(duì)象屬性引用鏈只有上一層或者說最后一層在調(diào)用位置中起作用，如：

function foo() {
    console.log( this.a )
}

var obj2 = { 
    a: 42,
    foo: foo
}

var obj1 = {
    a: 2,
    obj2: obj2
}

obj1.obj2.foo(); // 42

隱式丟失

一個(gè)最常見的this綁定問題就是被隱式綁定的函數(shù)會(huì)丟失綁定對(duì)象，也就是說他回應(yīng)用默認(rèn)綁定，從而把this綁定到全局對(duì)象或者undefined上，取決于是否是嚴(yán)格模式。

function foo() {
    console.log( this.a )
}

var obj1 = {
    a: 2,
    foo: foo
}

var bar = obj1.foo; // 函數(shù)別名！

var a = "oops, global"; // a是全局對(duì)象的屬性

bar(); // "oops, global"

雖然bar是obj.foo的一個(gè)引用，但是實(shí)際上，它引用的是foo函數(shù)本身，因此此時(shí)的bar()其實(shí)是一個(gè)不帶任何修飾的函數(shù)調(diào)用，因此應(yīng)用了默認(rèn)綁定

一個(gè)更微妙、更常見并且更出乎意料的情況發(fā)生在傳入回調(diào)函數(shù)時(shí)：

function foo() {
    console.log( this.a )
}

function doFoo( fn ){
    // fn 其實(shí)引用的是 foo
    fn(); // <-- 調(diào)用位置！
}

var obj = {
    a: 2,
    foo: foo
}

var a = "oops, global"; // a是全局對(duì)象的屬性

doFoo( obj.foo ); // "oops, global"

參數(shù)傳遞其實(shí)就是一種隱式賦值，因此我們傳入函數(shù)時(shí)也會(huì)被隱式賦值，所以結(jié)果和上一個(gè)例子一樣，如果把函數(shù)傳入語言內(nèi)置的函數(shù)而不是傳入自己聲明的函數(shù)（如setTimeout等），結(jié)果也是一樣的

顯式綁定

簡(jiǎn)單的說，就是指定this，如：call、apply、bind、new綁定等

硬綁定

function foo( something ) {
    console.log( this.a, something)
    return this.a + something
}

var obj = {
    a: 2
}

var bar = function() {
    return foo.apply( obj, arguments)
}

var b = bar(3); // 2 3
console.log(b); // 5

這里簡(jiǎn)單做一下解釋：
在bar函數(shù)中，foo使用apply函數(shù)綁定了obj，也就是說foo中的this將指向obj，與此同時(shí)，使用arguments（不限制傳入?yún)?shù)的數(shù)量）作為參數(shù)傳入foo函數(shù)中；所以在運(yùn)行bar(3)的時(shí)候，首先輸出obj.a也就是2和傳入的3，然后foo返回了兩者的相加值，所以b的值為5

同樣，本例也可以使用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

new綁定

在傳統(tǒng)面向類的語言中，使用new初始化類的時(shí)候會(huì)調(diào)用類中的構(gòu)造函數(shù)，但是JS中new的機(jī)制實(shí)際上和面向類和語言完全不同。

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

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

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

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

如果函數(shù)沒有返回其他對(duì)象，那么new表達(dá)式中的函數(shù)會(huì)自動(dòng)返回這個(gè)新對(duì)象
如：

function foo(a){
    this.a = a
}

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

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

this的優(yōu)先級(jí)

毫無疑問，默認(rèn)綁定的優(yōu)先級(jí)是四條規(guī)則中最低的，所以我們可以先不考慮它。

隱式綁定和顯式綁定哪個(gè)優(yōu)先級(jí)更高？我們來測(cè)試一下：

function foo(a){
    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í)更高，也就是說在判斷時(shí)應(yīng)當(dāng)先考慮是否可以存在顯式綁定。

現(xiàn)在我們要搞清楚new綁定和隱式綁定的優(yōu)先級(jí)誰高誰低：

function foo(a){
    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綁定比隱式綁定優(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

可以看到，new綁定修改了硬綁定中的this，所以new綁定的優(yōu)先級(jí)比顯式綁定更高。

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

function foo(p1,p2){
    this.val = p1 + p2;
}

// 之所以使用null是因?yàn)樵诒纠形覀儾⒉魂P(guān)心硬綁定的this是什么
// 反正使用new時(shí)this會(huì)被修改
var bar = foo.bind(null,"p1");

var baz = new bar("p2");

baz.val; // p1p2
}

柯里化:在直覺上，柯里化聲稱“如果你固定某些參數(shù)，你將得到接受余下參數(shù)的一個(gè)函數(shù)”。所以對(duì)于有兩個(gè)變量的函數(shù)yx，如果固定了 y = 2，則得到有一個(gè)變量的函數(shù) 2x

This在箭頭函數(shù)中的應(yīng)用

箭頭函數(shù)不使用this的四種標(biāo)準(zhǔn)規(guī)則，而是根據(jù)外層（函數(shù)或者全局）作用域來決定this。

我們來看一下箭頭函數(shù)的詞法作用域：

function foo() {
    // 返回一個(gè)箭頭函數(shù)
    return (a) => {
        // this繼承自foo()
        console.log(this.a)
    };
}

var obj1 = {
    a: 2
};

var obj2 = {
    a: 3
};

var bar = foo.call(obj1);
bar.call(obj2); // 2, 不是3！

foo()內(nèi)部創(chuàng)建的箭頭函數(shù)會(huì)捕獲調(diào)用時(shí)foo()的this。由于foo()的this綁定到obj1，bar（引用箭頭函數(shù)）的this也會(huì)綁定到obj1，箭頭函數(shù)的綁定無法被修改。（new也不行!）

總結(jié)

如果要判斷一個(gè)運(yùn)行中的函數(shù)的this綁定，就需要找到這個(gè)函數(shù)的直接調(diào)用位置。找到之后就可以順序應(yīng)用下面這四條規(guī)則來判斷this的綁定對(duì)象。

由new調(diào)用？綁定到新創(chuàng)建的對(duì)象。

由call或者apply（或者bind）調(diào)用？綁定到指定的對(duì)象。

由上下文對(duì)象調(diào)用？綁定到那個(gè)上下文對(duì)象。

默認(rèn)：在嚴(yán)格模式下綁定到undefined，否則綁定到全局對(duì)象。