js this 请教

[wjx0912]

代码：
https://gist.github.com/wjx0912/d35334195ca92d25940086ba533e652d

为什么输出的是 person2 呢

[SilentDepth]

看一下 JS API ，call 方法的第一个参数是啥

[crs0910]

The `call()` method calls the function with a given `this` value and `arguments` provided individually.

[DOLLOR]

调用 person1.foo4.call(person2)时，foo4 里的 this 指向 person2 对象，它返回的箭头函数里的 this 也指向 person2 对象。

[dcsuibian]

js 方法里其实有个叫 this 的参数，如果你使用
person1.foo4()这么调用，那么这个 this 会被赋值为 person1 。
但如果你使用了 call()、apply()、bind()这几个方法，那么你就是在强制指定这个 this 是谁。

[wunonglin]

你 call 了 person2 的 this 进去 person1.foo4 这个方法，那么这个方法的 this 自然就是 person2 咯

[autoxbc]

从 person1 上找到 foo4 ，再把 foo4 上的隐参数 this 绑定为 person2 ，一直到这里，那个箭头函数都还没有生成

[wjx0912]

感谢各位大佬解答

@autoxbc 最适合理解的答案，更新大佬半夜回帖

[wjx0912]

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 就直接绑定了。这个说法对吗？

感谢大家

[ymcz852]

[babel 转义代码]( https://www.babeljs.cn/repl#?browsers=&build=&builtIns=false&corejs=3.6&spec=false&loose=false&code_lz=G4QwTgBAdiC2CmEC8EDkB3AllAJge3VQCgjRIAHeMAZzygEZkIBvIiaOeALjUprvqoANGwgAzPHno8xAVygBjAC6Y6EABQBKFqPYK6tADbwAdIbwBzdUoAWmaiZgJNogL4j2EvACYeW5AB8EPpQRqbmVrb2jpyaHuKSAMwy8sqqUBrarOzsYPBKsmAZcooqav7ZOXoGeMZmltZ2Dk7wLlWubvFeACwppemZOlV5BUWDSEGVVSFh9ZFNMc66EB3sHR2k4BB8tFDeTMwcCDyoO3TeqCskZwwmPSYKIIaG6jfemv5VVQD03xCAXHKAAblABJygGT4wBfioAQt0A9GanKi7C5AA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.17.9&externalPlugins=%40babel%2Fplugin-transform-runtime%407.12.1&assumptions=%7B%7D)
看一遍转义的代码，或许更好理解

[wjx0912]

@ymcz852 babel 转之后的确是很清楚了。谢谢

[kevin1]

1. 箭头函数不会创建自己的 this ，它只会从自己的作用域链的上一层继承 this 。
2. 上层 this 被 call 修改成了 person2 。

[wjx0912]

@kevin1 感谢答复

按照你说的“上层 this 被 call 修改成了 person2 ”，那这个箭头函数 this 没有被 call 修改成 B 对象。
是不是第 11 行函数执行后，箭头函数被实例化，在这个时间点绑定 this ？

[johnkiller]

后面的例子，可以参考：函数的作用域是在什么时候确定的

[Curtion]

@wjx0912 #12 你在执行第 11 行时就确定了 this 为 A ，而箭头函数 this 无法被修改。 你把第 11 行移动到 B 对象定义之后，然后使用 A.sayHello.call(B)，那么后续箭头函数 this 就固定为 B 了。

[wjx0912]

@johnkiller 谢谢
@Curtion 谢谢

[kevin1]

@wjx0912 12# 你图上左边代码里的箭头函数 s 确实是在第 11 行的时候绑定了。

箭头函数的 this 是在创建时就已经确定了，不会再改变。

[kevin1]

@wjx0912 12# 右边 babel 转码后的代码也能很好的解释这一点。

左边 11 行代码运行后，实际上用闭包的方式声明了一个局部变量 _this ，这个变量从外部无法改变，所以一旦创建了以后这个值都不会再变了。

[wjx0912]

@kevin1 是的。基本上理解了。感谢各位