全面解析this

Y3G 發(fā)布于2019-08-26 10:10 / 1018人閱讀

摘要：在嚴(yán)格模式下，對象的函數(shù)中的指向調(diào)用函數(shù)的對象實例顯式綁定，，通過可以把的綁定到上。間接引用最容易在賦值時發(fā)生返回目標(biāo)函數(shù)的引用詞法之前介紹的種綁定規(guī)則可以包含所有正常的函數(shù)，但是中介紹了一種無法使用這些規(guī)則的特殊函數(shù)類型箭頭函數(shù)。

this到底指向什么？

this關(guān)鍵詞是javaScript中最復(fù)雜的機(jī)制之一，一般有兩個誤區(qū)：
1.this指向函數(shù)自身；
2.this指向函數(shù)的作用域；

this是指向調(diào)用位置，調(diào)用位置就是函數(shù)在代碼中被調(diào)用的位置（而不是聲明的位置），this的綁定規(guī)則主要有4條，我們在使用時能判斷它屬于哪種規(guī)則即可；

1.默認(rèn)綁定

首先介紹最常用的函數(shù)調(diào)用類型：獨立函數(shù)調(diào)用，可以理解為這是一條在無法應(yīng)用其他規(guī)則的默認(rèn)規(guī)則,非嚴(yán)格模式下，this指向全局對象，即window

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



// 2

很明顯這里的this指向window對象,但嚴(yán)格模式下呢？

var a = 1;
function foo(){
    "use strict"
    console.log(this.a)
}
foo(); 



// TypeError:this is undefined

嚴(yán)格模式下函數(shù)中的this指向undefined

"use strict";
 
console.log(this === window); // false? // true?
this.a = 9804;
console.log(window.a); // undefined?  // 9804?




// true
// 9804

但全局中的this指向window

2.隱式綁定

先看一段代碼

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



// 2

當(dāng)函數(shù)引用有上下文對象時，隱式綁定規(guī)則會把函數(shù)調(diào)用中的this綁定到這個上下文對象，可以記住一點：誰調(diào)用綁到誰身上。

再看一段代碼：

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



 // 42

對象屬性引用鏈中只有上一層或者最后一層才起作用。

"use strict";
 
var o = new Object();
o.a = "obj.a";
o.f5 = function(){
    return this.a;
}
console.log(o.f5());// ?



// obj.a

在嚴(yán)格模式下，對象的函數(shù)中的this指向調(diào)用函數(shù)的對象實例

3.顯式綁定

apply，call，bind

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



// 2

通過foo.call()可以把foo的this綁定到obj上。

var obj1 = {
    a: 1,
    b: 2,
    caculate: function(c,d){
        return this.a + this.b + c + d;
    }
};
var obj2 = {
    a: 10,
    b: 20,
};
console.log( obj1.caculate(3,4) ); // ?
console.log( obj1.caculate.call( obj2, 3, 4 ) ); // ?
console.log( obj1.caculate.apply( obj2, [30, 40] ) ); // ?



// 10
// 37
// 100

call 和 apply 的用法唯一的不同就是傳參的方式不同，參見上面兩種調(diào)用方式

(1)硬綁定
看下面代碼：

var a = 1;
function foo(){
    console.log(this.a)
}
var obj = {
    a:2
}
var bar = function(){
    foo.call(obj)
}
bar();// ?
setTimeout(bar,100);// ?
//硬綁定的bar不可能再修改它的this
bar.call(window); // ?



// 2
// 2
// 2

無論何時調(diào)用bar函數(shù)，都會手動obj上調(diào)用foo，這種就是一種顯示的強(qiáng)制綁定，即硬綁定。硬綁定的典型場景就是創(chuàng)建一個包裹函數(shù)
由于硬綁定是一種常用的模式，所以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);
console.log(b);



// 2 3
// 5

bind(..)會返回一個硬編碼的新函數(shù)，它會把你指定的參數(shù)設(shè)置為this的上下文并調(diào)用原始函數(shù)，但是Ta是永久綁定，一旦綁定不會在改變：

4.new綁定

當(dāng)用 new 運算符調(diào)用函數(shù)時，該函數(shù)總會返回一個對象，通常情況下，如果構(gòu)造器不顯式地返回任何數(shù)據(jù)，或者是返回一個非對象類型的數(shù)據(jù)，構(gòu)造器里的 this 就指向返回的這個對象，

var MyClass = function(){
    this.name = "sven";
    return "anne"; // 返回 string 類型
};
var obj = new MyClass();
console.log(obj)  // ?
console.log(obj.name); // ?



// {name: "sven"}
// 輸出： sven

var MyClass = function(){
    this.name = "sven";
    return { // 顯式地返回一個對象
        name: "anne"
    }
};
var obj = new MyClass();
console.log( obj);   // ?



// 輸出： {name: "anne"}

"use strict";
 
console.log("嚴(yán)格模式");
console.log("構(gòu)造函數(shù)中的this");
function constru(){
    this.a = "constru-a";
    this.f2 = function(){
        console.log(this.b);
        return this.a;
    }
}
var o2 = new constru(); // ?
o2.b = "o2-b";
console.log(o2.f2()); // ?



// o2-b
// constru-a

在嚴(yán)格模式下，構(gòu)造函數(shù)中的this指向構(gòu)造函數(shù)創(chuàng)建的對象實例

四種綁定規(guī)則的優(yōu)先級

new綁定>顯式綁定>隱式綁定>默認(rèn)綁定

被忽略的this

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

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



// 2

間接引用

另一個需要注意的是，你有可能無意的創(chuàng)建一個函數(shù)的“間接引用”，這種情況下，調(diào)用函數(shù)會應(yīng)用默認(rèn)規(guī)則。間接引用最容易在賦值時發(fā)生：

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

  o.foo();
  (p.foo = o.foo)(); // 返回目標(biāo)函數(shù)的引用




//3
//2

this詞法

之前介紹的4種綁定規(guī)則可以包含所有正常的函數(shù)，但是ES6中介紹了一種無法使用這些規(guī)則的特殊函數(shù)類型：箭頭函數(shù)。
箭頭函數(shù)this的定義：箭頭函數(shù)中的this是在定義函數(shù)的時候綁定，而不是在執(zhí)行函數(shù)的時候綁定。

function foo(){
    //返回一個箭頭函數(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ù)會捕獲調(diào)用時foo()的this，由于foo()的this綁定到obj1，bar(引用箭頭函數(shù))的this也會綁定到obj1，箭頭函數(shù)的綁定無法被修改

小結(jié)

1.由new調(diào)用？綁定到新創(chuàng)建的對象。
2.由call或者apply（或者bind）調(diào)用？綁定到指定的對象。
3.由上下文對象調(diào)用？綁定到那個上下文對象。
4.默認(rèn)：在嚴(yán)格模式下綁定到undefined，否則綁定到全局對象。
ES6中的箭頭函數(shù)并不會用這4種綁定規(guī)則，而是根據(jù)詞法作用域來決定this，具體來說，箭頭函數(shù)會繼承外層函數(shù)調(diào)用的this綁定。