Análisis detallado de cuatro formas de crear objetos en JavaScript

Prefacio

Hay muchas formas de crear objetos usando JavaScript. Ahora enumeremos cuatro de ellos y enumeremos las ventajas y desventajas de cada método, para que pueda elegirlo y usarlo. Echemos un vistazo.

Modelo de fábrica

 function createperson (nombre, edad) {var obj = new Object (); obj.name = nombre; obj.age = edad; regresar obj; // Asegúrese de regresar, de lo contrario indefinido: Undefinado} var persona1 = new Createperson ('Young', 18); console.log (persona1.name + ':' + persona1.age);

Ventajas: el patrón de fábrica puede resolver el problema de crear múltiples objetos similares

Desventajas: el problema de reconocimiento de objetos no se ha resuelto (cómo determinar el tipo de objeto)

Modo de constructor

 Función Persona (nombre, edad) {this.name = name; this.age = edad; } var persona1 = nueva persona ('joven', 18); console.log (persona1.name + ':' + persona1.age);

Antes de hablar sobre sus pros y contras, hablemos primero de su propia historia.

Use constructores como funciones

 Función Persona (nombre, edad) {this.name = name; this.age = edad; this.sayName = function () {return this.name; }} // use var persona1 = nueva persona ('joven', 18); persona1.sayname (); console.log (persona1.name + ':' + persona1.age); // llamando a la persona ('viento', 18); console.log (window.sayname ()); // llamando var obj = new Object (); Persona.call (obj, 'pájaro', 100); console.log (obj.sayname ());

Ventajas y desventajas de los constructores

Ventajas: su instancia se puede identificar como un tipo específico

Desventajas: cada método debe recrearse en cada instancia. Por supuesto que puedes cambiarlo así:

 Función Persona (nombre, edad) {this.name = name; this.age = edad; this.sayName = SayName; } función saysname () {return this.name; }

En su lugar, llame a las funciones globales, por lo que no hay encapsulación. . . El siguiente modo prototipo puede compensar esta deficiencia

Modo prototipo

 función persona () {} persona.prototype.name = 'Young'; Persona.prototype.age = 18; Persona.prototype.sayname = function () {return this.name; } var persona1 = nueva persona (); console.log (persona1.sayname ()); var persona2 = nueva persona (); console.log (persona1.sayname ()); alerta (persona1.sayname === Person.sayName); // Person1 y Person2 Acceden a la misma función SayName () del mismo grupo de atributos

Aunque se puede acceder al valor guardado en el prototipo a través de la instancia del objeto, el valor almacenado en el prototipo no se puede reescribir a través del objeto de instancia

 función persona () {} persona.prototype.name = 'Young'; Persona.prototype.age = 18; Persona.prototype.sayname = function () {return this.name; } var persona1 = nueva persona (); var persona2 = nueva persona (); persona1.name = 'viento'; console.log (persona1.sayname ()); // wind console.log (persona2.sayname ()); // joven alerta (persona1.sayname == persona2.sayname); // true

Cuando llamamos person1.sayName , realizaremos dos búsquedas en sucesión. El analizador primero determina si la persona de instancia1 tiene el atributo sayName . Si lo hay, llamaremos a nuestros propios atributos. Si no hay, buscaremos los atributos en el prototipo.

 función persona () {} persona.prototype.name = 'Young'; Persona.prototype.age = 18; Persona.prototype.sayname = function () {return this.name; } var persona1 = nueva persona (); var persona2 = nueva persona (); persona1.name = 'viento'; console.log (persona1.sayname ()); // wind console.log (persona2.sayname ()); // Young delete Person1.name; console.log (persona1.sayname ()); // joven console.log (persona2.sayname ()); // joven

Use el método de hasOwnPropertyType para detectar si existe una propiedad en el prototipo o en la instancia. El método se hereda del objeto, verdadero en la instancia y falso en el prototipo.

Use Object.keys() para enumerar las propiedades de instancia en los objetos

 función persona () {} persona.prototype.name = 'Young'; Persona.prototype.age = 18; Persona.prototype.sayname = function () {return this.name; } var keys = object.keys (persona.prototype); console.log (llaves); // ["nombre", "edad", "sayname"]

Pros y contras del modo prototipo

Ventajas: no es necesario reiterar cada método en cada instancia

Desventajas: muy pocas personas usan el modo prototipo solo. . Lista de preguntas en detalle

 función persona () {} persona.prototype = {constructor: persona, nombre: 'joven', edad: 18, amigos: ['big', 'cerdo'], sayname: function () {return this.name; }}; var p1 = nueva persona (); var p2 = nueva persona (); p1.friends.push ('Mon'); console.log (p1.friends); // ["grande", "cerdo", "mon"] console.log (p2.friends); // ["grande", "cerdo", "mon"]

Es precisamente porque las instancias generalmente tienen sus propios atributos, y los colocamos en Person.prototype aquí, por lo que con la modificación de P1, se modifican toda la instancia y el prototipo. Luego, podemos usar una combinación de modo constructor y modo prototipo.

Use el modo constructor y el modo prototipo en combinación

 Función Persona (nombre, edad) {this.name = name; this.age = edad; this.friends = ['Big', 'Pig']; } Persona.prototype = {sayname: function () {return this.name; }}; var p1 = nueva persona ('joven', 18); var p2 = nueva persona ('viento', 78); p1.friends.push ('raganya'); console.log (p1.friends); // ["big", "cerdo", "raganya"] console.log (p2.friends); // ["big", "pig"] console.log (p1.friends == p2.friends); // falso console.log (p1.sayname == p2.sayname); // verdadero

Este patrón es actualmente el método más utilizado y más reconocido para crear tipos personalizados. es un modo predeterminado utilizado para definir los tipos de referencia.

Resumir

Lo anterior se trata de analizar la forma en que se crean los objetos en JavaScript. Este artículo han resumido los cuatro métodos y sus ventajas y desventajas. Espero que pueda ser útil para todos aprender a usar JavaScript.