打字稿如何编译类和普通匿名函数之间的实际区别是什么？

Question

在 TypeScript 中，假设存在一个简单的 class，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;
}());

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

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

Answer 1

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

注意引用父 class 的参数 _super。

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

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

打字稿如何编译类和普通匿名函数之间的实际区别是什么？

What's the practical difference between how typescript compiles classes and a normal anonymous function?

javascript

anonymous-function

typescript

打字稿如何编译 类 和普通匿名函数之间的实际区别是什么？

What's the practical difference between how typescript compiles classes and a normal anonymous function?

javascript

anonymous-function

typescript

打字稿如何编译类和普通匿名函数之间的实际区别是什么？