javascript - 这两种执行 TypeScript 方法的方式有什么区别？

Question

greetOne 的制作方式和greetTwo 的制作方式有什么区别？

什么时候应该使用其中一种风格而不是另一种风格？

每种风格的优缺点是什么？

typescript :

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greetOne() {
        return "Hello, " + this.greeting;
    }
    greetTwo =()=> {
        return "Hello, " + this.greeting;
    }
}

JavaScript:

var Greeter = (function () {
    function Greeter(message) {
        var _this = this;
        this.greetTwo = function () {
            return "Hello, " + _this.greeting;
        };
        this.greeting = message;
    }
    Greeter.prototype.greetOne = function () {
        return "Hello, " + this.greeting;
    };
    return Greeter;
}());

Answer 1

greetOne是一种方法，而 greetTwo是一个属性，其值恰好是一个箭头函数。

最大的区别是您可以重写子类中的方法，但不能重写属性(通过继承)，它们在子类实例中重新分配。

考虑以下示例

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
        console.log("One: "+ this.greetOne())
        console.log("Two: "+ this.greetTwo())
     }
     greetOne() {
         return "Hello, " + this.greeting;
     }
     greetTwo =()=> {
         return "Hello, " + this.greeting;
     }
}

class GreeterChild extends Greeter {
    constructor(message: string) {
        super(message);
    }
    greetOne() {
        return "Child Hello, " + this.greeting;   //<== OK
    }        
    greetTwo = ()=> {
        return "Child Hello, " + this.greeting;  //<= will not work as you expect
    }
}

new GreeterChild("Joe")

控制台结果将是

One: Child Hello, Joe
Two: Hello, Joe

在 playground 上查看此示例看看会发生什么:this.greetTwo在 GreeterChild 内重新分配构造函数的 super 调用之后或 Greeter它记录箭头函数返回的值，如 Greeter 中定义。 .

javascript 片段

function GreeterChild(message) {
    var _this = this;
    _super.call(this, message);
    this.greetTwo = function () {
        return "Child Hello, " + _this.greeting; //<= will not work as expected
    };
}

简而言之，使用methods ，不是arrow functions (属性)如果您需要子类化和覆盖。

箭头函数有其自身的优点，例如保留周围的 this类实例的实例，如果您从 DOM 元素事件处理程序调用它们，这会很方便。