JS中this的4種綁定規則

Null 發布于2019-08-23 12:21 / 1469人閱讀

摘要：硬綁定硬綁定后無論怎么調用，都不會影響函數的綁定硬綁定的典型應用是如下的包裹函數將對象硬編碼進去即將內部函數用硬綁定到某個對象，無論怎么調用這個包裹函數，都不會影響內部函數的。

this

ES6中的箭頭函數采用的是詞法作用域。

為什么要使用this：使API設計得更簡潔且易于復用。

this即不指向自身，也不指向函數的詞法作用域。

this的指向只取決于函數的調用方式

this綁定規則

new > 顯示綁定 > 隱式綁定 > 默認綁定

默認綁定

當獨立函數調用時，不管是否在調用棧中，this都指向全局對象（瀏覽器中為window）

嚴格模式下，不能將全局對象用于默認綁定。

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

隱式綁定

當函數引用有上下文對象時，隱式綁定規則會把函數調用中的this綁定到這個上下文對象。

對象屬性引用鏈中只有最后一層在調用位置中起作用。

要求：對象內部必須包含一個指向函數的屬性，該對象可通過這個屬性間接引用函數。

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

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

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

obj1.obj2.foo(); // 42

隱式丟失

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

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

var bar = obj.foo; // 這里bar將引用foo函數本身，所以不帶有函數對象的上下文

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

bar(); // "oops, global"

和回調函數的情況下（參數傳遞時的隱式賦值）

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

function doFoo(fn) {
    // 參數傳遞時，相當于fn = obj.foo，就和上個例子一樣了
    fn(); // <-- call-site!
}

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

var a = "oops, global"; // `a` also property on global object

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

顯式綁定

采用call()和apply()，通過傳入一個對象（若為基本類型，會被封裝函數轉為對象—裝箱），將this綁定到該對象。

硬綁定

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

var obj = {
    a: 2
};

var bar = function() {
    foo.call( obj );
};

bar(); // 2
setTimeout( bar, 100 ); // 2

// 硬綁定后bar無論怎么調用，都不會影響foo函數的this綁定
bar.call( window ); // 2

硬綁定的典型應用是如下的包裹函數：

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

var obj = {
    a: 2
};

var bar = function() {
    return foo.apply( obj, arguments ); // 將obj對象硬編碼進去
};

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

即將內部函數用apply硬綁定到某個對象，無論怎么調用這個包裹函數，都不會影響內部函數的this。
bind輔助函數如下：

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

// simple `bind` helper
function bind(fn, obj) {
    return function() {
        return fn.apply( obj, arguments ); // 利用參數將obj傳入進去
    };
}

var obj = {
    a: 2
};

var bar = bind( foo, obj ); // bind( foo, obj )會返回一個包裹函數

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

總結：上述包裹函數，想要包裹其他函數，只能一個一個重復寫，硬編碼的方式導致不能被重用，當某種功能需要多次重復使用時，將其抽象出來，成為函數。

new綁定

任何函數都可能被用作構造函數，當函數被new操作符“構造調用”時，會執行下面操作：

1. 創建一個新對象（若該函數不是JS內置的，則創建一個新的Object對象）；
2. 將this綁定到這個對象；
3. 執行構造函數中的代碼（為這個新對象添加屬性）；
4. 若函數沒有返回其他對象，則自動返回這個新對象；若函數有return返回的是非對象，則還是自動返回這個新對象，即覆蓋那個非對象。

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

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

補充說明

間接引用

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，由于p.foo = o.foo的返回值是目標函數的引用，所以調用位置是foo()，而不是p.foo()或o.foo()

箭頭函數：不使用這四個this規則，根據詞法作用域來決定this。

function foo() {
    // 返回一個箭頭函數
    return (a) => {
        // `this` here is lexically adopted from `foo()`
        console.log( this.a );
    };
}

var obj1 = {
    a: 2
};

var obj2 = {
    a: 3
};

// foo()不是箭頭函數，他的this被綁定到obj1
var bar = foo.call( obj1 ); // foo.call( obj1 )返回箭頭函數，所以bar為箭頭函數
bar.call( obj2 ); // 2! 箭頭函數的this無法被修改，new也不行

如下為和箭頭函數一樣的模式：

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

var obj = {
    a: 2
};

foo.call( obj ); // 2

this綁定的趣題：

知乎鏈接-arguments對象調用

更多博客：https://github.com/Lmagic16/blog

GPU云服務器云服務器 js里面的this 解析規則中編寫的sql java中線程的四種狀態 java 4種變量

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/98364.html

徹底搞懂 JS 中 this 機制

摘要：的四種綁定規則的種綁定規則分別是默認綁定隱式綁定顯示綁定綁定。綁定中的操作符，和其他語言中如的機制是不一樣的。規則例外在顯示綁定中，對于和的綁定將不會生效。它也是作為機制的一種替換，解決之前綁定過程各種規則帶來的復雜性。徹底搞懂 JS 中 this 機制摘要：本文屬于原創，歡迎轉載，轉載請保留出處：https://github.com/jasonGeng88/blog 目錄 t...

李世贊 2019-08-22 16:05 評論0 收藏0
JS中的this詳解

摘要：實際上并不存在什么構造函數，只存在對于函數的構造調用發生構造函數的調用時，會自動執行下邊的操作創建一個全新的對象。說明綁定的優先級高于硬綁定。原文閱讀 ??js中的this是很容易讓人覺得困惑的地方，這篇文章打算說一下this綁定的幾種情況，相信可以解決大部分關于this的疑惑。 this是在運行的時候綁定的，不是在編寫的時候綁定的，函數調用的方式不同，就可能使this所綁定的對象不...

Mike617 2019-08-21 16:01 評論0 收藏0
【進階3-1期】JavaScript深入之史上最全--5種this綁定全面解析

摘要：在嚴格模式下調用函數則不影響默認綁定。回調函數丟失綁定是非常常見的。因為直接指定的綁定對象，稱之為顯示綁定。調用時強制把的綁定到上顯示綁定無法解決丟失綁定問題。（關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導）本周正式開始前端進階的第三期，本周的主題是this全面解析，今天是第9天。本計劃一共28期，每期重點攻克一個面試重...

xavier 2019-08-23 13:47 評論0 收藏0
js中的this總結

摘要：關于的指向問題算的上是中的一個十分重要的問題了。首先，的指向問題可以用一句話總結就是總是指向調用的對象，也就是說指向誰與函數聲明的位置沒有關系，只與調用的位置有關。此外注意幾種特殊情況，特別是中的箭頭函數。關于this的指向問題算的上是js中的一個十分重要的問題了。今天把這個問題總結下，加深下自己對this的理解。首先，this的指向問題可以用一句話總結就是：this總是指向調用的對...

light 2019-08-20 15:47 評論0 收藏0
《You Don't Know JS》閱讀理解——this

摘要：運行規則根據的運作原理，我們可以看到，的值和調用棧通過哪些函數的調用運行到調用當前函數的過程以及如何被調用有關。 1. this的誕生假設我們有一個speak函數，通過this的運行機制，當使用不同的方法調用它時，我們可以靈活的輸出不同的name。 var me = {name: me}; function speak() { console.log(this.name); }...

tianren124 2019-08-20 14:50 評論0 收藏0