Resumen del esquema de la creación de objetos en JavaScript

Resumen del esquema de la creación de objetos en JavaScript

** JavaScript crea un patrón de objeto:

Objeto literal

Modelo de fábrica

Modo de constructor

Modo prototipo

Combinando el constructor y el patrón prototipo

Modo dinámico prototipo

**

La mayoría de los idiomas orientados a objetos tienen el concepto de una clase, a través del cual se pueden crear múltiples objetos con los mismos métodos y atributos. Aunque técnicamente, JavaScript es un lenguaje orientado a objetos, JavaScript no tiene el concepto de clases, todo es un objeto. Cualquier objeto es una instancia de cierto tipo de referencia y se crea a través de los tipos de referencia existentes; El tipo de referencia puede ser nativo o personalizado.

1. Objeto literal

 var persona = {nombre: 'nicholas'; Edad: '22'; trabajo: "ingeniero de software" dice Name: function () {alter (this.name); }}

En el ejemplo, se crea un objeto con nombre de persona y se agregan tres atributos (nombre, edad, trabajo) y un método (sayname ()). El método sayname () se usa para mostrar el valor de este.name (resuelto como persona.name).

Los literales de objetos se pueden usar para crear un solo objeto, pero este método tiene una desventaja obvia: crear muchos objetos utilizando la misma interfaz producirá mucho código duplicado.

2. Modelo de fábrica

El patrón de fábrica es un patrón de diseño bien conocido en el campo de la ingeniería de software. El patrón de fábrica abstrae el proceso de crear objetos específicos y utiliza funciones para encapsular los detalles de la creación de objetos con interfaces específicas.

 function createperson (nombre, edad, trabajo) {var o = nuevo objeto {}; o.name = nombre; o.age = edad; o.job = trabajo; O.SayName = function () {alert (this.name); }; return o;} var persona1 = createperson ("nicholas", 22, "ingeniero de software"); var persona2 = createperson ("greg", 24, "estudiante");

La función Creatperson {} puede construir un objeto de persona que contenga toda la información necesaria basada en los parámetros aceptados. Esta función se puede llamar innumerables tiempos, y cada vez devolverá un objeto que contenga tres propiedades y un método.

Aunque el modelo de fábrica resuelve el problema de crear múltiples objetos similares, no resuelve el problema del reconocimiento de objetos (es decir, cómo saber el tipo de objeto).

3. Modo constructor

 Función persona (nombre, edad, trabajo) {this.name = name; this.age = edad; this.job = trabajo; this.sayName = function () {alert (this.name); }} // Cree una instancia de persona a través del nuevo operador var persona1 = nueva persona ("nicholas", 22, "ingeniero de software"); var persona2 = nueva persona ("greg", 24, "estudiante"); persona1.sayname (); //Nicholasperson2.sayname (); // Greg

La diferencia del modelo de fábrica es

Crear objeto no se muestra

Asigne atributos y métodos directamente a este objeto

Sin declaración de devolución

Para crear una nueva instancia de persona, debe usar el nuevo operador. 4 pasos para llamar al constructor:

Crea un nuevo objeto

Asigne el alcance del constructor a un nuevo objeto (esto apunta a este nuevo objeto)

Ejecutar el código en el constructor

Devolver un nuevo objeto

Todos los objetos creados en este ejemplo son instancias de instancias de objetos y persona. El operador puede verificar el operador.

 alerta (persona1 instancia de objeto); // Verdadero

El patrón del constructor también tiene sus propios problemas. De hecho, el método SayName se recreará una vez en cada instancia. Cabe señalar que los métodos creados por la instancia no son iguales. El siguiente código puede probar que

 alerta (persona1.sayname == Person2.sayName); // falso

Este problema se puede resolver moviendo el método fuera del constructor como una función global.

 Función persona (nombre, edad, trabajo) {this.name = name; this.age = edad; this.job = trabajo; } función saysname () {alert (this.name); }

Las funciones globales creadas en el mundo global pueden ser llamadas por instancias creadas por persona, lo cual es un poco poco realista; Si el objeto necesita definir un método muy correcto, entonces se deben definir muchas funciones globales, lo que carece de encapsulación.

4. Modo prototipo

Cada función creada en JavaScript tiene una propiedad prototipo, que es un puntero a un objeto, que contiene propiedades y métodos que pueden compartir por todas las instancias de un tipo específico (deje que todas las instancias de objetos compartan sus propiedades y métodos)

 function persona () {} persona.prototype.name = "nicholas"; Persona.prototype.age = 22; Persona.prototype.job = "ingeniero de software"; Persona.prototype.sayname () {alert (this.name); }; VAR Person1 = nueva persona (); persona1.sayname (); //Nicholasalert(person1.sayName == Person2.sayName); // Verdadero

El código anterior hace estas cosas:

Defina una persona constructora. La función de la persona obtiene automáticamente una propiedad prototipo. Esta propiedad solo contiene una propiedad de constructor que apunta a la persona por defecto.

Agregue tres propiedades y un método a través de la persona. Prototipo

Cree una instancia de persona y luego llame al método sayname () en la instancia

Uso de la persona constructor y persona. Prototipo para crear una instancia como ejemplo, para mostrar la relación entre objetos

Uso de la persona constructor y persona. Prototipo para crear una instancia como ejemplo, para mostrar la relación entre objetos

La figura muestra la relación entre el constructor de personas, las propiedades prototipo de la persona y dos casos de persona. Person.prototype señala el objeto prototipo, persona.prototype.constructor señala a persona. Además de contener el atributo del constructor, el objeto prototipo también contiene otras propiedades y métodos agregados más adelante. Las dos instancias de las dos personas Person1 y Person2 contienen una propiedad interna, que solo apunta a la persona. Prototipo.

El proceso de llamada del método sayname ():

Buscando el método logName () en la instancia de Person1, descubrí que no existía tal método, por lo que me remonté al prototipo de persona1

Busque el método sayame () en el prototipo de persona1. Existe este método, por lo que se llama el método

Basado en dicho proceso de búsqueda, podemos evitar que la instancia acceda al atributo del mismo nombre en el prototipo definiendo el atributo del mismo nombre en el prototipo en la instancia. Cabe señalar que hacerlo no eliminará el atributo del mismo nombre en el prototipo, sino que solo evitará que la instancia acceda.

 function persona () {} persona.prototype.name = "nicholas"; Persona.prototype.age = 22; Persona.prototype.job = "ingeniero de software"; Persona.prototype.sayname () {alert (this.name); }; VAR Person1 = nueva persona (); var persona2 = nueva persona (); persona1.name = "Greg" alerta (persona1.name) // Greg proviene de la alerta de instancia (persona2.name) // nicholas proviene del prototipo

Use el operador Eliminar para eliminar completamente las propiedades de instancia

 Eliminar persona1.name; alerta (persona1.name) // nicholas del prototipo

Use el método de iSownProperty () para detectar si existe una propiedad en una instancia o un prototipo

 function persona () {} persona.prototype.name = "nicholas"; Persona.prototype.age = 22; Persona.prototype.job = "ingeniero de software"; Persona.prototype.sayname () {alert (this.name); }; VAR Person1 = nueva persona (); var persona2 = nueva persona (); alerta (persona1, aSownProperty ("name")); // false persona1.name = "greg" alert (persona1.name) // Greg de la instancia alerta (persona1, canownproperty ("name")); // treeLert (persona2.name) // nicholas del prototipo de alerta (persona2, haownpoperty ("nombre"); persona1.name; alerta (persona1.name) // nicholas del prototipo alerta (persona1, canownproperty ("nombre"))); // falso

La siguiente figura muestra la relación entre instancias y prototipos en diferentes situaciones.

Sintaxis prototipo simple

 function persona () {} persona.prototype = {nombre: "nicholas", edad: 22, trabajo: "ingeniero de software", sayname: function () {alert (this.name); }};

En el código anterior, el atributo del constructor ya no apunta a la persona, y el tipo de objeto no se puede determinar a través del constructor. Puede volver al valor apropiado como a continuación

 función persona () {} persona.prototype = {constructor: persona, nombre: "nicholas", edad: 22, trabajo: "ingeniero de software", sayname: function () {alert (this.name); }};

Restablecer la propiedad del constructor hará que su propiedad [[enumerable]] se establezca en verdadera. Por defecto, la propiedad del constructor nativo no es enumerable. Puede usar el método Object.DefineProperty () para cambiarlo.

 Objeto.defineProperty (persona.prototype, "constructor", {enumerable: false, valor: persona});

El proceso de encontrar valores en un prototipo es una búsqueda, y cualquier modificación realizada por el objeto prototipo puede reflejarse inmediatamente desde la instancia.

 var amigo = nuevo persona (); persona.prototype.sayhi = function () {alert ("HI);} amigo, sayhi (); //" HI "(no hay problema)

La instancia de la persona se crea antes de agregar un nuevo método, pero aún tiene acceso al método recién agregado debido a la conexión suelta entre la instancia y el prototipo

La situación después de reescribir el objeto prototipo

 function Person () {} var amigo = new Person (); Persona.prototype = {nombre: "nicholas", edad: 22, trabajo: "ingeniero de software", sayname: function () {alert (this.name); }}; amigo.sayname (); // error

La razón del error al llamar a Friend.sayName () es que el prototipo apuntado por un amigo no contiene atributos que llevan el nombre de este campo, como se muestra en la figura a continuación.

Problema de objetos prototipo

El objeto prototipo omite el proceso de aprobación de los parámetros de inicialización para el constructor, y todas las fuerzas obtienen el mismo valor de atributo de forma predeterminada. El mayor problema con los modelos prototipos es que tienen su naturaleza compartida. Cuando el modelo prototipo contiene atributos de tipo de referencia, el problema es más grave. Echemos un vistazo al siguiente ejemplo.

 function persona () {} persona.prototype = {constructor: persona, nombre: "nicholas", edad: 22, trabajo: "ingeniero de software", amigos: ["shelby", "Court"], sayname: function () {alert (this.name); }}; VAR Person1 = nueva persona (); var persona2 = nueva persona (); persona1.friend.push ("furgoneta"); alerta (persona1.friends); // "Shelby, Court, Van" ALERT (Person.Friends); // "Shelby, Court, Van" Alert (Person1.Friends == Person2.Friends); // Verdadero

5. Combinación del modo de constructor y modo prototipo

En combinación del modo de constructor y el modo prototipo, los constructores se utilizan para definir las propiedades de instancia, y los modelos prototipo se utilizan para definir métodos y propiedades compartidas. De esta manera, cada instancia tendrá su propia copia de los atributos de instancia y también puede compartir referencias a los métodos, guardando la memoria en la medida máxima.

 Función persona (nombre, edad, trabajo) {this.name = name; this.age = edad; this.job = trabajo; this.friends = ["Shelby", "Court"];} Person.prototype = {constructor: persona, sayname: function () {alert (this.name); }} var persona1 = nueva persona ("nicholas", 22, "ingeniero de software"); var persona2 = nueva persona ("greg", 24, "estudiante"); persona1.friend.push ("van"); alerta (persona1.friends); // "Shelby, Court, Van" ALERT (Person.Friends); // "Shelby, Court" ALERT (Person1.Friends == Person2.Friends); // False alerta (persona1.sayname == Person2.sayname); // True

6. Modo de prototipo dinámico

El modo dinámico prototipo encapsula toda la información requerida en el constructor y utiliza la instrucción IF para determinar si existe una determinada propiedad en el prototipo. Si no existe (cuando se solicite al constructor por primera vez), ejecute el código de inicialización del prototipo dentro de la instrucción IF.

 Función Persona (nombre, edad) {this.name = name; this.age = edad; this.job = Job; // Método if (typeof this.sayname! = 'function') {persona.prototype.sayname = function () {alert (this.name); }; }} var amigo = nueva persona ('nicholas', '22', 'ingeniero de software'); // se llamó al constructor por primera vez, y el prototipo se modificó en este momento var persona2 = nueva persona ('amy', '21'); // El método SayName () ya existe y el prototipo no se modificará de nuevo

Lectura recomendada:

Varias formas comunes de crear objetos en JS orientados a objetos (modo de fábrica, modo de constructor, modo prototipo)

Lo anterior es el patrón de crear objetos en JavaScript presentados por el editor. ¡Espero que sea útil para todos!