object oriented programming create a basic javascript object

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

Question

¿Cuál es la diferencia entre las siguientes dos declaraciones?

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

¿Está bien pensar que la primera declaración es una declaración de un método estático y la segunda declaración como una declaración de un método de instancia?

Answer 1

Cuando creas más de una instancia de MyClass, solo tendrás una instancia de publicMethod en la memoria, pero en caso de que sea un método privilegiado, terminarás creando muchas instancias y staticMethod no tiene relación con una instancia de objeto.

Es por eso que los prototipos ahorran memoria.

Además, si cambia las propiedades del objeto principal, si la propiedad correspondiente del niño no se ha modificado, se actualizará.

Answer 2

Para aprendices visuales, al definir la función sin .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`  

Con el mismo código, si se agrega .prototype ,

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`

Para hacerlo más claro,

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

**** Nota para el ejemplo anterior, someInstance.method () no se ejecutará como,
ExampleClass.method () hace que el error y la ejecución no puedan continuar.
Pero por el bien de la ilustración y la fácil comprensión, he mantenido esta secuencia. ****

Resultados generados desde la chrome developer console y JS Bin
Haga clic en el enlace jsbin anterior para recorrer el código.
Alternar sección comentada con ctrl + /

Answer 3

Sí, el primero es un static method también llamado class method , mientras que el segundo es un instance method .

Considere los siguientes ejemplos, para entenderlo con más detalle.

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

En el código anterior, isPerson es un método estático, mientras que sayHi es un método de instancia de Person .

A continuación, se muestra cómo crear un objeto desde el constructor de Person .

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

Usando el método estático isPerson .

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

Usando el método de instancia sayHi .

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

En es6

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

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

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

Mira cómo se usó static palabra clave static para declarar que el método estático es isPerson

Para crear un objeto de la clase Person .

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

Usando el método estático isPerson .

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

Usando el método de instancia sayHi .

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

NOTA: Ambos ejemplos son esencialmente los mismos, JavaScript sigue siendo un lenguaje sin clases. La class introducida en ES6 es principalmente un azúcar sintáctico sobre el modelo de herencia basado en prototipo existente.

Answer 4

Sí, la primera función no tiene relación con una instancia de objeto de esa función constructora , puede considerarla como un ''método estático'' .

En las funciones de JavaScript son objetos de first-class , eso significa que puede tratarlos como cualquier objeto, en este caso, solo está agregando una propiedad al objeto de función .

La segunda función, cuando extienda el prototipo de la función de constructor, estará disponible para todas las instancias de objetos creadas con la new palabra clave, y el contexto dentro de esa función (la palabra clave this ) se referirá a la instancia de objeto real donde la llame .

Considera este ejemplo:

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