推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
datadump

js this 请教

  •  
  •   datadump ·
    PRO
    · Jul 26, 2022 · 3809 views
    This topic created in 1573 days ago, the information mentioned may be changed or developed.
    代码:


    为什么输出的是 person2 呢
    18 replies  •  2022-07-27 17:33:09 +08:00
    SilentDepth
    SilentDepth
    Jul 26, 2022
    1
    看一下 JS API ,call 方法的第一个参数是啥
    catoncat
    catoncat
    Jul 26, 2022
    2
    The `call()` method calls the function with a given `this` value and `arguments` provided individually.
    AV1
    AV1
    Jul 27, 2022
    3
    调用 person1.foo4.call(person2)时,foo4 里的 this 指向 person2 对象,它返回的箭头函数里的 this 也指向 person2 对象。
    dcsuibian
    dcsuibian
    Jul 27, 2022
    4
    js 方法里其实有个叫 this 的参数,如果你使用
    person1.foo4()这么调用,那么这个 this 会被赋值为 person1 。
    但如果你使用了 call()、apply()、bind()这几个方法,那么你就是在强制指定这个 this 是谁。
    shakaraka
    shakaraka
    Jul 27, 2022
    5
    你 call 了 person2 的 this 进去 person1.foo4 这个方法,那么这个方法的 this 自然就是 person2 咯
    autoxbc
    autoxbc
    Jul 27, 2022
    6
    从 person1 上找到 foo4 ,再把 foo4 上的隐参数 this 绑定为 person2 ,一直到这里,那个箭头函数都还没有生成
    datadump
    datadump
    OP
    PRO
    Jul 27, 2022
    7
    感谢各位大佬解答

    @autoxbc 最适合理解的答案,更新大佬半夜回帖
    datadump
    datadump
    OP
    PRO
    Jul 27, 2022
    8
    var name = 'window'

    var person1 = {
    name: 'person1',
    foo2: () => console.log(this.name),
    }

    var person2 = { name: 'person2' }


    person1.foo2.call(person2)


    打印结果是‘window’,如果按照上面理解,执行 foo2.call 的时候,箭头函数已经生成了,里面的 this 绑定的是全局 window ,这样对吗?

    也就是说如果返回箭头函数的闭包,直到调用箭头函数的时候 this 才绑定;而赋值箭头函数时,箭头函数的 this 就直接绑定了。这个说法对吗?

    感谢大家
    datadump
    datadump
    OP
    PRO
    Jul 27, 2022
    10
    @ymcz852 babel 转之后的确是很清楚了。谢谢
    kevin1
    kevin1
    Jul 27, 2022
    11
    1. 箭头函数不会创建自己的 this ,它只会从自己的作用域链的上一层继承 this 。
    2. 上层 this 被 call 修改成了 person2 。
    datadump
    datadump
    OP
    PRO
    Jul 27, 2022
    12


    @kevin1 感谢答复

    按照你说的“上层 this 被 call 修改成了 person2 ”,那这个箭头函数 this 没有被 call 修改成 B 对象。
    是不是第 11 行函数执行后,箭头函数被实例化,在这个时间点绑定 this ?
    johnkiller
    johnkiller
    Jul 27, 2022 via iPhone
    13
    后面的例子,可以参考:函数的作用域是在什么时候确定的
    Curtion
    Curtion
    Jul 27, 2022
    14
    @wjx0912 #12 你在执行第 11 行时就确定了 this 为 A ,而箭头函数 this 无法被修改。 你把第 11 行移动到 B 对象定义之后,然后使用 A.sayHello.call(B),那么后续箭头函数 this 就固定为 B 了。
    datadump
    datadump
    OP
    PRO
    Jul 27, 2022
    15
    @johnkiller 谢谢
    @Curtion 谢谢
    kevin1
    kevin1
    Jul 27, 2022
    16
    @wjx0912 12# 你图上左边代码里的箭头函数 s 确实是在第 11 行的时候绑定了。

    箭头函数的 this 是在创建时就已经确定了,不会再改变。
    kevin1
    kevin1
    Jul 27, 2022
    17
    @wjx0912 12# 右边 babel 转码后的代码也能很好的解释这一点。

    左边 11 行代码运行后,实际上用闭包的方式声明了一个局部变量 _this ,这个变量从外部无法改变,所以一旦创建了以后这个值都不会再变了。
    datadump
    datadump
    OP
    PRO
    Jul 27, 2022
    18
    @kevin1 是的。基本上理解了。感谢各位
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   868 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 38ms · UTC 21:16 · PVG 05:16 · LAX 13:16 · JFK 16:16
    ♥ Do have faith in what you're doing.