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

Question

In this code, the callback function receives the scope of the new Thing object (as the commend shows, Thing is logged.) Use of an arrow function causes it to log the window object.

I'd like to be able to access the scope of the literal object in that callback function, ideally without referring to it from the global object. Is there some way to do this?

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

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

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

Answer 1

You could use a getter instead, main difference here would be that upon each access the thing would be recreated, but well, that you could overcome in a different way ;)

And yes, I changed it to an arrow function here, but I could have bound the callback function as well

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

Answer 2

Solution of lcepickle works fine. Another way is to bind the callback function with the literal object, but in this case you have to define it before calling new Thing constructor. So, you can add the thing attribute after the definition of literal object:

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

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

literal.thing.funThing()

Answer 3

You could bind the anonymous callback function to the scope of the literal object.

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