javascript - typescript 如何编译类和普通匿名函数之间的实际区别是什么？

标签 javascript typescript anonymous-function

<分区>

在 TypeScript 中，假设存在一个简单的类 Person3。

class Person3 {
    name: string
    constructor(public name: string) {
        this.name = name
    }
}

如果我们手动编写 JavaScript，我们可能会编写如下函数:

var Person3 = function(name){
  this.name = name;
}

甚至可以使用纯函数语法:

function Person3(name){
  this.name = name;
}

但是 TypeScript 编译为:

var Person3 = (function(){
  function Person3(name){
    this.name = name;
  }
  return Person3;
}());

一个变量，它包含一个表达式，该表达式包含一个匿名函数。这个匿名函数包含并返回一个名称与变量名称匹配的命名函数。据我所知，匿名函数称为内联函数。当它被调用时，命名函数被返回，然后在它被返回到表达式括号中时被评估。

为什么要这样做？我敢肯定一定有原因，但我仍然觉得我无法真正理解这里发生的事情。为什么不直接使用 name = anonymous 构造器呢？嵌套函数给我们带来了什么好处？

最佳答案

Why do this?

IIFE 用于继承的情况:

class A {
}
class B extends A {
}

... 被转译为(使用 ES3/5 目标):

var __extends = // ...
var A = (function () {
    function A() {
    }
    return A;
}());
var B = (function (_super) {
    __extends(B, _super);
    function B() {
        return _super.apply(this, arguments) || this;
    }
    return B;
}(A));

注意引用父类的参数 _super。

但是这种转译很快就会过时。如果我们想手动编写 JavaScript，对于现代 JS 引擎，我们可以这样写:

class Person3 {
    constructor(name) {
        this.name = name
    }
}

关于javascript - typescript 如何编译类和普通匿名函数之间的实际区别是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42413317/

上一篇：javascript - 将转义字符视为单个字符，查找字符串中的字符数

下一篇：javascript - 如何防止浏览器覆盖我的 ace 编辑器的 keyBindings？

相关文章：

javascript - 如果一个列表项没有内容或为空，则隐藏多个列表项

javascript - 如何跨 android 和 JS bridge 配置通用数据模型？

angular - Xtermjs 无法复制和粘贴

javascript - 当通过匿名函数封装一个对象时，显示错误信息

带有 array_walk 的 PHP 匿名函数

javascript - ES6解构获取嵌套对象属性

javascript - 如何对 d3 json 中的数字应用多种格式

javascript - 动态创建绑定(bind)到可观察数组内的可观察对象的复选框不起作用

typescript - 如何使用 Typescript 定义 knex 迁移

matlab - 如何在Matlab中嵌套匿名函数？