Hace casi 20 años, cuando nació JavaScript, era solo un lenguaje de secuencias de comandos web simple. Si olvida completar su nombre de usuario, aparecerá una advertencia.
Hoy en día, se ha vuelto casi omnipotente, con todo tipo de usos increíbles desde la parte delantera hasta la parte trasera. Los programadores lo usan para completar proyectos cada vez más grandes.
La complejidad del código JavaScript también ha aumentado considerablemente. Una sola página web contiene 10,000 líneas de código JavaScript, que durante mucho tiempo ha sido común. ¡En 2010, un ingeniero reveló que la longitud del código de Gmail es de 443,000 líneas!
Para escribir y mantener un código tan complejo, se deben utilizar estrategias modulares. En la actualidad, el enfoque convencional en la industria es adoptar la "programación orientada a objetos". Por lo tanto, cómo JavaScript implementa la programación orientada a objetos se ha convertido en un tema candente.
El problema es que la sintaxis de Javascipt no admite "clase" (clase), lo que hace que los métodos de programación tradicionales orientados a objetos sean imposibles de usar directamente. Los programadores han realizado muchas exploraciones para estudiar cómo simular "clases" con JavaScript. Este artículo resume tres métodos de definición de "clases" de JavaScript, analiza las características de cada método y enfatiza el mejor método en mis ojos.
==================================================================
Tres formas de definir una clase en JavaScript
En la programación orientada a objetos, una clase es una plantilla para un objeto que define las propiedades y métodos compartidos por el mismo grupo de objetos (también conocido como "instancias".
El idioma JavaScript no admite "clases", pero algunas soluciones se pueden usar para simular "clases".
1. Método del constructor
Este es un método clásico y un método imprescindible en los libros de texto. Utiliza un constructor para simular "clase" y utiliza esta palabra clave para referirse al objeto de instancia dentro de él.
La copia del código es la siguiente:
function cat () {
this.name = "Big Hair";
}
Al generar una instancia, use la nueva palabra clave.
La copia del código es la siguiente:
var cat1 = new Cat ();
alerta (Cat1.name); // cabello grande
Las propiedades y métodos de la clase también se pueden definir en el objeto prototipo del constructor.
La copia del código es la siguiente:
Cat.prototype.makesound = function () {
alerta ("maulgno");
}
Para obtener una introducción detallada a este método, consulte la serie de artículos que escribí: "Programación orientada a objetos de JavaScript", no hablaré de eso aquí. Su principal desventaja es que es relativamente complejo y usa esto y prototipo, lo cual es muy laborioso de escribir y leer.
2. Método Object.Create ()
Para resolver las deficiencias del "método del constructor" y generar objetos más convenientemente, la quinta edición de ECMAScript, el estándar internacional de JavaScript (la tercera edición está actualmente disponible), propuso un nuevo método objeto.create ().
Usando este método, una "clase" es un objeto, no una función.
La copia del código es la siguiente:
var cat = {
Nombre: "Big Hair",
kekeound: function () {alert ("meow meow"); }
};
Luego, use Object.Create () directamente para generar una instancia sin usar nuevo.
La copia del código es la siguiente:
var cat1 = object.create (cat);
alerta (Cat1.name); // cabello grande
Cat1.Makesound (); // miau meow meow
Actualmente, las últimas versiones de los principales navegadores (incluido IE9) han implementado este método. Si se encuentra con un navegador antiguo, puede usar el siguiente código para implementarlo usted mismo.
La copia del código es la siguiente:
if (! object.create) {
Object.create = function (o) {
función f () {}
F.Prototype = O;
devolver nuevo f ();
};
}
Este método es más simple que el "método de constructor", pero no puede implementar atributos privados y métodos privados, y los datos no pueden compartirse entre los objetos de instancia, por lo que la simulación de "clases" no es lo suficientemente integral.
3. Ley minimalista
El programador holandés Gabor de Mooij propuso un nuevo enfoque que era mejor que Object.Create (), que llamó "enfoque minimalista". Este es también el método que recomiendo.
3.1 Embalaje
Este método no utiliza esto y el prototipo, y el código es muy simple de implementar, por lo que probablemente se llama "ley minimalista".
En primer lugar, también usa un objeto para simular "clase". En esta clase, defina un constructor createNew () para generar una instancia.
La copia del código es la siguiente:
var cat = {
createenew: function () {
// algún código aquí
}
};
Luego, en Createenew (), defina un objeto de instancia y use este objeto de instancia como el valor de retorno.
La copia del código es la siguiente:
var cat = {
createenew: function () {
var cat = {};
Cat.name = "Big Hair";
cat.makesound = function () {alerta ("meow meow"); };
gato de regreso;
}
};
Cuando lo use, llame al método createenew () para obtener el objeto de instancia.
La copia del código es la siguiente:
var cat1 = cat.createNew ();
Cat1.Makesound (); // miau meow meow
La ventaja de este enfoque es que es fácil de entender, tiene una estructura clara y elegante, y está en línea con la construcción tradicional de "programación orientada a objetos", por lo que las siguientes características pueden implementarse fácilmente.
3.2 Herencia
Es muy conveniente implementar una clase en la siguiente clase. Simplemente llame al método createenew () del último en el método createenew ().
Primero defina una clase de animales.
La copia del código es la siguiente:
var animal = {
createenew: function () {
var animal = {};
animal.sleep = function () {alerta ("dormir en"); };
animal de regreso;
}
};
Luego, en el método de createnew () de CAT, se llama al método createnew () de animal.
La copia del código es la siguiente:
var cat = {
createenew: function () {
var cat = animal.createNew ();
Cat.name = "Big Hair";
cat.makesound = function () {alerta ("meow meow"); };
gato de regreso;
}
};
La instancia de gato obtenida de esta manera heredará tanto la clase CAT como la clase de animales.
La copia del código es la siguiente:
var cat1 = cat.createNew ();
Cat1.sleep (); // dormir en
3.3 Atributos privados y métodos privados
En el método createenew (), siempre que los métodos y propiedades que no se definan en el objeto CAT son privados.
La copia del código es la siguiente:
var cat = {
createenew: function () {
var cat = {};
var sound = "meow meow";
cat.makesound = function () {alerta (sonido); };
gato de regreso;
}
};
El sonido de la variable interna en el ejemplo anterior no se puede leer externamente, y solo se puede leer a través del método público de CAT Makeound ().
La copia del código es la siguiente:
var cat1 = cat.createNew ();
alerta (Cat1.Sound); // indefinido
3.4 intercambio de datos
A veces, necesitamos todos los objetos de instancias para poder leer y escribir los mismos datos internos. En este momento, simplemente encapsule estos datos internos dentro del objeto de clase y fuera del método createenew ().
La copia del código es la siguiente:
var cat = {
Sound: "Meow Meow Meow",
createenew: function () {
var cat = {};
cat.makesound = function () {alert (cat.sound); };
cat.changesound = function (x) {cat.Sound = x; };
gato de regreso;
}
};
Luego, se generan dos objetos de instancia:
La copia del código es la siguiente:
var cat1 = cat.createNew ();
var cat2 = cat.createNew ();
Cat1.Makesound (); // miau meow meow
En este momento, si hay un objeto de instancia y los datos compartidos se modifican, el otro objeto de instancia también se verá afectado.
La copia del código es la siguiente:
Cat2.Changesound ("Lalala");
Cat1.Makesound (); // lalala
(encima)