javascript - classes - Crear una clase JS: IIFE vs volver prototipo

javascript prototypes

Question

Veamos dos ejemplos en los que trataré de explicar lo que quiero entender.

var Car = function(){
  // Init class
  function Car() { };
  // Private func/vars
  var private = { color:''red'' };
  // Public func/vars
  Car.prototype = {
    newColor: function(color) { private.color = color },
    getColor: function() { return private.color }
  };

  return Car.prototype; // return with prototype
};

var myCar = new Car();

Y:

var Car = (function(){
  // Init class
  function Car() { };
  // Private func/vars
  var private = { color:''red'' };
  // Public func/vars
  Car.prototype = {
    newColor: function(color) { private.color = color },
    getColor: function() { return private.color }
  };

  return Car; // avoid prototype adding parentheses on next line;
})();

var myCar = new Car();

¡A ver !, ambas clases se crean como expresión de función y ambas funcionan por igual. Las únicas diferencias entre ellos son: La primera devuelve la función Car con su propiedad prototipo. El segundo funciona devolviendo la función Auto, evitando la propiedad del prototipo y en su lugar utiliza IIFE.

¿Cuál es la diferencia entre el uso return Car.prototype; y evitar el IIFE y usar el return Car; utilizando IIFE (paréntesis al final de la declaración de clase).

Answer 1

El segundo ejemplo de código es la forma correcta de lograr lo que está buscando. Crea una función de ejecución inmediata, dentro de la cual crea una nueva función, la agrega a su prototipo y luego la devuelve.

El primer ejemplo es un poco extraño, y no crea una función constructora adecuada. La línea

return Car.prototype; // return with prototype

hace que su función Car simplemente devuelva siempre el objeto literal que había asignado previamente a Car.prototype . Esto anula el comportamiento normal de una función invocada con una new

Sólo una cosa a tener en cuenta, esta línea:

Car.prototype = {
   newColor: function(color) { private.color = color },
   getColor: function() { return private.color }
};

hará que la propiedad del constructor de los objetos recién creados ya no apunte a la función Car. Hay dos formas fáciles de solucionar esto si esto es importante para usted.

Car.prototype = {
   newColor: function(color) { private.color = color },
   getColor: function() { return private.color }
};
Car.prototype.constructor = Car;   // <-------- add this line

O cambiar lo anterior a

Car.prototype.newColor = function(color) { private.color = color };
Car.prototype.getColor = function() { return private.color };