this的隱式綁定（implicit binding）

walterrwu 發布于2019-08-19 17:38 / 2581人閱讀

摘要：姑且理解為調用域，為調用棧。如下代碼可以輔助我們理解在中調用所以的調用域是，此時的調用棧只有而本身暴露在全局作用域中，所以它的調用域則也在全局作用域中。

show code

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

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

obj.foo(); // 2

this指向了obj,因為foo執行時的call-site（可以理解為調用時所在作用域）在obj上面。注意是運行的時候，和在哪里聲明的沒有關系。

call-site and call-stack

call-site姑且理解為調用域，call-stack為調用棧。如下代碼可以輔助我們理解

function baz() {
    // call-stack is: `baz`
    // so, our call-site is in the global scope

    console.log( "baz" );
    bar(); // <-- call-site for `bar`
}

在baz()中調用bar(),所以bar的調用域是baz，此時bar的調用棧只有baz；而baz本身暴露在全局作用域中，所以它的調用域則也在全局作用域中。

function bar() {
    // call-stack is: `baz` -> `bar`
    // so, our call-site is in `baz`

    console.log( "bar" );
    foo(); // <-- call-site for `foo`
}

function foo() {
    // call-stack is: `baz` -> `bar` -> `foo`
    // so, our call-site is in `bar`

    console.log( "foo" );
}

baz(); // <-- call-site for `baz`

理解之后再回頭看開頭的例子，是不是感覺清晰了很多。其實this只是指向了它的call-site

還有如下玩法：

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

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

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

obj1.obj2.foo(); // 42

Implicitly Lost（隱式丟失）

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

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

var bar = obj.foo; // function reference/alias!

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

bar(); // "oops, global"

雖然bar引用了obj上的foo，但實際上相當于是直接對foo引用而已，所以會默認綁定到全局。

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

function doFoo(fn) {
    // `fn` is just another reference to `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"

云服務器 GPU云服務器隱式綁定 Binding數據綁定 implicit 隱式

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

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

this綁定方式和優先級比較

摘要：但在嚴格模式下默認綁定不起作用顯式綁定顯式綁定用到了和方法，因為可以直接指定的綁定對象，因此稱之為顯式綁定。隱式綁定顯式綁定當我們使用顯式綁定時，輸出的值為的值所以顯式綁定的優先級更高。上篇文章介紹了this的隱式綁定（implicit binding），接著介紹this其他三種綁定方式默認綁定 (Default Binding) 顯式綁定 (Explicit Binding) ...

weknow619 2019-08-19 17:42 評論0 收藏0
JS 中的 __proto__ 與 prototype

摘要：在這篇文章中，他介紹了一種實現繼承的方法，這種方法并沒有使用嚴格意義上的構造函數。的左值一般是一個對象，右值一般是一個構造函數，用來判斷左值是否是右值的實例。 __proto__ 探究 __proto__隱式原型與prototype顯式原型是個容易令人混淆的概念，簡而言之prototype是構造函數用來被自己的實例繼承的原型，而_proto_是實例用來繼承父類原型的載體。 1. 是什么...

Donald 2019-08-22 11:14 評論0 收藏0
__proto__ 和 prototype的關系

摘要：和的關系先上答案對象上都有屬性函數也是對象一般情況下對象的屬性指向該對象的構造函數的原型對象。兩者的關系先上一張神圖每個被構造函數創建出來的對象都有一個隱式引用，指向其構造函數的屬性的值。 showImg(https://segmentfault.com/img/bVbnO8K); __proto__ 和 prototype的關系先上答案： ? 對象上都有__proto__屬...

Miracle_lihb 2019-08-23 14:59 評論0 收藏0
前端筆記(一) 變量，執行環境與作用域，this

摘要：瀏覽器總是運行位于作用域鏈頂部的當前執行上下文。作用域的前端永遠是當前執行代碼所在環境的變量對象而全局執行環境的變量對象始終是作用域鏈中的最后一個對象。調用棧為了達到當前執行位置所調用的所有函數。 ECMAScript中的變量值類型基本類型 : Number, String, Boolean, Undefined, Null 引用類型 : Object, Array, Func...

elva 2019-08-22 14:04 評論0 收藏0
js中的this總結

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

light 2019-08-20 15:47 評論0 收藏0