箭头函数vs类方法内存占用

我正在阅读关于箭头函数(在打字稿上下文中).我遇到了这条线.

每个Handler类型的对象都会创建箭头函数.另一方面,方法只创建一次并附加到Handler的原型.它们在Handler类型的所有对象之间共享.

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

我无法理解.请回答是否有人可以解释.

当你有这个:

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

你有两个method函数副本,一个用于e1和一个用于e2,如下所示:

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

任何体面的Javascript引擎都会在这些函数实例之间共享代码,但函数实例本身必须是不同的,因为它们关闭不同的上下文(调用构造函数的上下文,它们被创建).(功能对象本身不需要非常大,特别是在完全优化的引擎中.如果你看一下内部插槽,一个功能必须具有 [实际上;引擎可以优化,只要它们的行为符合规范所述],只是[[Environment]]它们之间有所不同.)

每个实例创建的箭头函数的优点是你不必担心this它们被称为什么,因为它们忽略它; 相反,他们使用this它们关闭(它将引用它们被创建时创建的实例),这对于回调来说非常方便.

该方法的优点是,它的共享,和(在高动态的环境中),如果它在原型与不同的实施方案替换,e1并且e2将使用该更新的实施.(这是一个罕见的边缘案例.)