TypeScript - static property creation optimization

Question

I'm new to JavaScript and since I come from strongly-typed languages I've chosen TypeScript.

I'd like to know what happens to variable red in Red getter in this code. Will it be recreated on every call (like in Green getter) or created once and used every time? Which is best?

class Color {
    public R: number;
    public G: number;
    public B: number;
    public A: number;

    static get Red(): Color {
        var red = new Color(255, 0, 0);
        Color.Red = function() { return red; }
        return red;
    }

    static get Green(): Color {
        return new Color(0, 255, 0);
    }

    constructor(red: number, green: number, blue: number, alpha: number = 255) {
        this.R = red;
        this.G = green;
        this.B = blue;
        this.A = alpha;
    }
}

Jeffery Grajkowski · Accepted Answer · 2013-04-11 15:25:56Z

The other answers are totally right but I think there's a subtle issue they're not mentioning. Because Red is defined as a getter it also gets an automatic empty setter that does nothing. So when you call Color.Red = function() { return red; } you're passing that function into the setter for Color.Red, which does nothing, so that statement has no effect. You can slap an alert() into the getter and call it a few times to see for yourself.

If you look at the generated JavaScript for this piece you'll see that the getter is created through Object.defineProperty, which is an interesting beast. You could make your own call to Object.defineProperty to redefine the action of the getter, but that seems like a lot of work when private static red : Color = new Color(255,0,0); works perfectly fine.

As for which is best, it's a question of trade offs and what's more important to you. Always returning a new Object is going to use up a lot more memory, but avoids the risk of somebody modifying Color.Green and causing a heck of a fun bug to track down.

basarat · Accepted Answer · 2013-04-11 06:45:06Z

3

If you want to get it cached you can do:

class Color {
    public R: number;
    public G: number;
    public B: number;
    public A: number;

    private static _red : Color = new Color(255,0,0);   
    static get Red(): Color {
        return _red;
    } 

    static get Green(): Color {
        return new Color(0, 255, 0);
    }

    constructor(red: number, green: number, blue: number, alpha: number = 255) {
        this.R = red;
        this.G = green;
        this.B = blue;
        this.A = alpha;
    }
}

This way the constructor is not called each time you use Red.

answered Apr 11, 2013 at 6:45

basarat

278k60 gold badges475 silver badges528 bronze badges

Comments

Ryan Cavanaugh · Accepted Answer · 2013-04-10 22:54:00Z

1

Every time a getter is used, the function implementing it is invoked. The Red implementation isn't going to be accomplishing any sort of caching.

answered Apr 10, 2013 at 22:54

Ryan Cavanaugh

223k59 gold badges280 silver badges235 bronze badges

Collectives™ on Stack Overflow

TypeScript - static property creation optimization

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related