Question

我正在阅读箭头功能（在打字稿环境中）。我碰到了这条线。

为每个Handler类型的对象创建
arrow函数。另一方面，方法仅创建一次并附加到Handler的原型。它们在Handler类型的所有对象之间共享。

来源：https://www.typescriptlang.org/docs/handbook/functions.html

我听不懂。如果有人可以解释，请回答。

Answer 1

拥有此功能时：

class Example {
    method() {
    }
}

const e1 = new Example();
const e2 = new Example();

您拥有method函数的一个副本，而不是两个。 e1和e2都使用它们作为原型，就像这样：

        +−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−+
        |                                             |
        \   +−−−−−−−−−−−−+                            |
Example−−+−>| (function) |                            |
            +−−−−−−−−−−−−+           +−−−−−−−−−−−−−+  |
            | prototype  |−−−−−−+−+−>|  (object)   |  |
            +−−−−−−−−−−−−+     /  /  +−−−−−−−−−−−−−+  |
                               | |   | constructor |−−+  +−−−−−−−−−−−−−−−−+
                               | |   | method      |−−−−>|   (function)   |
                               | |   +−−−−−−−−−−−−−+     +−−−−−−−−−−−−−−−−+
                               | |                       | name: "method" |
            +−−−−−−−−−−−−−−−+  | |                       +−−−−−−−−−−−−−−−−+
e1−−−−−−−−−>|   (object)    |  | |
            +−−−−−−−−−−−−−−−+  | |
            | [[Prototype]] |−−+ |
            +−−−−−−−−−−−−−−−+    |
                                 |
            +−−−−−−−−−−−−−−−+    |
e2−−−−−−−−−>|   (object)    |    |
            +−−−−−−−−−−−−−−−+    |
            | [[Prototype]] |−−−−+
            +−−−−−−−−−−−−−−−+

但是，当您这样做时：

class Example {
    constructor() {
        this.method = () => { };
    }
}

const e1 = new Example();
const e2 = new Example();

或者这个：

class Example {
    method = () => { };
}

const e1 = new Example();
const e2 = new Example();

您有{strong>两份method函数的副本，一份是e1，另一份是e2，如下所示：

        +−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−+
        |                                                                      |
        \   +−−−−−−−−−−−−+                                                     |
Example−−+−>| (function) |                                                     |
            +−−−−−−−−−−−−+                                    +−−−−−−−−−−−−−+  |
            | prototype  |−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−+−+−>|  (object)   |  |
            +−−−−−−−−−−−−+                              /  /  +−−−−−−−−−−−−−+  |
                                                        | |   | constructor |−−+
            +−−−−−−−−−−−−−−−+                           | |   +−−−−−−−−−−−−−+
e1−−−−−−−−−>|   (object)    |                           | |
            +−−−−−−−−−−−−−−−+                           | |
            | [[Prototype]] |−−−−−−−−−−−−−−−−−−−−−−−−−−−+ |
            | method        |−−+                          |
            +−−−−−−−−−−−−−−−+  |     +−−−−−−−−−−−−−−−−+   |
                               +−−−−>|   (function)   |   |
                                     +−−−−−−−−−−−−−−−−+   |
            +−−−−−−−−−−−−−−−+        | name: "method" |   |
e2−−−−−−−−−>|   (object)    |        +−−−−−−−−−−−−−−−−+   |
            +−−−−−−−−−−−−−−−+                             |
            | [[Prototype]] |−−−−−−−−−−−−−−−−−−−−−−−−−−−−−+
            | method        |−−+
            +−−−−−−−−−−−−−−−+  |     +−−−−−−−−−−−−−−−−+
                               +−−−−>|   (function)   |
                                     +−−−−−−−−−−−−−−−−+
                                     | name: "method" |
                                     +−−−−−−−−−−−−−−−−+

任何体面的JavaScript引擎都会在这些函数实例之间共享 code ，但是函数实例本身必须是不同的，因为它们会覆盖不同的上下文（调用构造函数的上下文位于重新创建）。（函数对象本身不需要很大，尤其是在经过彻底优化的引擎中。如果您查看internal slots a function must have [实际上；引擎可以按照规范描述的方式进行优化），仅[[Environment]]在它们之间有所不同。）

按实例创建的箭头函数的优点是，您不必担心调用它们的this，因为它们会忽略它。相反，他们使用{em> close （将引用创建时创建的实例）封闭的this，这对于回调很方便。

该方法的优势在于它是共享的，并且（在高度动态的环境中）如果在原型上用其他实现替换了该方法，则e1和e2将使用该更新的实现。（这种情况很少见。）

箭头函数与类方法的内存占用量

1 个答案: