Javascript 'THIS' value using constructor without assignment to a variable

Question

I am currently experimenting with constructors in Javascript and wrote some code but can't quite understand it myself

function someOtherFunction() {
    new Player(0, 0);
}

function Player(x, y){

    let self = this;

    this.x = x;
    this.y = y;

    window.addEventListener('click', function() {
        self.x++;
        self.y++;

        console.log('x:' + self.x + 'y: ' + self.y);
    });
}

someOtherFunction();

I have created a constructor which gets executed when using the New keyword which then sets the x and y value and also binds an event listener to the window object.

I am confused as to where new Player is actually stored and how it refers to this.x and this.y and increases its value.

I did not assign the new Player to a variable to create an object so i am not to sure what the THIS is point towards?

I didn't write:

let a = new Player(0, 0);

Which this.x would then refer to the object 'a', x property. so where does this.x refer to when i haven't assigned it to a variable and how does it keep incrementing?

I thought maybe i created a closure, but i am creating a new instance of a player inside a function which i assume get's discarded once called and executed so how is it keeping a reference to the objects x and y property without assignment to some variable.

"which i assume gets discarded once called" - your assumption is incorrect. While you haven't stored an explicit reference to your Player instance outside of the constructor, the event listener retains a reference to `self`, creating a closure which causes the instance to be retained in memory. — Graham, Feb 21 '19 at 09:43

score 3 · Answer 1 · answered Feb 21 '19 at 09:42

I did not assign the new Player to a variable to create an object so i am not to sure what the THIS is point towards?

Calling new Player creates an object.

There are two references to that object.

this inside the function
the return value of the function

You discard the latter.

You copy the former to a variable called self.

This is closed over by the event handler function. See How do JavaScript closures work?.

Which this.x would then refer to the object 'a', x property. so where does this.x refer to when i haven't assigned it to a variable and how does it keep incrementing?

You have assigned it to a variable — this — just by using the new keyword.

I thought maybe i created a closure

Yes

but i am creating a new instance of a player inside a function which i assume get's discarded once called and executed

The entire point of a closure is that it keeps the variable alive inside the function that closes over it.

Oh thank you. Clears things up.. bit of a confusion on my side regarding closure. Cheers! — jamesl232, Feb 21 '19 at 09:45

score 0 · Answer 2 · answered Feb 21 '19 at 09:49

0

In JavaScript everything that is not a primitive type (boolean, null, number, string, undefined) is an object. So the function you create is an object.

Using new instantiates an instance of the Object. Each instance has an automatic this variable.

answered Feb 21 '19 at 09:49

Dan Nagle

4,384
1
16
28

Javascript 'THIS' value using constructor without assignment to a variable

2 Answers2