Question

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

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

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

打字稿：

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构造函数中分配超级调用构造函数或Greeter，它记录箭头函数返回的值，如Greeter中所定义。

javascript snip

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元素事件处理程序中调用它们，它们就会派上用场。

Answer 2

greetOne来自compilere和IDE，称为方法。 greetTwo作为财产。

因此，“普通”打字稿用户将定义像greetOne这样的方法，因为它来自其他称为方法的方法。

通过greetTwo，您实际上是从函数类型创建一个属性，并使用lamba表达式设置它。

[Authorize]

首先，这是有用的。如果你想把你的方法作为回调给另一个函数。

[Authorize]

在EcmaScript 5中使用Greeter的JavaScript。

Public Shared Function sqlDate(dt As DateTime) As String

    If dt.Date = Nothing Then

        Return dt.ToString("")

    Else

        Return dt.ToString("yyyy-MM-dd")

    End If

End Function

Public Shared Function sqlTime(dt As DateTime) As String

    Return dt.ToString("hhmmss")

End Function

做这两种TypeScript方法的方法有什么不同？

2 个答案: