繁体   English   中英

了解Typescript编译器生成的Javascript

[英]Understanding Javascript generated by Typescript compiler

如果我键入此简单的打字稿代码:

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;
}

如果没有区别,那么上面的方法要简单得多

您将看到的是设计模式 - 模块 在这里查看更多:

引用:

模块导出

有时,您不仅要使用全局变量,还想声明它们。 通过使用匿名函数的返回值导出它们,我们可以轻松地做到这一点。 这样做将完成基本的模块模式,因此这是一个完整的示例:

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

    function privateMethod() {
        // ...
    }

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

    return my;
}());

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

另一个真正的基本资源是:

引用:

模块模式

在JavaScript中,模块模式用于进一步模拟类的概念,以使我们能够在单个对象中包含公共/私有方法和变量,从而使特定部分不受全局范围的影响。 这样可以减少我们的函数名称与页面上其他脚本中定义的其他函数发生冲突的可能性...

在链接中查看更多

之所以这样计算,是由于JavaScript的功能性质以及所转换代码的类性质所致。 由于Javascript是无类的,因此打字稿正在尝试尽可能准确地转换代码。 它编写代码来模拟一个类。当然,类仿真不是实现所需结果的最有效方法,但已被证明具有基于类背景的程序员对它们的可读性。 同样,尽管有多种方法可以在JavaScript中获得所需的结果,但是最准确地转录它的方式代表了它提供的源,因为它实际上是基于类的。 至于区别,生成的代码使用构造函数创建一个对象,然后使用该对象基于该对象创建对象。 这样最终可以像类一样使用它,因为使用它创建的对象将像从您转换的女巫中使用的类一样继承自它。 您提供的功能仅在被调用时才为其分配值,因为生成的代码将创建包含固有功能的对象。 为了进一步说明:您的函数将像这样使用Point2D(5,4)在这里也值得指出,在JavaScript中,使用大写字母命名对象的约定仅保留给像构造的对象那样生成的代码。预期会在使用时使用“新”方法。 生成的代码将像这个pointA = new Point2D(5,4)一样使用。 因为代码返回函数Point2D并在那时使用()进行调用,所以pointA成为Point2D的实例,该实例再次像类一样工作。此外,如果要向Point2D添加任何属性,函数等,pointA也会不论是否已实例化,它们也会自动选择它们。 希望这可以为您解决问题,还有其他区别,但是目前尚不清楚您希望获取多少信息。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM