this詳解

Youngs 發布于2019-08-22 13:51 / 3485人閱讀

摘要：含義既不指向函數本身，也不指向函數的詞法作用域。運行時動態綁定，并不是編寫綁定，上下文取決于函數調用的各種條件。

含義

既不指向函數本身，也不指向函數的詞法作用域。

運行時動態綁定，并不是編寫綁定，上下文取決于函數調用的各種條件。

指向取決于函數被調用的位置，也是在函數調用時候發生綁定。

解析 調用棧(可以比擬成函數調用鏈)

指到達當前執行位置所調用的所有函數

so調用位置(函數被調用的位置，而不是聲明位置)就是當前執行函數的前一個調用

function foo() {
    // 當前調用棧 => foo
    // 當前調用位置 => global全局作用域
    
    console.log("foo")
    bar() // bar調用位置
}

function bar() {
    // 當前調用棧 => foo -> bar
    // 當前調用位置 foo
    
    console.log("bar")
}

綁定規則

默認 => 獨立函數調用

this默認綁定,指向全局對象

隱式 => 是否存在上下文 / 被某個對象擁有或包含

當函數引用存在上下文,this會被隱式綁定到這個上下文對象

對象屬性引用鏈只對調用位置的(上一層 / 最后一層)有效

function foo() {
    return this.a
}

const obj = {
    a: "hello",
    foo, // 函數引用,當前上下文是obj
}

obj.foo()

顯式綁定 => call, apply, bind

硬綁定

function foo() {
    return this.a
}

const obj = {
    a: "hello
}

const bar = function() {
    foo.call(obj) // 顯式的強制綁定
}
setTimeout(bar, 300)
bar.call(window) // 2 => 硬綁定之后this無法再修改

new綁定 => 構造函數調用，實際上并不存在“構造函數”,是對函數的“構造調用”

創建(構造)一個全新的對象

這個對象會被執行[[Prototype]]連接

這個對象會綁定到函數調用的this

如果函數沒有返回對象，直接返回這個新對象

注意點

隱式綁定會丟失綁定對象,從而應用默認綁定，分別有以下兩種情況。

函數別名 => 引用函數本身,so默認綁定

function foo() {
    return this.a
}

const obj = {
    a: "hello",
    foo, // 函數引用,當前上下文是obj
}

const a = "on no, this is global"
const bar = obj.foo // 函數別名
bar() // "on no, this is global"

參數傳遞 => 隱式賦值,同上

function foo() {
    return this.a
}

function doFoo(fn) {
    
    fn() // fn => foo
}

const obj = {
    a: "hello",
    foo, // 函數引用,當前上下文是obj
}

const a = "on no, this is global"
doFoo(obj.foo) // "on no, this is global"

優先級

顯式 > 隱式

new > 隱式

new可以修改顯式的this

    function foo(some) {
        this.a = some
    }
    
    const obj = {}
    
    const bar =  foo.bind(obj)
    bar(2)
    console.log(obj.a) // 2
    
    const baz = new bar(3)
    console.log(obj.a) // 2
    console.log(baz.a) // 3 => new 修改了this綁定

new中使用硬綁定 => 函數柯理化

    function foo(a, b) {
        this.value = a + b
    }
    
    const bar = foo.bind(null, "hello ") //這里 this不指定,new時會修改
    const baz = new bar("world")
    baz.value // "hello world"

GPU云服務器云服務器 javascript中this詳解 this[] this _this

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

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

JavaScript 中 this 的詳解

摘要：作為構造函數調用中沒有類，但是可以從構造器中創建對象，并提供了運算符來進行調用該構造器。構造器的外表跟普通函數一樣，大部分的函數都可以當做構造器使用。如果構造函數顯式的返回一個對象，那么則會指向該對象。 this 的指向 this 是 js 中定義的關鍵字，它自動定義于每一個函數域內，但是它的指向卻讓人很迷惑。在實際應用中，this 的指向大致可以分為以下四種情況。 1.作為普通函數調...

cyrils 2019-08-21 15:27 評論0 收藏0
JavaScript之this對象詳解

摘要：再來看一個小的示例淘寶騰訊淘寶為什么輸出的依然是淘寶呢調用的是對象中的方法，方法里面有一個定時器，而定時器的一個參數是這里的指的就是的對象，然后方法里面有調用了，但是定時器中的指的是對象，所以最終調用的是對象中。 1.看前熱身看一段代碼 var name = javascript; var obj = { name:js, foo:f...

Integ 2019-08-22 13:56 評論0 收藏0
20190725筆記-apply詳解

摘要：語法參數這個對象將替代類里的對象可選在函數運行時使用的值。如果該參數的值為或，則表示不需要傳入任何參數。更簡單的講就是將和傳入函數執行。學了那么久前端，對apply、call這兩個函數的用法，還不是很掌握。今天看了很多網上的文章，我總結和歸納下用法。 Function.prototype.apply() apply() 方法調用一個具有給定this值的函數，以及作為一個數組（或類似數...

wzyplus 2019-08-26 10:21 評論0 收藏0
javascript this指針詳解

摘要：但是有一個總的原則，那就是指的是，調用函數的那個對象使用主要分四種情況，討論下指針的用法和注意事項一純粹的函數調用這是函數的最通常用法，屬于全局性調用，因此就代表全局對象。 this是Javascript語言的一個關鍵字它代表函數運行時，自動生成的一個內部對象，只能在函數內部使用,隨著函數使用場合的不同，this的值會發生變化。但是有一個總的原則，那就是this指的是，調用函數的那個對...

graf 2019-08-22 11:18 評論0 收藏0
javascript this指針詳解

摘要：但是有一個總的原則，那就是指的是，調用函數的那個對象使用主要分四種情況，討論下指針的用法和注意事項一純粹的函數調用這是函數的最通常用法，屬于全局性調用，因此就代表全局對象。 this是Javascript語言的一個關鍵字它代表函數運行時，自動生成的一個內部對象，只能在函數內部使用,隨著函數使用場合的不同，this的值會發生變化。但是有一個總的原則，那就是this指的是，調用函數的那個對...

AlphaWallet 2019-08-22 11:18 評論0 收藏0