JS 对象字面量 "new" 中的回调函数范围

Question

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

我希望能够在该回调函数中访问 literal 对象的范围，理想情况下无需从全局对象中引用它。有什么办法吗？

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

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

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

Answer 1

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

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

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

literal.thing.funThing()

Answer 2

您可以改用 getter，这里的主要区别在于每次访问时都会重新创建该内容，但是，您可以通过不同的方式克服这一点 ;)

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

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

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

literal.thing.funThing()

Answer 3

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()

JS 对象字面量 "new" 中的回调函数范围

Scope of callback function in "new" on JS object literal

javascript

scope

literals