Dos formas de crear objetos JavaScript, ¿cuál debo usar?

Question

Estas son las formas de crear objetos de javascript:

function apple(optional_params) { 
    this.type = "macintosh"; 
    this.color = "red"; 
    this.getInfo = function() { 
     return this.color + ' ' + this.type + ' apple'; 
    }; 
} 

var apple = { 
    type: "macintosh", 
    color: "red", 
    getInfo: function() { 
     return this.color + ' ' + this.type + ' apple'; 
    } 
} 

realmente prefiero este último uno más, ya que es la sintaxis JSON, pero he visto más de lo primero que el último.

• ¿Existen diferencias entre ellos funcionalmente?
• ¿Se podrían extender, heredar y clonar/copiar cada uno de ellos?
• En este último podría crear fácilmente elementos anidados, ¿es posible con el primero?
• En este último no puedo pasar parámetros opcionales?
• ¿Están sirviendo para diferentes propósitos? En caso afirmativo, ¿podría dar escenarios donde usaría cualquiera de ellos?

Answer 1

Esta es la manera que crean objetos JavaScript en la mayoría de los casos:

/** 
* This becomes the constructor of Apple, a type of fruit. 
*/ 
var Apple = function() { 
    // Object init here 
    // This becomes a "private" variable 
    var seeds = 50; 

    // This becomes "public" properties 
    this.color = 'red'; 
    this.weight = 100; // in grams if you wonder. 

    /** 
    * Do stuff to count the seeds 
    * This becomes a privileged method that can access private variables 
    * and be called from outside the object 
    */ 
    this.countSeeds = function() { 
     // Do stuff to count the seeds. 
     return seeds; 
    } 
} 

/** 
* Static functions can be utility functions that can be called separate from 
* object instances. They do not have access to any variables or functions 
* in the constructor. 
*/ 
Apple.getTypes = function() { 
    return ['golden', 'granny', 'red', 'pink']; 
} 

/** 
* Public function that gets the default color 
*/ 
Apple.prototype.getColor = function() { 
    return Apple.color; 
} 

/** 
* Public function that sets the color of the object instance. 
*/ 
Apple.prototype.setColor = function(color) { 
    this.color = color; 
    return this.color; 
} 

var golden = new Apple(); 
golden.setColor('yellow'); 
alert('The color of the apple is ' + golden.color); 

Answer 2

Lo siento, todavía soy un pequeño novato en javascript, pero ¿no son estas funciones y no objetos? Orientada a objetos, sí, pero ¿funciones? Muy interesado en realidad.

Oh, solo he usado la primera. Creo que me parece más claro porque declara abiertamente "nueva función".

Answer 3

La diferencia es que puede reutilizar la primera. Ejemplo:

function Apple(type, color) { 
    this.type = type; 
    this.color = color; 
    this.getInfo = function() { 
    return this.color + ' ' + this.type + ' apple'; 
    } 
} 

var red = new Apple("Macintosh", "red"); 
var green = new Apple("Granny Smith", "green"); 

vs

var red = { 
    type: "Macintosh", 
    color: "red", 
    getInfo: function() { 
    return this.color + ' ' + this.type + ' apple'; 
    } 
}; 

var green = { 
    type: "Granny Smith", 
    color: "green", 
    getInfo: function() { 
    return this.color + ' ' + this.type + ' apple'; 
    } 
}; 

Answer 4

Para su primer objeto que le quiere poner la función de miembro en el prototipo, como por ejemplo:

function apple(optional_params) { 
    this.type = "macintosh"; 
    this.color = "red"; 
} 

apple.prototype.getInfo = function() { 
    return this.color + ' ' + this.type + ' apple'; 
} 

Esto hace que el "objeto "para crear solo dos campos nuevos en la memoria (tipo y color) mientras mantiene la función como parte del prototipo para ese objeto. Su segundo objeto (tabla hash) crea una nueva función para cada objeto.

Como puede ver, utilizar el enfoque de función es bueno si tiene muchas funciones, porque las funciones no ocupan memoria extra.

Para aclarar: Sus dos ejemplos producen el mismo resultado, pero si coloca la función en un prototipo, el resultado es diferente.

Answer 5

El segundo ejemplo simplemente define una instancia de Object, con algunas propiedades establecidas. El primero es mucho más interesante.

Las funciones en JavaScript tienen dos propósitos, uno como una función/procedimiento normal, y el otro como la base para la herencia del prototipo, similar a una "clase" en el OOP normal.

Por ejemplo:

var apple = function() { 
    this.type = 'granny smith'; 
}; 
var myApple = new apple(); 
alert(myApple.type); // -> 'granny smith' 

Aquí, hemos definido una "clase" llamada apple, con un inicializador que establece la propiedad type. myApple se crea como una instancia de apple, y la propiedad type se establece mediante el inicializador apple().

(Dicho sea de paso, new apple() podría también ser llamado como new apple con el paréntesis omitido y el resultado sigue siendo el mismo, el inicializador todavía se llama, sólo se recibe ningún argumento)

La otra cosa importante que usando new nos da es herencia prototípica. Todas las funciones vienen con un objeto prototipo en el que podemos establecer propiedades. Esas propiedades se convierten en valores de reserva, por ejemplo, objetos que no tienen su propio valor definido.

Ejemplo:

var greenApple = function() { }; 
var myApple = new apple(); 
alert(myApple.color); // -> undefined 
greenApple.prototype.color = 'green' 
alert(myApple.color); // -> green 

Aquí, el establecimiento de greenApple.prototype.color afectó a la propiedad de color para el myApple ya habíamos creado. Esto es lo que se conoce como herencia prototípica, y tiene una amplia variedad de usos.

 

Editar:que sigue se refiere a una versión anterior de la cuestión que se ha modificado mientras estaba escribiendo esto. Puede ignorarlo a menos que esté especialmente interesado.

Ahora, de vuelta a su primer ejemplo:

var apple = new function() { ... } 

Debido a que tiene la palabra clave new antes de la definición de la función, el efecto es como crear la clase de manzana, por lo que un objeto myApple, luego tirar la clase de manzana lejos. Si tiene acceso a esta clase, puede usar .prototype para agregar propiedades de prototipo, pero no lo hace; todo lo que está contenido en la variable apple (en términos de OOP) es una instancia de la clase, no la clase misma.