在 TypeScript 中定义方法的不同方法答案

【问题标题】：Different ways to define a method in TypeScript在 TypeScript 中定义方法的不同方法
【发布时间】：2018-05-06 03:07:13
【问题描述】：

我在 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;
});

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

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

【问题讨论】：

1 个主要区别是，原型中的函数不会复制到每个对象中。因此，如果您创建 10 个对象，则每个对象中都会有 10 个方法 1 副本，但方法 2 有 1 个副本
method2 不是方法，而是箭头函数

标签： javascript typescript

【解决方案1】：

当您在函数中使用this 并将该函数传递给其他人时，就会出现功能差异。普通函数不会从声明它们的上下文中捕获this，而箭头函数则可以。如果将普通函数分配给变量并调用它，this 将不会是 Screen1 的实例

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"

还有性能影响。由于普通函数被分配给原型，它们只被创建一次。箭头函数必须捕获this，因此必须为类的每个实例创建。如果你对可能的对象贪得无厌，这可能是个问题。

【讨论】：