introducir
Los cuatro modos de reutilización de código introducidos en este artículo son las mejores prácticas y se recomiendan a todos durante el proceso de programación.
Patrón 1: herencia prototipo
La herencia prototipo es dejar que el objeto principal sea el prototipo del objeto infantil, para lograr el propósito de la herencia:
La copia del código es la siguiente:
objeto de función (o) {
función f () {
}
F.Prototype = O;
devolver nuevo f ();
}
// Objeto principal para heredar
var parent = {
Nombre: "Papá"
};
// nuevo objeto
var Child = Object (Parent);
// prueba
console.log (child.name); // "papá"
// Constructor de padres
función persona () {
// una propiedad "propia"
this.name = "Adam";
}
// Agregar nuevos atributos al prototipo
Persona.prototype.getName = function () {
devolver esto.name;
};
// crear una nueva persona
var papá = nueva persona ();
// Herencia
var kid = objeto (papa);
console.log (kid.getName ()); // "Adán"
// Constructor de padres
función persona () {
// una propiedad "propia"
this.name = "Adam";
}
// Agregar nuevos atributos al prototipo
Persona.prototype.getName = function () {
devolver esto.name;
};
// Herencia
var kid = objeto (persona.prototype);
console.log (typeof kid.getName); // "función", porque se define en el prototipo
console.log (typeof kid.name); // "indefinido", porque solo el prototipo está heredado
Al mismo tiempo, ECMAScript5 también proporciona un método similar llamado Object.Create para heredar objetos, y el uso es el siguiente:
La copia del código es la siguiente:
/* Use la nueva versión de Ecmascript 5 para proporcionar características*/
var child = object.create (padre);
var child = object.create (parent, {
Age: {valor: 2} // descriptor ECMA5
});
console.log (child.hasownproperty ("edad")); // verdadero
Además, las propiedades también se pueden definir en el segundo parámetro de una manera más de grano fino:
La copia del código es la siguiente:
// Primero, defina un nuevo hombre de objeto
var hombre = objeto.create (nulo);
// A continuación, cree una configuración de configuración que contenga propiedades
// Las propiedades están establecidas en WRITITY, enumerables y configurables
var config = {
WRATITY: verdadero,
enumerable: verdadero,
configurable: verdadero
};
// generalmente usa Object.DefineProperty () para agregar nuevas propiedades (compatibles con ECMAScript5)
// Ahora, por conveniencia, personalizamos una función de encapsulación
var defineprop = function (obj, key, valor) {
config.Value = value;
Object.defineProperty (obj, key, config);
}
DefineProp (hombre, 'coche', 'deloreano');
DefineProp (hombre, 'Dob', '1981');
DefineProp (hombre, 'barba', falso);
Entonces, la herencia se puede hacer:
La copia del código es la siguiente:
Var controlador = objeto.create (hombre);
DefineProp (controlador, 'Topspeed', '100mph');
conductor.topspeed // 100 mph
Pero hay una cosa a tener en cuenta, es decir, el prototipo del objeto creado por Object.Create (NULL) está indefinido, es decir, no hay tostring y valor de métodos, por lo que ocurrirá un error cuando está alerta (hombre);, pero alerta (man.car); está bien.
Modo 2: Copie todos los atributos para la herencia
La herencia de esta manera es copiar todas las propiedades en el objeto principal al objeto infantil. En general, el objeto infantil puede usar los datos del objeto principal.
Primero veamos un ejemplo de copia superficial:
La copia del código es la siguiente:
/* Copia superficial*/
función extender (padre, hijo) {
var i;
Niño = niño || {};
para (i en el padre) {
if (parent.hasownproperty (i)) {
niño [i] = parent [i];
}
}
niño de regreso;
}
var dad = {nombre: "Adam"};
var niño = extender (papá);
console.log (kid.name); // "Adán"
var dad = {
Cuenta: [1, 2, 3],
lectura: {Paper: True}
};
var niño = extender (papá);
kid.counts.push (4);
console.log (dad.counts.toString ()); // "1,2,3,4"
console.log (dad.reads === Kid.Reads); // verdadero
En la última línea del código, puede encontrar que las lecturas de papá y niños son las mismas, es decir, usan la misma referencia, que es el problema causado por una copia superficial.
Echemos un vistazo a la copia profunda:
La copia del código es la siguiente:
/* Copia profunda*/
función extenddeep (padre, niño) {
var i,
toStr = object.prototype.ToString,
Astr = "[Array de objetos]";
Niño = niño || {};
para (i en el padre) {
if (parent.hasownproperty (i)) {
if (typeof parent [i] === 'objeto') {
Child [i] = (toStr.call (padre [i]) === Astr)? []: {};
extenddeep (padre [i], niño [i]);
} demás {
niño [i] = parent [i];
}
}
}
niño de regreso;
}
var dad = {
Cuenta: [1, 2, 3],
lectura: {Paper: True}
};
var kid = extenddeep (papá);
kid.counts.push (4);
console.log (kid.counts.toString ()); // "1,2,3,4"
console.log (dad.counts.toString ()); // "1,2,3"
console.log (dad.reads === Kid.Reads); // FALSO
kid.reads.paper = false;
Después de una copia profunda, los dos valores ya no son iguales, ¡bingo!
Modo 3: mezclar
Mezclado es copiar una o más (o todas) propiedades (o métodos) de un objeto a otro objeto. Demos un ejemplo:
La copia del código es la siguiente:
función mix () {
var arg, prop, child = {};
para (arg = 0; arg <arguments.length; arg += 1) {
para (apropiar en los argumentos [arg]) {
if (argumentos [arg] .hasownproperty (prop)) {
niño [prop] = argumentos [arg] [prop];
}
}
}
niño de regreso;
}
Var Cake = Mix (
{Eggs: 2, grande: verdadero},
{mantequilla: 1, salted: true},
{harina: '3 tazas'},
{Sugar: '¡Claro!' }
);
console.dir (pastel);
La función de mezcla copia los atributos infantiles de todos los parámetros que se pasan al objeto infantil para generar un nuevo objeto.
Entonces, ¿cómo queremos mezclar algunos atributos? ¿Cómo hacerlo? De hecho, podemos usar parámetros adicionales para definir las propiedades que deben mezclarse, como la mezcla (niño, parent, método1, método2) para que solo podamos mezclar el método1 y el método2 en el padre en el niño. En el código:
La copia del código es la siguiente:
// Auto
var car = function (configuración) {
this.model = settings.model || 'No se proporciona modelo';
this.colour = settings.colour || 'No se proporciona color';
};
// mezclar
var mixin = function () {};
Mixin.prototype = {
DriveForward: function () {
console.log ('conducir hacia adelante');
},
DriveBackward: function () {
console.log ('conducir hacia atrás');
}
};
// Los dos parámetros definidos son el objeto que se mezcla (recivando) y el objeto se mezcla con (dar)
Function Augment (recibeBj, ditingObj) {
// Si se proporciona el nombre del método especificado, hay 3 parámetros adicionales
if (argumentos [2]) {
para (var i = 2, len = arguments.length; i <len; i ++) {
recibeBJ.prototype [argumentos [i]] = dedobj.prototype [argumentos [i]];
}
}
// Si no especifica el tercer parámetro, o más parámetros, todos los métodos se mezclarán
demás {
para (Var MethodName en dedobj.prototype) {
// Verifique que el objeto receptor no contenga el nombre que se mezclará, por lo que si está incluido, no se mezclará en
if (! recibiendoBJ.Prototype [MethodName]) {
receptiveBJ.Prototype [MethodName] = dedobj.prototype [MethodName];
}
}
}
}
// Mezcle los atributos para el automóvil, pero los valores se mezclan con 'DriveForward' y 'DriveBackward'*/
Aumento (automóvil, mezcla, 'impulsor', 'DriveBackward');
// Crear un nuevo coche de objeto
var vehículo = automóvil nuevo ({modelo: 'Ford Escort', Color: 'Blue'});
// método para probar si la mezcla se obtiene correctamente
vehículo.driveforward ();
vehículo.driveBackward ();
Este método es más flexible de usar.
Patrón 4: Método de préstamo
Un objeto toma prestado uno o dos métodos de otro objeto, y no hay una conexión directa entre estos dos objetos. No es necesario explicar más, solo use el código para explicar:
La copia del código es la siguiente:
var uno = {
Nombre: 'Objeto',
decir: función (salud) {
regresar greed + ',' + this.name;
}
};
// prueba
console.log (One.say ('Hi')); // "Hola, objeto"
var dos = {
Nombre: 'Otro objeto'
};
console.log (uno.say.apply (dos, ['hola'])); // "Hola, otro objeto"
// Asignar decir a una variable, esto apuntará a la variable global
var dice = uno.say;
console.log (decir ('hoho')); // "Hoho, indefinido"
// pasar una función de devolución de llamada de devolución de llamada
var y thitanother = {
Nombre: 'Otro objeto más',
Método: función (devolución de llamada) {
devolver la devolución de llamada ('hola');
}
};
console.log (yetanother.method (One.say)); // "Holla, indefinido"
Función Bind (O, M) {
Función de retorno () {
return m.apply (o, [] .slice.call (argumentos));
};
}
var twosay = bind (dos, uno.say);
console.log (twosay ('yo')); // "yo, otro objeto"
// ECMAScript 5 agrega un método Bind () a Function.Prototype para que sea fácil de usar Aplication () y Call ().
if (typeof function.prototype.bind === 'undefined') {
Function.prototype.bind = function (thatesarg) {
var fn = esto,
slice = array.prototype.slice,
args = slice.call (argumentos, 1);
Función de retorno () {
return fn.apply (thatesarg, args.concat (slice.call (argumentos)));
};
};
}
var twosay2 = One.say.bind (dos);
console.log (twosay2 ('bonjour')); // "Bonjour, otro objeto"
var twosay3 = One.say.bind (dos, 'Enchanté');
console.log (twosay3 ()); // "Enchanté, otro objeto"
Resumir
No hay necesidad de resumir.