this详解

Youngs 发布于2019-08-22 13:51 / 3309人阅读

摘要：含义既不指向函数本身，也不指向函数的词法作用域。运行时动态绑定，并不是编写绑定，上下文取决于函数调用的各种条件。

含义

既不指向函数本身，也不指向函数的词法作用域。

运行时动态绑定，并不是编写绑定，上下文取决于函数调用的各种条件。

指向取决于函数被调用的位置，也是在函数调用时候发生绑定。

解析 调用栈(可以比拟成函数调用链)

指到达当前执行位置所调用的所有函数

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"

专线服务私有云 javascript中this详解 this[] this _this

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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
[面试专题]ES6之箭头函数详解

摘要：使用或调用由于已经在词法层面完成了绑定，通过或方法调用一个函数时，只是传入了参数而已，对并没有什么影响箭头函数不会在其内部暴露出参数等等，都不会指向箭头函数的，而是指向了箭头函数所在作用域的一个名为的值如果有的话，否则，就是。 ES6之箭头函数标签（空格分隔）：未分类返回值单行函数体默认返回改行计算结果, 多行需要指定返回值 let c = (a,b)=>a+b; conso...

Caicloud 2019-08-01 17:31 评论0 收藏0