Question

我在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种方法可以做到这一点。混乱）

Answer 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，因此必须为类的每个实例创建。如果你对可能的物体进行亵渎，这可能是一个问题。

在TypeScript

1 个答案: