Explicación detallada de seis formas de definir clases de JS

En el desarrollo delantero, a menudo es necesario definir las clases JS. Entonces, en JavaScript, hay varias formas de definir clases y cuáles son las diferencias? Este artículo explica las siguientes seis formas de definir las clases JS (descripción del caso):

1. Método de fábrica

 function car () {var oCar = new Object; Ocar.Color = "Blue"; Ocar.Doors = 4; Ocar.ShowColor = function () {document.write (this.color)}; return Ocar;} var car1 = car (); var car2 = car ();

Cuando se llama a esta función, se crea un nuevo objeto y se asignan todas las propiedades y métodos. Use esta función para crear 2 objetos con exactamente las mismas propiedades.

Por supuesto, puede modificar este método pasando los parámetros.

 function car (color, door) {var oCar = new Object; Ocar.Color = Color; Ocar.Doors = Door; Ocar.ShowColor = function () {document.write (this.color)}; return Ocar;} var car1 = Car ("rojo", 4); var car2 = Car ("azul", 4); car1.showcolor () // Salida: "Red" Car2.ShowColor () // Salida: "Azul"

Ahora puede obtener objetos con diferentes valores pasando diferentes parámetros a la función.

En el ejemplo anterior, cada vez que se llama la función Car (), showColor () se crea, lo que significa que cada objeto tiene su propio método showcolor ().

Pero, de hecho, cada objeto comparte la misma función. Aunque un método se puede definir fuera de la función, luego señalando las propiedades de la función al método.

 función showColor () {alert (this.color);} function car () {var ocar = new Object (); Ocar.Color = Color; Ocar.doors = Door; Ocar.showColor = showColor; return Ocar;}

Pero esto no parece un método de función.

2. Método del constructor

El método del constructor es tan simple como el método de fábrica, como se muestra a continuación:

 function car (color, puerta) {this.color = color; this.doors = door; this.showColor = function () {alert (this.color)};} var car1 = nuevo automóvil ("rojo", 4); var car2 = nuevo automóvil ("azul", 4);

Puede ver que el método del constructor no crea objetos dentro de la función, y la palabra clave se utiliza. Porque se ha creado un objeto al llamar al constructor, y esto solo se puede usar para acceder a las propiedades del objeto dentro de la función.

Ahora use nuevo para crear objetos, ¡se ve así! Pero es lo mismo que la fábrica. Cada llamada crea su propio método para el objeto.

3. Método prototipo

Este método aprovecha el atributo prototipo del objeto. Primero, cree el nombre de clase con una función vacía, y luego todos los atributos y métodos se asignan al atributo prototipo.

 function car () {} car.prototype.color = "rojo"; car.prototype.doors = 4; car.prototype.showcolor = function () {alert (this.color);} var car1 = new Car (); var car2 = new Car ();

En este código, primero se define una función vacía, y luego las propiedades del objeto se definen a través del atributo prototipo. Cuando se llama a esta función, todas las propiedades del prototipo se asignarán al objeto que se creará de inmediato. Todos los objetos en esta función almacenan punteros para showcolor (), que sin sintácticamente parece pertenecer al mismo objeto.

Sin embargo, esta función no tiene parámetros, y el atributo no se puede inicializar mediante parámetros de aprobación. El valor predeterminado del atributo debe cambiarse después de crear el objeto.

Un problema muy grave con el método prototipo es que cuando el atributo apunta a un objeto, como una matriz.

 function car () {} car.prototype.color = "rojo"; car.protype.doors = 4; car.prototype.arr = new array ("a", "b"); car.protype.showcolor = function () {alerta (this.color);} var car1 = new Car (); VAR CAR2 = newe2 = newer Car (); car1.arr.push ("cc"); alerta (car1.arr); //output:aa,bb,cclert(car2.arr); // Salida: AA, BB, CC

Aquí, debido al valor de referencia de la matriz, ambos objetos del automóvil apuntan a la misma matriz, por lo que cuando el valor se agrega en CAR1, también puede verlo en CAR2.

Union es un método que puede crear objetos como otros lenguajes de programación utilizando constructor/prototipo. Es un método que utiliza constructores para definir propiedades no funcionales de los objetos y utiliza prototipos para definir objetos.

 Función Car (color, puerta) {this.color = color; this.doors = door; this.arr = new Array ("aa", "bb");} car.prototype.showcolor () {alert (this.color);} var car1 = nuevo automóvil ("rojo", 4); var car2 = new Coche ("azul", 4); car1.arr.push ("cc"); alerta (car1.arr); //output:aa,bb,ccalert(car2.arr); // Salida: AA, BB

5. Método de prototipo dinámico

El método de prototipo dinámico es similar al método de constructor/prototipo mixto. La única diferencia es la posición dada al método del objeto.

 function car (color, door) {this.color = color; this.doors = door; this.arr = new Array ("aa", "bb"); if (typeof car._initialized == "indefinido") {car.prototype.showcolor = function () {alerta (this.color);}; car._initialized = true;}}}

El método de prototipo dinámico es usar un indicador para determinar si al prototipo se le ha asignado un método. Esto asegura que el método se cree solo una vez

6. Método de fábrica mixta

Su maestro de propósito crea un constructor falso que devuelve solo nuevas instancias de otro objeto.

 function car () {var oCar = new Object (); Ocar.Color = "Red"; Ocar.Doors = 4; Ocar.ShowColor = Function () {Alert (this.color)}; return Ocar;}

A diferencia del método de fábrica, este método utiliza el nuevo operador.

Los anteriores son todos los métodos para crear objetos. El método más utilizado es el método híbrido constructor/prototipo, y el método de prototipo dinámico también es muy popular. Funcionalmente equivalente al método constructor/prototipo.

La explicación detallada anterior de las seis formas de definir las clases JS es todo el contenido que comparto con ustedes. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.