打字稿成员函数最佳实践

Question

While reading about the this keyword in typescript and the fat arrow operator I came across an example that makes me wonder what is the best way to declare a member method in a class?

Essentially, is there a difference between this:

class MyClass {
    private status = "blah";

    public run = () => { // <-- note syntax here
        alert(this.status);
    }
}

And this:

class MyClass {
    private status = "blah";

    public run() {
        alert(this.status);
    }
}

?

Answer 1

If you declare a normal function:

public run() { /*...*/ }

It will be declared on prototype:

MyClass.prototype.run = function () { /*...*/ };

However, if you declare a fat arrow function:

public run2 = () => { /*...*/ }

It will be declared on every instance of your class AND will be bound to this class.

function MyClass() {
    this.run2 = function () { /*...*/ };
}

Now consider this:

class MyClass {
    private status = "blah";

    public run() {
        alert(this.status);
    }
    public run2 = () => {
        alert(this.status);
    }
}
var obj = new MyClass();
obj.run(); // alerts 'blah'
obj.run2(); // alerts 'blah'
var p = { run: obj.run, run2: obj.run2 };
p.run(); // alerts 'undefined'
p.run2(); // alerts 'blah'