JavaScript: Class.metoda A Klasa.prototyp.metoda

Tak, pierwszy to static method zwany także class method, podczas gdy drugi to instance method.

W 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;
}

w powyższym kodzie isPerson jest metodą statyczną, podczas gdy {[6] } jest metodą instancji Person.

Poniżej, jak utworzyć obiekt z konstruktora Person.

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

Przy użyciu metody statycznej isPerson.

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

Za pomocą metoda instancji sayHi.

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

W ES6

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

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

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

zobacz, jak słowo kluczowe static zostało użyte do zadeklarowania statycznej metody isPerson.

Aby utworzyć obiekt klasy {[7] }.

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

Przy użyciu metody statycznej isPerson.

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

Przy użyciu metody instancji sayHi.

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

Uwaga: oba przykłady są zasadniczo takie same, JavaScript pozostaje językiem bezklasowym. Na class wprowadzony w ES6 jest przede wszystkim cukrem składniowym w stosunku do istniejącego prototypowego modelu dziedziczenia.

Kiedy utworzysz więcej niż jedną instancję MyClass, nadal będziesz mieć tylko jedną instancję publicMethod w pamięci, ale w przypadku privilegedMethod skończysz tworząc wiele instancji i staticMethod nie ma związku z instancją obiektu.

Dlatego prototypy oszczędzają pamięć.

Ponadto, jeśli zmienisz właściwości obiektu nadrzędnego, odpowiednia właściwość obiektu podrzędnego nie została zmieniona, zostanie ona zaktualizowana.

Dla wizualnych uczniów, przy definiowaniu funkcji bez .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`  

Z tym samym kodem, jeśli .prototype dodaje się,

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`

Żeby było jaśniej,

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

****Uwaga dla powyższego przykładu, someInstance.metoda () nie zostanie wykonana jako,
Przykładmetoda() powoduje błąd i wykonanie nie może być kontynuowane.
Ale ze względu na ilustrację i łatwe zrozumienie, zachowałem tę sekwencję.****

Wygenerowane wyniki od chrome developer console & JS Bin
Kliknij na link jsbin powyżej, aby przejść przez kod.
Przełącz komentowaną sekcję za pomocą ctrl+/

A. Metoda Statyczna:

      Class.method = function () { /* code */ }

1. method() tutaj jest funkcja właściwość Dodana do innej funkcji (tutaj Klasa).
2. ty możesz uzyskać bezpośredni dostęp do metody() za pomocą klasy / funkcji nazwa . Class.method();
3. brak potrzeby tworzenia dowolnego obiektu/instancji (new Class()) do uzyskania dostępu do metody (). Więc można to nazwać metodą statyczną.

B. Metoda prototypowa (dzielona na wszystkie instancje):

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

1. method() tutaj jest funkcja właściwość Dodana do innej funkcja protype (tutaj Klasa.prototyp).
2. You can albo bezpośredni dostęp przez nazwa klasy lub przez obiekt/instancję (new Class()).
3. Added advantage - ten sposób definicji metody() utworzy tylko jedną kopię metody () w pamięci i będzie dzielony przez Wszystkie obiekt/instancja utworzony z Class

C. Metoda klasy (każda instancja ma własną kopię):

   function Class () {
      this.method = function () { /* do something with the private members */};
   }

1. method() tutaj jest metoda zdefiniowana wewnątrz innej funkcji (tutaj Klasa).
2. nie możesz uzyskać bezpośredniego dostępu do metody() za pomocą klasy / funkcji o nazwie. Class.method();
3. musisz utworzyć obiekt / instancję (new Class()) dla dostępu do metody ().
4. ten sposób definicji metody() będzie Utwórz unikalną kopię metody () dla każdego obiektu utworzonego przy użyciu funkcji konstruktora (new Class()).
5. Added advantage-bcos of the method () scope ma pełne prawo dostępu do lokalnych członków (nazywanych również private członków) zadeklarowanych wewnątrz funkcji konstruktora (tutaj Klasa)

przykład:

    function Class() {
        var str = "Constructor method"; // private variable
        this.method = function () { console.log(str); };
    }
    Class.prototype.method = function() { console.log("Prototype method"); };
    Class.method = function() { console.log("Static method"); };

    new Class().method();     // Constructor method
    // Bcos Constructor method() has more priority over the Prototype method()

    // Bcos of the existence of the Constructor method(), the Prototype method 
    // will not be looked up. But you call it by explicity, if you want.
    // Using instance
    new Class().constructor.prototype.method(); // Prototype method

    // Using class name
    Class.prototype.method(); // Prototype method

    // Access the static method by class name
    Class.method();           // Static method