Why is this function inside the constructor referencing an object instance even though it's not a property?

Question

function Promise (callback){

    //this = {}
    //because of "new" keyword, an empty object is automatically created, and the "this" is referencing to that object.
    
   this.status = "pending";

   const resolve = () => {
            this.status = "fulfilled";
            console.log("status is: " + this.status)    
    };
  
    callback(resolve);
    
    //return this 
    // at the end, javascript automatically returns the "this" object.
}

console.log("start")

const p1 = new Promise((resolve) => {
    setTimeout(() => resolve(), 3000);
});

setTimeout(() => console.log(p1.status), 4000)

//output:
 //start
 //status is: fulfilled
 //fulfilled

So now, p1 is an object instance of Promise.

After the "this" object is returned to the p1 variable, the resolve function is yet to be executed, and after 3 seconds, it then executes.

The resolve function is not a property or method of an object because it's not written as this.resolve(){...} or Promise.prototype.resolve()....

My question is: When the resolve function is passed in the callback: callback(resolve), the "this" inside the resolved function is referencing the newly created object : this = {} and not the p1 object?

but when the resolve function is invoked, it changes the status of p1. So it's this is actually referencing to the p1 object. Why is that? I'm confused.

...and even if I make it like this:

this.resolve = () => {
            this.status = "fulfilled";
            console.log("status is: " + this.status)      
    };
  
callback(this.resolve);

the this in the this.resolve will still be referencing the newly created object: this = {} from what I understand.

The code above is from: https://medium.com/swlh/implement-a-simple-promise-in-javascript

I just modified it.

I don't get how you distinguish "*the newly created object : `this = {}` and […] the `p1` object*"? They are **the same** object. Just bound to multiple identifiers. — Bergi, Aug 31 '23 at 02:18
and yet, if you make `function resolve () {` rather than `const resolve = () => {` it all fails - the apparent magic here is how `this` works in an arrow function (unless I misunderstood your confusion) — Jaromanda X, Aug 31 '23 at 02:24
I have a feeling your misunderstanding is caused by https://stackoverflow.com/questions/29050004/modifying-a-copy-of-a-javascript-object-is-causing-the-original-object-to-change — Bergi, Aug 31 '23 at 02:24
@JaromandaX I don't think [that](https://stackoverflow.com/questions/28371982/what-does-this-refer-to-in-arrow-functions-in-es6?rq=3) is what the question is about, OP seems to be clear on that `this` inside `resolve` is the same as `this` in the surrounding constructor scope — Bergi, Aug 31 '23 at 02:25
he seems to be confused about what `this` is though - `the this in the this.resolve will still be referencing ...` — Jaromanda X, Aug 31 '23 at 02:26
Well, it's a combination of all of the above. "`this`" and `p1` are the same object. `this` inside the `resolve` function persists because of closures and arrow-function preservation of `this`. — deceze, Aug 31 '23 at 02:27

jfriend00 · Accepted Answer · 2023-08-31T13:42:10.203

The arrow function declaration of resolve() captures the lexical value of this at the point of the function declaration. Because that lexical value of this is the this inside the constructor, it will naturally point to the newly created object that was created by that constructor.

That lexical value of this is hardwired into that specific declaration of resolve (that's how arrow functions work).

Note, that each running of the Promise constructor creates a NEW copy of the resolve function with a different lexical this bound to it.

This "binding of the lexical this" is a very important feature of arrow functions and would not be the case if you did function resolve() {} instead.

My question is: When the resolve function is passed in the callback: callback(resolve), the "this" inside the resolved function is referencing the newly created object : this = {} and not the p1 object?

But, p1 and this inside the resolve() function are the same object. They are the same object. You can attach a unique property to one and you will see it on the other. Or you can compare them directly. They are the same object.

Yes I know what you meant, but the wording was ambiguous. Thanks for the clarification edit! — Bergi, Aug 31 '23 at 15:15

Why is this function inside the constructor referencing an object instance even though it's not a property?

1 Answers1