JS对象字面量“new”中回调函数的范围答案

【问题标题】：Scope of callback function in "new" on JS object literalJS对象字面量“new”中回调函数的范围
【发布时间】：2019-11-16 23:24:17
【问题描述】：

在此代码中，回调函数接收新的Thing 对象的范围（如命令所示，Thing 已记录。）使用箭头函数会导致它记录窗口对象。

我希望能够在该回调函数中访问literal 对象的范围，最好不要从全局对象中引用它。有没有办法做到这一点？

function Thing(fun){
    this.funThing = fun
}

let literal = {
    thing: new Thing(function(){
        console.log(this)
    })
}

literal.thing.funThing() // Thing {funThing: ƒ}

【问题讨论】：

我做了一些修改，希望可以澄清一下。

标签： javascript scope literals

【解决方案1】：

您可以使用 getter 代替，这里的主要区别在于每次访问时都会重新创建事物，但是您可以通过不同的方式克服；）

是的，我在这里将其更改为箭头函数，但我也可以绑定回调函数

function Thing(fun){
    this.funThing = fun
}

let literal = {
    get thing() {
      return new Thing(() => {
        console.log(this)
      });
    }
}

literal.thing.funThing()

【讨论】：

【解决方案2】：

lcepickle 的解决方案工作正常。另一种方法是将回调函数与字面量对象绑定，但在这种情况下，您必须在调用new Thing 构造函数之前定义它。因此，您可以在字面量对象的定义后添加thing 属性：

function Thing(fun){
    this.funThing = fun
}

let literal = { }
literal.thing = new Thing(function(){
    console.log(this)
}.bind(literal))

literal.thing.funThing()

【讨论】：

可能有人认为这是从全局对象中引用literal，但这似乎是.bind的经典用例
@GregoryTippett 看我不明白，这个答案正是你不想做的，但它仍然被标记为答案。有什么方法可以改进我的答案，让你更满意？
@Icepickle，你是对的。就我的实际代码而言，这个解决方案最终更明智，这就是我点击它的原因，但你的解决方案确实更准确地回答了我的问题。

【解决方案3】：

您可以将匿名回调函数绑定到literal 对象的范围内。

function Thing(fun){
    this.funThing = fun
}

literal = {
    thing: new Thing(function(){
        console.log(this)
    }.bind(this.literal))
}

literal.thing.funThing()

【讨论】：