Conceptos básicos de AJAX: implementación de clases en JavaScript En JavaScript, puede usar la palabra clave function para definir una "clase" y cómo agregar miembros a la clase. Las variables o métodos a los que se hace referencia a través de este puntero dentro de una función se convertirán en miembros de la clase. Por ejemplo:
El siguiente es un fragmento de código:
function class1(){.
vars="abc";
esto.p1=s;
this.method1=función(){
alert("este es un método de prueba");
}
}
var obj1=nueva clase1();
Obtenga el objeto obj1 a través de la nueva clase1 (), y el objeto obj1 obtiene automáticamente el atributo p1 y el método método1.
En JavaScript, la definición de función en sí es el constructor de una clase. Combinando las propiedades de los objetos introducidos anteriormente y el uso del operador nuevo, a continuación se describe el proceso de creación de objetos usando nuevo.
(1) Cuando el intérprete encuentra el nuevo operador, crea un objeto vacío;
(2) Comienza a ejecutar la función class1 y apunta el puntero this al objeto recién creado;
(3) Porque cuando el objeto no existe; Al asignar un valor a un atributo, el intérprete creará el atributo para el objeto. Por ejemplo, en clase1, cuando se ejecute la declaración this.p1=s, se agregará un atributo p1 y se obtendrá el valor de la variable s. asignado, de modo que la ejecución de la función es el proceso de inicializar este objeto, es decir, realizar el papel del constructor
(4) Cuando se ejecuta la función, el nuevo operador devuelve el objeto inicializado;
A lo largo de todo este proceso, el mecanismo básico orientado a objetos se implementa en JavaScript. Se puede ver que en JavaScript, la definición de función es en realidad implementar el constructor de un objeto, que se completa mediante funciones. Las desventajas de este método son:
· Al juntar todas las declaraciones de inicialización y definiciones de miembros, la lógica del código no es lo suficientemente clara y es difícil implementar funciones complejas.
·Cada vez que se crea una instancia de una clase, el constructor debe ejecutarse una vez. Las propiedades y métodos definidos en el constructor siempre se crean repetidamente. Por ejemplo:
el siguiente es un fragmento de código:
this.method1=function(){.
alert("este es un método de prueba");
}
Cada vez que el método1 aquí crea una instancia de clase1, se creará una vez, lo que provocará un desperdicio de memoria. La siguiente sección presenta otro mecanismo de definición de clases: el objeto prototipo, que puede resolver las deficiencias causadas por la definición de miembros de la clase en el constructor.
Usar objetos prototipo para definir miembros de clases
La sección anterior presentó el mecanismo de implementación de clases y la implementación de constructores. Ahora presentamos otro mecanismo para agregar miembros a clases: objetos prototipo. Cuando se crea una función, los miembros del objeto se asignarán automáticamente al objeto creado. Por ejemplo:
El siguiente es un fragmento de código:
<script idioma="JavaScript" tipo="texto/javascript">
<!--
//Definir una función de clase class1(){ con un solo atributo prop
this.prop=1;
}
//Utiliza el atributo prototipo de la función para definir nuevos miembros para la clase class1.prototype.showProp=function(){
alerta (este.prop);
}
//Crea una instancia de clase1 var obj1=new class1();
// Llame al método showProp definido a través del objeto prototipo prototipo obj1.showProp();
//-->
</script>
Un prototipo es un objeto JavaScript que puede agregar, modificar y eliminar métodos y propiedades al objeto prototipo. Esto agrega definiciones de miembros a una clase.
Ahora que entendemos el objeto prototipo de la función, veamos el proceso de ejecución de new.
(1) Cree un nuevo objeto y deje que este puntero apunte a él;
(2) Asigne todos los miembros del objeto prototipo de la función a este nuevo objeto;
(3) Ejecute el cuerpo de la función e inicialice el objeto
(4)
;creado en (1).
En comparación con el proceso de ejecución de lo nuevo introducido en la sección anterior, existe un proceso adicional de utilizar el prototipo para inicializar el objeto. Esto también es coherente con el significado literal de prototipo, que es el prototipo de la instancia de la clase correspondiente. Este proceso de inicialización ocurre antes de que se ejecute el cuerpo de la función (constructor), por lo que las propiedades y métodos definidos en el prototipo se pueden llamar dentro del cuerpo de la función. Por ejemplo:
El siguiente es un fragmento de código:
<script idioma="JavaScript" tipo="texto/javascript">
<!--
//Definir una clase con un solo atributo prop
función clase1(){
this.prop=1;
this.showProp();
}
//Utiliza el atributo prototipo de la función para definir nuevos miembros para la clase
clase1.prototype.showProp=función(){
alerta (este.prop);
}
//Crea una instancia de clase1
var obj1=nueva clase1();
//-->
</script>
En comparación con el código anterior, aquí el método showProp definido en el prototipo se llama dentro de la clase1, de modo que aparece un cuadro de diálogo durante el proceso de construcción del objeto, que muestra que el valor del atributo prop es 1.
Cabe señalar que la definición del objeto prototipo debe estar antes de la declaración que crea la instancia de clase; de lo contrario, no funcionará. Por ejemplo:
el siguiente es un fragmento de código:
<script idioma="JavaScript" tipo="texto/javascript">
<!--
//Definir una clase con un solo atributo prop
función clase1(){
this.prop=1;
this.showProp();
}
//Crea una instancia de clase1
var obj1=nueva clase1();
//Utiliza el atributo prototipo de la función para definir nuevos miembros para la clase después de la declaración que crea la instancia. Esto sólo será efectivo para los objetos creados más tarde.
clase1.prototype.showProp=función(){
alerta (este.prop);
}
//-->
</script>
Este código generará un error de tiempo de ejecución, indicando que el objeto de visualización no tiene un método showProp porque el método se define después de la declaración que crea una instancia de una clase.
Se puede ver que el objeto prototipo está dedicado a los miembros de la clase de diseño. Además, el prototipo también tiene un atributo importante: el constructor, que representa una referencia al constructor
. El siguiente es el fragmento de código:
función clase1(){
alerta(1);
}
class1.prototype.constructor(); //Llamar al constructor de la clase
Después de ejecutar este código, aparecerá un cuadro de diálogo con el texto "1". Esto muestra que un prototipo está estrechamente relacionado con la definición de una clase. En realidad: class1.prototype.constructor===class1.
Un patrón de diseño para clases de JavaScript
Ya hemos introducido cómo definir una clase y cómo inicializar una instancia de una clase. La clase puede agregar miembros al cuerpo de la función definida por la función y también puede usar un prototipo para definir miembros de la clase. El código de programación parece confuso. ¿Cómo definir clases de forma clara? A continuación se proporciona un patrón de implementación para una clase.
En JavaScript, debido a la naturaleza flexible de los objetos, también se pueden agregar miembros a la clase en el constructor, lo que no solo aumenta la flexibilidad, sino que también aumenta la complejidad del código. Para mejorar la legibilidad y la eficiencia del desarrollo del código, puede usar esta forma de definir miembros y usar el objeto prototipo en su lugar. De esta manera, la definición de función es el constructor de la clase, que está en línea con la implementación. de la clase tradicional: el nombre de la clase y el nombre del constructor son iguales. Por ejemplo:
aquí está el fragmento de código:
función clase1(){
//Constructor
}
//Definición de miembro
class1.prototype.someProperty="muestra";
class1.prototype.someMethod=función(){
//Código de implementación del método
}
Aunque el código anterior ha hecho que la definición de clase sea mucho más clara, cada vez que se define una propiedad o método, se debe usar class1.prototype. No solo el tamaño del código aumenta, sino que la legibilidad no es suficiente. Para mejorar aún más, puede utilizar el constructor de un objeto sin tipo para especificar el objeto prototipo para implementar la definición de miembro de la clase:
El siguiente es un fragmento de código:
//Definir una clase clase1
función clase1(){
//Constructor
}
// Realiza la definición de miembro de la clase especificando el objeto prototipo
clase1.prototipo={
algunaPropiedad:"muestra", algúnMetodo:función(){
//código del método
},
...//Otras propiedades y métodos.
}
El código anterior define la clase1 de una manera muy clara. El constructor se implementa directamente con el nombre de la clase y los miembros se definen utilizando objetos sin tipo. Todas las propiedades y métodos se implementan en una lista y se pueden inicializar al mismo tiempo. definido.El valor del atributo. Esto también se parece más a la implementación de clases en lenguajes tradicionales orientados a objetos. Es solo que las definiciones del constructor y de los miembros de la clase se dividen en dos partes. Esto puede considerarse como un patrón fijo para definir clases en JavaScript, lo que hará que sea más fácil de entender al usarlo.
Nota: Las referencias entre miembros de una clase deben realizarse a través de este puntero. Por ejemplo, en el método someMethod del ejemplo anterior, si desea utilizar el atributo someProperty, debe pasar el formato this.someProperty, porque en JavaScript cada uno. La propiedad y los métodos son independientes, están conectados a un objeto a través de este puntero.