嵌套对象文本中"this"的词法上下文

Question

我问是因为我读过关于这个问题的类似(但不相等(的问题。

据我了解，我明白为什么这段代码不起作用：

let myObj = {
name: 'inner text',
myFunction: () => {
console.log("before text " + this.name + " after text");
}
}
myObj.myFunction();

原因：创建箭头函数的上下文(myObj(属于全局范围(根据严格模式等window或undefined(。

我明白了。但是在嵌套对象文本的情况下，外部对象文本不应该是箭头函数的继承上下文，如以下示例所示？

let outer = {
name: 'outer',
obj: {
name: 'inner',
myFunction: () => {
console.log("before text " + this.name + " after text");
}
}
}
outer.obj.myFunction();

我希望this指的是outer的上下文，这是嵌套obj的对象文字。
事实并非如此，也是我无法正确理解这种继承的词汇范围的原因。

有人可以解释一下为什么会这样吗？

Answer 1

但是在

嵌套对象文本的情况下，外部对象文本不应该是箭头函数的继承上下文，如以下示例所示？

不。

箭头函数复制this的当前值;

var object = {
a: this,
b: { 
a: this,
b: {
a: this
}
} 
}

不管你嵌套多少个级别，this的值都不会改变。

由于对象文本的每个级别都出现在同一个函数中，因此它们都获得相同的this值。

Answer 2

有很多方法可以实现你想要的。最紧凑的可能是使用如下所示的吸气剂：

let outer = {
name: 'outer',
obj: {
name: 'inner',
get myFunction() {
console.log("before text " + this.name + " after text");
return (this.name);
}
}
}
outer.obj.myFunction;

在 getter/setter 中，您的上下文保证是对象实例(最嵌套的((请记住，每个内部对象都是 Object 的"独立"实例，getter/setter 将属于最近的实例(。

代码的问题在于箭头函数在创建对象时保留了执行上下文。

实现预期行为的另一种方法是保存手动绑定的方法，如下所示：

let outer = {
name: 'outer',
obj: {
name: 'inner'
}
}
outer.obj.myFunction = (function () {console.log("before text " + this.name + " after text");}).bind(outer.obj);
outer.obj.myFunction();