Tutorial clásico sobre características avanzadas de la programación orientada a objetos de JavaScript (digna de colección)

Este artículo describe las características avanzadas de la programación orientada a objetos en JavaScript. Compártelo para su referencia, como sigue:

1. Tres formas de crear objetos:

El primer método de construcción: nuevo objeto

 var a = nuevo objeto (); ax = 1, ay = 2;

El segundo método de construcción: medición directa de objetos

 var b = {x: 1, y: 2};

El tercer método de construcción: definir tipo

 punto de función (x, y) {this.x = x; this.y = y;} var p = nuevo punto (1,2);

2. Acceda al objeto

Acceder a las propiedades del objeto

Notación del soporte: Hero ['Nombre']. ,

Notación de puntos: hero.name.

Si la propiedad a la que se accede no existe, se devolverá Undefined.

Métodos para acceder a objetos

Agregue un par de soportes después del nombre del método: Hero.say ().

Un método de acceso como el atributo de acceso: héroe ['say'] ().

3. Eliminar atributos y métodos

 // Crear un objeto vacío var hero = {}; // Agregar atributos y métodos a hero.name = "javascript"; hero.value = "helloworld"; hero.sayname = function () {return "hello" + hero.name;}; // prueba alerta (hero.name); // emitir javascriptalert (hero.sayname ()); // Salida Hola JavaScript // Eliminar el atributo de nombre de Hero Object Eliminar hero.name; // Test Alert (Hero.SayName ()); // Salida hola indefinida

4. Use este valor

 // Crear un objeto vacío var hero = {}; // Agregar atributos y métodos a hero heros.name = "javascript"; hero.value = "helloworld"; hero.sayname = function () {return "hello" + this.name;}; // prueba alerta (hero.name); // emitir javaScriptTalet (hero.sayname ()); // Salida Hola JavaScript

Resumir:

① Esto aquí en realidad se refiere a "este objeto" o "objeto actual".

② El uso de esto es un problema para la mayoría de las personas. ¡Por lo tanto, no se recomienda usar demasiado!

5. Objetos incorporados

Los objetos incorporados se pueden dividir aproximadamente en tres grupos:

① Objetos de clase de encapsulación de datos: incluido objeto, matriz, booleano, número y cadena. Estos objetos representan diferentes tipos de datos en JavaScript, y todos tienen sus propios valores de retorno de tipo de tipo de typing, así como estados indefinidos y nulos.

② Objetos de clase de herramientas: incluidos los objetos utilizados para proporcionar transversales, como matemáticas, fecha, regexp, etc.

③ Objetos de clase de error: incluidos los objetos de error generales y varios otros objetos de clase de error más especiales. Pueden ayudarnos a corregir el estado de trabajo del programa cuando ocurren ciertas excepciones.

6 objeto de objeto

El objeto es el objeto principal de todos los objetos en JavaScript, lo que significa que todos los objetos se heredan del objeto objeto.

Crea un objeto vacío:

 var objeto = {}; var obj = new Object ();

7.

Los objetos de matriz se utilizan para almacenar múltiples valores en una sola variable.

Crea un objeto de matriz vacío:

 var objeto = {}; var obj = new Array ();

Por ejemplo 1:

 // Invertir ejemplo de cadena // Defina una cadena var str = "a, b, c, d, e, f, g"; // use el método Split () del objeto de cadena para cortar la cadena en una matriz var arr = str.split (","); // use el método reverse () del objeto de matriz para revertir el orden de los elementos en la matriz. arr = arr.reverse (); // Test imprima alerta (arr.ToString ());

8. Objeto de hojas

Diferencias entre objetos de cadena y tipos de cadenas básicas:

 var str = "hello"; var obj = new String ("World"); alerta (typeof str); // typeOf stringalert (typeOf obj); // objeto typyof

Por ejemplo 1:

 // Ejemplo de determinar si una cadena contiene una cadena especificada // Definir dos cadenas a juzgar var str = "abcdefg"; var substr = "efg";/** Definir la función para juzgar si una cadena contiene una cadena especificada * * Primer parámetro: la cadena a ser juzgada * * Segundo parámetro: la cadena de la cadena a juzgada: la cadena a juzgar String (str); // intercepta la cadena juzgada var de resultado = string.substr (str.indexof (substr), substr.length);/** Determine si la cadena interceptada está vacía * * está vacía, indicando que la cadena especificada no contiene la cadena especificada * * no vacía, lo que indica que la cadena especificada */if (resultado == substr) {return verdadero;} el más {retorno de retorno { falso;}} alert (sub (str, substr));

9. Prototipo

La función en sí también es un objeto que contiene métodos y propiedades. Ahora lo que queremos estudiar es otra propiedad del objeto de función: prototipo.

Agregar métodos y propiedades utilizando prototipos

Reescribir las propiedades del prototipo utilizando sus propias propiedades

Extender los objetos incorporados

Agregar métodos y propiedades utilizando prototipos

A continuación es crear un nuevo objeto de función y establecer algunas propiedades y métodos:

 function hero (nombre, color) {this.name = name; this.color = color; this.whatareYou = function () {return "Soy un" + this.color + "" + this.name; }} var hero = new Hero ("javaScript", "rojo"); alerta (hero.whatareyou ()); // Salida Soy un JavaScript rojo

Agregue algunas propiedades y métodos al objeto de la función de héroe anterior:

 Hero.prototype.price = 100; hero.prototype.rating = 3; hero.prototype.getInfo = function () {return "calificación:" + this.rating + ", precio:" + this.price;} alert (hero.getinfo ()); // Calificación de salida: 3, precio: 100

El método anterior también se puede hacer así:

 Hero.prototype = {precio: 100, calificación: 3, getInfo: function () {return "calificación:" + this.ating + ", precio:" + this.price; }};

Reescribir las propiedades del prototipo utilizando sus propias propiedades

¿Qué debo hacer si los propios atributos del objeto son los mismos que el atributo prototipo? La respuesta es que los propios atributos del objeto tienen una prioridad más alta que los atributos del prototipo.

 function hero () {this.name = "jscript";} hero.prototype.name = "javascript"; var hero = new Hero (); alert (hero.name); // emitir jscriptDelete hero.name; alerta (hero.name); // Salida JavaScript

Extender los objetos incorporados

 // Agregue una función para juzgar por la matriz de objetos prototipo de matriz.prototype.inArray = function (color) {for (var i = 0, len = this.length; i <len; i ++) {if (this [i] === color) {return true; }} return false;} // Definir un objeto de matriz var a = ["rojo", "verde", "azul"]; // test alerta (a.inarray ("rojo")); //truealert(a.inArray("yellow ")); //FALSO

10. Herencia

Si ambas clases son del mismo tipo de instancia, entonces hay algunas relaciones entre ellas. Llamamos a la relación generalizada entre los tipos de la misma instancia "herencia".

La relación de herencia contiene al menos tres significados:

① Las instancias de subclases pueden compartir métodos de clases de padres.

② Las subclases pueden anular los métodos de la clase principal o extender nuevos métodos.

③ Las subclases y las clases de padres son "tipos" de instancias de subclase.

En JavaScript, "herencia" no es compatible. Es decir, no hay una sintaxis heredada en JavaScript. En este sentido, JavaScript no es un lenguaje directo orientado a objetos.

11. Cadena prototipo

La cadena prototipo es el método de herencia predeterminado formulado por el estándar ECMAScript.

Por ejemplo:

 función a () {this.name = "a"; this.ToString = function () {return this.name};} function b () {this.name = "b";} function c () {this.name = "c"; this.age = 18; this.getage = function =) {return this.age};} b.protype = new a ();;

Explicación:

El objeto se crea directamente en la propiedad prototipo del objeto B, y no extiende el prototipo original de estos objetos.

Se crea una nueva entidad a través de A () y luego se usa para sobrescribir el prototipo del objeto.

JavaScript es un lenguaje que se basa completamente en objetos, y no hay concepto de clase.

Por lo tanto, es necesario crear directamente una entidad con una nueva () antes de que el trabajo de herencia relevante pueda completarse a través de las propiedades de la entidad.

Después de completar dicha implementación de herencia, cualquier modificación, reescritura o eliminación de A () no afectará a B ().

Heredado del prototipo solamente:

 función a () {} a.prototype.name = "a"; a.protype.ToString = function () {return this.name}; function b () {} b.prototype = a.prototype; b.prototype.name = "b"; functy c () {} c.prototype = b.prototype; c.prototype.name.name "; = 18; c.prototype.getage = function () {return this.age};

Herencia entre objetos (contenido extendido, no puede ser) (copia superficial)

 // La función acepta un objeto y devuelve su función de copia ExtendCopy (p) {var z = {}; // Defina un objeto vacío Z para (var i en p) {// var i = 0; i <p.length; i ++ z [i] = p [i]; // Si se trata como una matriz, puede entender} // atributo Uber: use P como padre de Z y punto Z al prototipo de p z.uber = p; return z;} // Definir el objeto A, pero el objeto A no es un objeto de función var a = {nombre: "A", toStr: function () {return this.name;}} // Definir objeto B, pero el objeto B no es un objeto de función var b = extendCopy (a); b.name = "b"; b.ToStr = function () {return this.uber.ToStr () + "," + this.name;}; // Definir el objeto C, pero el objeto C no es un objeto de función var c = extendCopy (b); c.name = 18; alerta (c.tostr ()); // Salida A, B, 18

PD: Muchos diseños de código en el tutorial no están estandarizados. Aquí hay algunas herramientas de formato y embellecimiento de código JavaScript para que todos los usen:

Herramienta de formato de código JavaScript:

http://tools.vevb.com/code/js

BATILización del código JavaScript/compresión/formato/herramientas de cifrado:

http://tools.vevb.com/code/jscompress

JSMIN en línea JS Herramienta de compresión:

http://tools.vevb.com/code/jsmincompress

For more information about JavaScript, please check this site's special topics: "Javascript object-oriented tutorial", "Summary of json operation skills in JavaScript", "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm skills", "Summary of JavaScript animation special effects and techniques", "Summary of JavaScript errors and debugging skills", "Resumen de las estructuras de datos de JavaScript y las habilidades de algoritmo", "Resumen de los algoritmos y técnicas de recorrido de JavaScript" y "Resumen del uso de operaciones matemáticas de JavaScript"

Espero que este artículo sea útil para la programación de JavaScript de todos.