javascript - Fungsi panah vs metode kelas jejak memori

Saya sedang membaca tentang fungsi panah (dalam konteks TypeScript). Dan saya menemukan baris ini.

fungsi panah dibuat untuk setiap objek dari tipe Handler. Metode, di sisi lain, hanya dibuat sekali dan dilampirkan ke prototipe Handler. Mereka dibagikan antara semua objek dari tipe Handler.

Sumber: https://www.typescriptlang.org/docs/handbook/functions.html

Saya tidak bisa mengerti. Tolong jawab jika ada yang bisa menjelaskan.

Jawaban #1

Ketika Anda memiliki ini:

class Example {
    method() {
    }
}

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

Anda memiliki satu salinan dari fungsi method, bukan dua. Itu ada pada objek yang digunakan kedua e1 dan e2 sebagai prototipe mereka, seperti ini:

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

Tapi ketika kamu melakukan ini:

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

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

atau ini:

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

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

Anda memiliki dua salinan dari fungsi method, satu untuk e1 dan satu untuk e2, seperti ini:

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

Setiap mesin JavaScript yang layak akan membagikan kode di antara instance fungsi-fungsi tersebut, tetapi instance fungsi itu sendiri harus berbeda, karena mereka menutup konteks yang berbeda (konteks panggilan ke konstruktor tempat mereka dibuat). (Objek fungsi itu sendiri tidak perlu terlalu besar, terutama pada mesin yang dioptimalkan sepenuhnya. Jika Anda melihat slot internal yang harus dimiliki oleh sebuah fungsi [secara efektif; mesin dapat mengoptimalkan asalkan berperilaku seperti yang dijelaskan oleh spesifikasi], hanya [[Environment]] yang berbeda di antara mereka.)

Keuntungan dari fungsi panah yang dibuat per-instan adalah Anda tidak perlu khawatir tentang this yang digunakan saat mereka dipanggil, karena mereka mengabaikannya; sebaliknya, mereka menggunakan this yang mereka tutup (yang akan merujuk ke instan yang dibuat saat mereka dibuat), yang bisa berguna untuk panggilan balik.

Keuntungan dari metode ini adalah bahwa metode ini bersifat bersama, dan (dalam lingkungan yang sangat dinamis) jika metode ini diganti pada prototipe dengan implementasi yang berbeda, e1 dan e2 akan menggunakan implementasi yang diperbarui tersebut. (Itu adalah kasus tepi yang jarang.)

Artikel terkait