JavaScript: Class.method vs. Class.prototype.method

Apa perbedaan antara dua deklarasi berikut?

Class.method = function () { /* code */ }
Class.prototype.method = function () { /* code using this.values */ }

Apakah saya tetap bisa menganggap pernyataan pertama sebagai deklarasi metode statis, dan pernyataan kedua sebagai deklarasi metode instance?

Ya, fungsi pertama tidak memiliki hubungan dengan instance objek dari fungsi konstruktor itu , Anda dapat menganggapnya sebagai 'metode statis' .

Dalam fungsi JavaScript adalah objek kelas satu , yang berarti Anda dapat memperlakukannya sama seperti objek apa pun, dalam hal ini, Anda hanya menambahkan properti ke objek fungsi .

Fungsi kedua, saat Anda memperluas prototipe fungsi konstruktor, itu akan tersedia untuk semua instance objek yang dibuat dengan newkata kunci, dan konteks di dalam fungsi tersebut ( thiskata kunci) akan merujuk ke instance objek aktual di mana Anda menyebutnya.

Pertimbangkan contoh ini:

// constructor function
function MyClass () {
  var privateVariable; // private member only available within the constructor fn

  this.privilegedMethod = function () { // it can access private members
    //..
  };
}

// A 'static method', it's just like a normal function 
// it has no relation with any 'MyClass' object instance
MyClass.staticMethod = function () {};

MyClass.prototype.publicMethod = function () {
  // the 'this' keyword refers to the object instance
  // you can access only 'privileged' and 'public' members
};

var myObj = new MyClass(); // new object instance

myObj.publicMethod();
MyClass.staticMethod();

Ketika Anda membuat lebih dari satu instance dari MyClass, Anda hanya akan memiliki hanya satu instance publicMethod dalam memori tetapi dalam kasus privilegeMethod Anda akhirnya akan membuat banyak instance dan staticMethod tidak memiliki hubungan dengan instance objek.

Itu sebabnya prototipe menghemat memori.

Juga, jika Anda mengubah properti objek induk, apakah properti yang sesuai anak itu belum diubah, itu akan diperbarui.

Untuk pelajar visual, ketika mendefinisikan fungsi tanpa .prototype

ExampleClass = function(){};
ExampleClass.method = function(customString){
             console.log((customString !== undefined)? 
                          customString : 
                          "called from func def.");}
ExampleClass.method(); // >> output: `called from func def.`  

var someInstance = new ExampleClass();
someInstance.method('Called from instance');
    // >> error! `someInstance.method is not a function`  

Dengan kode yang sama, jika .prototypeditambahkan,

ExampleClass.prototype.method = function(customString){
             console.log((customString !== undefined)? 
                          customString : 
                          "called from func def.");}
ExampleClass.method();  
      // > error! `ExampleClass.method is not a function.`  

var someInstance = new ExampleClass();
someInstance.method('Called from instance');
                 // > output: `Called from instance`

Untuk membuatnya lebih jelas,

ExampleClass = function(){};
ExampleClass.directM = function(){}  //M for method
ExampleClass.prototype.protoM = function(){}

var instanceOfExample = new ExampleClass();

ExampleClass.directM();     ✓ works
instanceOfExample.directM();   x Error!

ExampleClass.protoM();     x Error!
instanceOfExample.protoM();  ✓ works

**** Catatan untuk contoh di atas, someInstance.method () tidak akan dieksekusi karena,
ExampleClass.method () menyebabkan kesalahan & eksekusi tidak dapat dilanjutkan.
Tetapi demi ilustrasi & pemahaman yang mudah, saya telah menjaga urutan ini. ****

Hasil yang dihasilkan dari chrome developer console& Klik tautan jsbin di atas untuk melangkah melalui kode. Toggle bagian komentar dengan +JS Bin

ctrl/

Ya, yang pertama static methoddisebut juga class method, sedangkan yang kedua adalah instance method.

Perhatikan contoh-contoh berikut, untuk memahaminya secara lebih rinci.

Dalam ES5

function Person(firstName, lastName) {
   this.firstName = firstName;
   this.lastName = lastName;
}

Person.isPerson = function(obj) {
   return obj.constructor === Person;
}

Person.prototype.sayHi = function() {
   return "Hi " + this.firstName;
}

Dalam kode di atas, isPersonadalah metode statis, sedangkan sayHimetode instan dari Person.

Di bawah ini adalah cara membuat objek dari Personkonstruktor.

var aminu = new Person("Aminu", "Abubakar");

Menggunakan metode statis isPerson.

Person.isPerson(aminu); // will return true

Menggunakan metode instance sayHi.

aminu.sayHi(); // will return "Hi Aminu"

Dalam ES6

class Person {
   constructor(firstName, lastName) {
      this.firstName = firstName;
      this.lastName = lastName;
   }

   static isPerson(obj) {
      return obj.constructor === Person;
   }

   sayHi() {
      return `Hi ${this.firstName}`;
   }
}

Lihat bagaimana statickata kunci digunakan untuk mendeklarasikan metode statis isPerson.

Untuk membuat objek Personkelas.

const aminu = new Person("Aminu", "Abubakar");

Menggunakan metode statis isPerson.

Person.isPerson(aminu); // will return true

Menggunakan metode instance sayHi.

aminu.sayHi(); // will return "Hi Aminu"

CATATAN: Kedua contoh pada dasarnya sama, JavaScript tetap merupakan bahasa tanpa kelas. Yang classdiperkenalkan dalam ES6 terutama adalah gula sintaksis atas model pewarisan berbasis prototipe yang ada.