oop - How to get this of this javascript

Question

I'm changing some code to function more like a class in c# so I don't have to make a new script for each occurrence. I've hit problems with my scope on my constructors, I have this constructor

function Game(canvas) {
    this.Polygon = function(size, pointCount){
        this.size = size;
        this.pointCount = pointCount;
        this.corners = [];
        this.palette = [];

        this.render = function (GameObject) {
            this.makePolygon(GameObject, this.size, this.corners);
        };
    };

    this.makePolygon = function(GameObject, size, corners){//other code...}
}

My problem is in this.render, makePolygon is inside the class so this means something different. I have tried using .bind(this); but I can't get it to work.

I'm positive that this has been asked before but none of the answers I found would work for me.

Set `this` to something else at the top of the function (or top of your "class"). `var self = this`, and then reference `self`. `self.size = size [...] self.makePolygon ...` — Tom, Jun 05 '15 at 19:30
I don't see why `this` would be different, but you've not shown how you're invoking `this.Polygon` and `this.render` or how the outer `this` relates to anything else. — , Jun 05 '15 at 19:38
the Polygon constructor and the makePolygon function are wrapped in function Game() { }, this makes it so I can have several instances of the same script but maintain only one .js file. — Devcon, Jun 05 '15 at 19:48

score 2 · Accepted Answer · answered Jun 05 '15 at 19:35

A convention that I have used on different teams is to alias this at the top of javascript functions, to avoid this exact problem.

Example:

this.Polygon = function(size, pointCount){
    var my = this;
    my.size = size;
    my.pointCount = pointCount;
    my.corners = [];
    my.palette = [];

    my.render = function (GameObject) {
        my.makePolygon(GameObject, my.size, my.corners);
    };
};

this.makePolygon = function(GameObject, size, corners){//other code...}

Another option, depending on where this function lies, is to do it as follows.

// Somewhere at the top of this code snippet
var my = this;

//...

my.Polygon = function(size, pointCount){
    my.size = size;
    my.pointCount = pointCount;
    my.corners = [];
    my.palette = [];

    my.render = function (GameObject) {
        my.makePolygon(GameObject, my.size, my.corners);
    };
};

my.makePolygon = function(GameObject, size, corners){//other code...}

I got it working using your bottom suggestion. Thanks for the help! — Devcon, Jun 05 '15 at 19:39
Not the best way to go though. http://stackoverflow.com/questions/4371333/is-var-self-this-a-bad-pattern — Romain Braun, Jun 05 '15 at 19:40
Interesting article, but it doesn't say this is a bad option. In fact, there seems to have been many advocates for it. The simplicity of storing a local variable in a closure with access to the intended `this` is appealing to a lot of programmers. — Frank Bryce, Jun 06 '15 at 12:14

oop - How to get this of this javascript

1 Answers1