Explicación básica orientada a objetos JS (modo de fábrica, modo de constructor, modo prototipo, modo mixto, modo prototipo dinámico)

¿Qué está orientado a los objetos? ¡Orientado a objetos es una especie de pensamiento! (disparates).

Orientado a objetos puede tratar todos los módulos clave en un programa como objetos, y los módulos tienen atributos y métodos. De esta manera, si encapsulamos algunas propiedades y métodos, será muy conveniente de usar en el futuro y también puede evitar el trabajo tedioso y repetitivo. A continuación, explicaremos la implementación orientada a objetos en JS.

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, y dado que las clases no se pueden crear en ECMAScript, los objetos se crean con encapsulación de funciones. El método de implementación es muy simple, es decir, crear un objeto en la función, asignar atributos y métodos al objeto y luego devolver el objeto.

 función createBlog (name, url) {var o = new Object (); o.name = nombre; O.URL = url; o.sayurl = function () {alert (this.url); } return o;} var blog1 = createBlog ('wuyuchang', '//www.vevb.com/');

Se puede ver que el método de implementación del patrón de fábrica es muy simple, resolver el problema de crear múltiples objetos similares, pero el patrón de fábrica no puede identificar el tipo de objeto porque es todo objeto, a diferencia de la fecha, la matriz, etc., por lo que aparece el patrón de constructor.

Modo de constructor

El constructor en ECMAScript puede crear objetos de tipos específicos, similares a los objetos JS nativos, como la matriz y la fecha. El método de implementación es el siguiente:

 Blog de funciones (nombre, url) {this.name = name; this.url = url; this.alerturl = function () {alert (this.url); }} var blog = nuevo blog ('wuyuchang', '//www.vevb.com/');console.log(blog instanciaf blog); // Verdadero, determine si el blog es una instancia de blog, es decir, resuelve el problema que el modo de fábrica no puede ser

Este ejemplo es diferente del modelo de fábrica, excepto por el nombre de la función, los zapatos cuidadosos de los niños deberían encontrar muchas diferencias:

La primera letra del nombre de la función está en mayúscula (aunque el estándar no estipula estrictamente que la primera letra esté en mayúscula, según la Convención, la primera letra del constructor está en mayúscula.

Crear objeto no se muestra

Asigne atributos y métodos directamente a este objeto

Sin declaración de devolución

Crear un objeto usando nuevo

Ser capaz de reconocer objetos (aquí es donde los patrones de constructor superan los patrones de fábrica)

Aunque los constructores son fáciles de usar, no están exentos de desventajas. El mayor problema con el uso de constructores es que tienen que recrear el método cada vez que crean una instancia (teóricamente, las propiedades del objeto son diferentes cada vez que crean un objeto, y los métodos del objeto son los mismos). Sin embargo, no es necesario crear exactamente el mismo método dos veces, por lo que podemos mover la función fuera del objeto (¡tal vez los zapatos de algunos niños hayan visto las desventajas, shhhh!).

 Blog de funciones (nombre, url) {this.name = name; this.url = url; this.alerturl = alertUrl;} function alertUrl () {alert (this.url);} var blog = nuevo blog ('scjb51', 'http://sc.vevb.com/'), blog2 = nuevo blog ('jb51', '//www.vevb.com/'); blog.alerturl ();; // http://sc.vevb.com/blog2.alerturl (); // //www.vevb.com/

Establecemos alerta en una función global, de modo que Blog y Blog2 accedan a la misma función, pero el problema vuelve a aparecer. Una función que en realidad solo quiere que el blog use se define en el alcance global, que muestra que el alcance global es algo digno de su nombre. Lo que es aún más inaceptable es que muchos métodos se definen en el alcance global que solo son utilizados por objetos específicos. No solo se desperdicia espacio, obviamente pierde la encapsulación orientada al objeto, por lo que este problema se puede resolver a través de los prototipos.

Modo prototipo

Cada función que creamos tiene un atributo prototipo, que es un puntero a un objeto, y el propósito de este objeto es contener propiedades y métodos que pueden compartir por todas las instancias de un tipo específico. La ventaja de usar objetos prototipo es que todas las instancias de objetos pueden compartir las propiedades y métodos que contiene.

 función blog () {} blog.prototype.name = 'wuyuchang'; blog.prototype.url = 'http://tools.vevb.com/';blog.prototype.friend = [' fr1 ',' fr2 ',' fr3 ',' fr4 ']; blog.prototype.alertinfo = function () this.friend);} // El siguiente es el código de prueba var blog = nuevo blog (), blog2 = nuevo blog (); blog.alertinfo (); // wuyuchanghttp: //tools.vevb.com/fr1,fr2,fr3,fr4blog2.alertinfo (); // wuyuchanghttp: //tools.vevb.com/fr1,fr2,fr3,fr4blog.name = 'wyc1'; blog.url = 'http: //***.com'; blog.friend.pop (); blog2.name = 'wyc2'; blog2.url = 'http: //++++'.com'; // wyc1http: //***.comfr1,fr2,fr3blog2.alertinfo (); // wyc2http: //++.comfr1,fr2,fr3

El patrón prototipo no está exento de deficiencias. En primer lugar, omite el enlace de los parámetros de inicialización de aprobación del constructor. Como resultado, todas las instancias obtienen el mismo valor de atributo por defecto, lo cual es muy inconveniente, pero este no es el mayor problema del prototipo. El mayor problema con el patrón prototipo es causado por la naturaleza del intercambio. Debido al intercambio, una instancia modifica la referencia, y la otra también cambia la referencia. Por lo tanto, generalmente no usamos prototipos solos, sino que combinamos patrones de prototipos con patrones de constructor.

Modo mixto (modo prototipo + modo constructor)

 Blog de funciones (nombre, url, amigo) {this.name = name; this.url = url; this.friend = amigo;} blog.prototype.alertinfo = function () {alerta (this.name + this.url + this.friend);} var blog = nuevo blog ('wuyuchang', 'http://tools.vevb.com/', ['FR1', 'fr2', 'fr3']), blog2 = nuevo blog ('wyc',, ',',, 'http: //**.com', ['a', 'b']); blog.friend.pop (); blog.alertinfo (); // wuyuchanghttp: //tools.vevb.com/fr1,fr2blog2.alertinfo (); // wychttp: //**.coma,B

En el modo híbrido, el modo de constructor se usa para definir los atributos de instancia, mientras que el modo prototipo se usa para definir métodos y atributos compartidos. Cada instancia tendrá su propio atributo de instancia, pero al mismo tiempo comparte métodos, guardando la memoria en la medida máxima. Además, este modo también admite pasar los parámetros iniciales. Muchas ventajas. Este patrón es el método más utilizado y más reconocido para crear objetos personalizados en ECMAScript.

Modo prototipo dinámico

El modo prototipo dinámico encapsula toda la información en el constructor, y al inicializar el prototipo en el constructor (solo el prototipo se inicializa cuando se instancia el primer objeto), esto le permite elegir si el prototipo debe inicializarse juzgando si el método es válido.

 Blog de funciones (nombre, url) {this.name = name; this.url = url; if (typeof this.alertinfo! = 'function') {// Este código solo se ejecuta una vez alerta ('Exe Time'); Blog.prototype.alertinfo = function () {alert (thia.name + this.url); }}} var blog = nuevo blog ('wuyuchang', 'http://tools.vevb.com'), blog2 = nuevo blog ('wyc', 'http: ***. com');

Puede ver que en el ejemplo anterior, la ventana aparece una vez, 'Exe Time', es decir, cuando se inicializa el blog, Blog2 no necesita inicializar el prototipo. Para crear objetos que usan este patrón, puede considerarse perfecto.

Esta publicación de blog se refiere a la tercera edición de "JavaScript Advanced Programming", pero el lenguaje se ha simplificado y los ejemplos han sido reescritos. Si tiene alguna pregunta, deje un mensaje y respuesta, y el autor actualizará el blog.