Question

如果我输入这个简单的打字稿代码：

class Point2D
{
    constructor(public x: number, public y: number)
    {
    }
}

并查看生成的js：

var Point2D = (function () {
    function Point2D(x, y) {
        this.x = x;
        this.y = y;
    }
    return Point2D;
})();

我的问题：上面的内容有何不同：

function Point2D(x, y) {
    this.x = x;
    this.y = y;
}

如果没有区别，那么上面就更简单了

Answer 1

您看到的是 设计模式 - 模块。点击此处了解更多信息：

JavaScript Module Pattern: In-Depth （由ben cherry编写）

引用：

模块导出

有时你不只是想使用全局变量，而是想要声明它们。我们可以通过使用匿名函数的返回值导出它们来轻松完成此操作。这样做将完成基本模块模式，所以这是一个完整的例子：

var MODULE = (function () {
    var my = {},
        privateVariable = 1;

    function privateMethod() {
        // ...
    }

    my.moduleProperty = 1;
    my.moduleMethod = function () {
        // ...
    };

    return my;
}());

请注意，我们已经声明了一个名为MODULE的全局模块，它有两个公共属性：一个名为MODULE.moduleMethod的方法和一个名为MODULE.moduleProperty的变量。此外，它使用匿名函数的闭包来维护私有内部状态。此外，我们可以使用上面学到的模式轻松导入所需的全局变量。

另一个非常基本的资源是：

Learning JavaScript Design Patterns （Addy Osmani的一本书）

引用：

模块模式

在JavaScript中，Module模式用于进一步模拟类的概念，使我们能够在单个对象中包含公共/私有方法和变量，从而将特定部分与全局屏蔽范围。这导致我们的函数名称与页面上其他脚本中定义的其他函数冲突的可能性降低......

在链接中查看更多内容

Answer 2

这样计算的原因是由于JavaScript的功能特性和被转换代码的类性质。打字稿试图尽可能准确地转换代码，因为Javascript是无类别的。它编写代码来模拟一个类。当然，类仿真不是实现所需结果的最有效方法，但已被证明对具有基于类的背景的程序员更具可读性。虽然有多种方法可以在JavaScript中实现所需的结果，但它最准确地转录的方式代表了它提供的来源，因为它确实基于类。至于差异，生成的代码使用构造函数来创建一个对象，然后使用该对象基于它创建对象。这就是你最终能够像使用类一样使用它的能力，因为你用它创建的对象将继承它，就像你正在转换的语言中的类一样。您提供的函数仅在调用时将值分配给自身，因为生成的代码将创建包含固有功能的对象。为了澄清更多：你的函数将像这样使用Point2D（5,4）这里也值得指出，在JavaScript中使用大写来命名对象是按惯例保留的，仅用于构造类似于生成的代码的对象。期望在使用时使用'新'方法。生成的代码将像这一点一样使用A = new Point2D（5,4）。因为代码返回函数Point2D并且在那时使用（）调用它，所以pointA成为Point2D的一个实例，它再次表现得像一个类。另外，如果要向Point2D添加任何属性，函数等，pointA会无论是否已经实例化，它都会自动选择它们。希望这能为您清除它，还有其他差异，但目前尚不清楚您想要获得多少信息。

理解Typescript编译器生成的Javascript

2 个答案:

模块模式