Javascript 在TypeScript中定义方法的不同方法

我有一个TypeScript模块，如下所示：

import app = require("durandal/app");
import ko = require("knockout");

class Screen1 {
    method1(arg: string): string {
        return "Hello";
    }

    method2 = (arg: string): string => {
        return "Hello";
    };
}

export = Screen1;

这将生成以下JavaScript：

define(["require", "exports"], function (require, exports) {
    "use strict";
    var Screen1 = (function () {
        function Screen1() {
            this.method2 = function (arg) {
                return "Hello";
            };
        }
        Screen1.prototype.method1 = function (arg) {
            return "Hello";
        };
        return Screen1;
    }());
    return Screen1;
});

我可以看到每个方法的不同输出，但在运行时实际的差异是什么？我怀疑如果在这些方法中使用，它会影响这个的含义，但我不确定最好的调查方法

---

（对我来说，TypeScript最令人沮丧的事情之一是，有多少种方法可以完成看似完全相同的事情，却有着难以理解的细微差别——比如定义一个类。我知道4种方法。非常令人困惑）

当您在函数中使用

此

并将该函数传递给其他人时，会出现功能上的差异。普通函数不会从声明它们的上下文中捕获

，而箭头函数则会。如果将普通函数指定给变量并调用它，则此

将不会是

屏幕1

class Screen1 {
    msg = "Hello"
    method1(arg: string): string {
        return this.msg;
    }

    method2 = (arg: string): string => {
        return this.msg;
    };
}

var v = new Screen1();
var fn = v.method1;
fn(""); // will return undefined
var fn2 = v.method2;
fn2(""); // will return "Hello"

---

还有一个性能方面的影响。由于正常功能被分配给原型，因此它们只创建一次。箭头函数必须捕获该，因此必须为类的每个实例创建。如果您不满足可能的对象，这可能是一个问题。

1主要区别在于，原型中的函数并没有复制到每个对象中。因此，如果创建10个对象，每个对象中将有10个method1副本，但method2

method2

的1个副本不是一个方法，而是一个箭头函数