introduzir
Os quatro modos de reutilização de código introduzidos neste artigo são melhores práticas e são recomendados a todos durante o processo de programação.
Padrão 1: Herança de protótipo
A herança do protótipo é permitir que o objeto pai seja o protótipo do objeto infantil, de modo a alcançar o objetivo da herança:
A cópia do código é a seguinte:
objeto de função (o) {
função f () {
}
F.Prototype = O;
retornar novo f ();
}
// objeto pai para herdar
var pai = {
Nome: "Papa"
};
// novo objeto
var criança = objeto (pai);
// teste
console.log (Child.name); // "papai"
// Construtor pai
função pessoa () {
// uma propriedade "própria"
this.name = "adam";
}
// Adicione novos atributos ao protótipo
Person.prototype.getName = function () {
retornar este.name;
};
// Crie uma nova pessoa
var papa = new pessoa ();
// herança
var infantil = objeto (papai);
console.log (Kid.getName ()); // "Adam"
// Construtor pai
função pessoa () {
// uma propriedade "própria"
this.name = "adam";
}
// Adicione novos atributos ao protótipo
Person.prototype.getName = function () {
retornar este.name;
};
// herança
var infantil = objeto (pessoa.prototipo);
console.log (typeof Kid.getName); // "função", porque é definido no protótipo
console.log (typeof Kid.name); // "indefinido", porque apenas o protótipo é herdado
Ao mesmo tempo, o ECMAScript5 também fornece um método semelhante chamado Object.Create para herdar objetos, e o uso é o seguinte:
A cópia do código é a seguinte:
/* Use a nova versão do ECMAScript 5 para fornecer recursos*/
var criança = object.create (pai);
var criança = object.create (pai, {
Idade: {Valor: 2} // ECMA5 Descritor
});
Console.log (Child.HasownProperty ("Age")); // verdadeiro
Além disso, as propriedades também podem ser definidas no segundo parâmetro de maneira mais fina:
A cópia do código é a seguinte:
// Primeiro, defina um novo objeto Man
var man = object.create (nulo);
// Em seguida, crie uma configuração contendo propriedades
// As propriedades são definidas como graváveis, enumeráveis e configuráveis
var config = {
gravável: verdadeiro,
enumerável: verdadeiro,
Configurável: Verdadeiro
};
// geralmente usa object.DefineProperty () para adicionar novas propriedades (suportes do ecmascript5)
// Agora, por conveniência, personalizamos uma função de encapsulamento
var defineProp = function (obj, chave, valor) {
config.value = value;
Object.DefineProperty (OBJ, key, config);
}
defineProp (Man, 'Car', 'DeLorean');
defineProp (Man, 'Dob', '1981');
defineProp (Man, 'Beard', falso);
Portanto, a herança pode ser feita:
A cópia do código é a seguinte:
var driver = object.create (homem);
defineProp (Driver, 'Topspeed', '100 mph');
driver.topspeed // 100 mph
Mas há uma coisa a ser observada, ou seja, o protótipo do objeto criado por Object.Create (NULL) é indefinido, ou seja, não há métodos de toques e valor, portanto, ocorrerá um erro quando alerta (homem);, mas alerta (man.car); está bem.
Modo 2: copie todos os atributos para herança
A herança dessa maneira é copiar todas as propriedades no objeto pai para o objeto filho. Geralmente, o objeto filho pode usar os dados do objeto pai.
Vamos primeiro olhar para um exemplo de cópia superficial:
A cópia do código é a seguinte:
/* Cópia rasa*/
função estend (pai, filho) {
var i;
criança = criança || {};
para (eu no pai) {
if (parent.HasownProperty (i)) {
criança [i] = pai [i];
}
}
criança de volta;
}
var pai = {nome: "adam"};
Var Kid = Extend (Papai);
console.log (Kid.name); // "Adam"
var pai = {
contagens: [1, 2, 3],
Leia: {Paper: true}
};
Var Kid = Extend (Papai);
KID.COUNTS.PUSH (4);
console.log (papai.counts.toString ()); // "1,2,3,4"
console.log (papai.reads === Kid.reads); // verdadeiro
Na última linha do código, você pode descobrir que as leituras do pai e do garoto são as mesmas, ou seja, elas usam a mesma referência, que é o problema causado por uma cópia superficial.
Vamos dar uma olhada na cópia profunda:
A cópia do código é a seguinte:
/* Cópia profunda*/
função estenddeep (pai, filho) {
var i,
tostr = object.prototype.ToString,
Astr = "[Array de objeto]";
criança = criança || {};
para (eu no pai) {
if (parent.HasownProperty (i)) {
if (typeof pai [i] === 'objeto') {
criança [i] = (tostr.call (pai [i]) === Astr)? []: {};
estenddeep (pai [i], criança [i]);
} outro {
criança [i] = pai [i];
}
}
}
criança de volta;
}
var pai = {
contagens: [1, 2, 3],
Leia: {Paper: true}
};
Var Kid = Extenddeep (Papai);
KID.COUNTS.PUSH (4);
console.log (Kid.Counts.ToString ()); // "1,2,3,4"
console.log (papai.counts.toString ()); // "1,2,3"
console.log (papai.reads === Kid.reads); // false
Kid.reads.Paper = false;
Após a cópia profunda, os dois valores não são mais iguais, bingo!
Modo 3: Misture
Misturado é copiar uma ou mais (ou todas) propriedades (ou métodos) de um objeto para outro objeto. Vamos dar um exemplo:
A cópia do código é a seguinte:
função mix () {
var arg, prop, filho = {};
for (arg = 0; arg <argumentos.length; arg += 1) {
para (prop em argumentos [arg]) {
if (argumentos [arg] .HasownProperty (prop)) {
criança [prop] = argumentos [arg] [prop];
}
}
}
criança de volta;
}
var bolo = mix (
{ovos: 2, grande: true},
{Manteiga: 1, Salted: True},
{farinha: '3 xícaras'},
{Sugar: 'Claro!' }
);
console.dir (bolo);
A função Mix copia os atributos infantis de todos os parâmetros passados para o objeto filho para gerar um novo objeto.
Então, como queremos apenas misturar alguns atributos? Como fazer isso? De fato, podemos usar parâmetros extras para definir as propriedades que precisam ser misturadas, como mix (filho, pai, método1, método2) para que possamos misturar apenas o método1 e o método2 no pai em filho. No código:
A cópia do código é a seguinte:
// Carro
var carro = função (configurações) {
this.model = Settings.model || 'Nenhum modelo fornecido';
this.colour = Settings.colour || 'Nenhuma cor fornecida';
};
// mixin
var mixin = function () {};
Mixin.prototype = {
driveForward: function () {
console.log ('Drive Forward');
},
Drivebackward: function () {
console.log ('Drive para trás');
}
};
// Os dois parâmetros definidos estão o objeto que está sendo misturado (recebendo) e o objeto que está sendo misturado (dando)
Função Augmente
// Se o nome do método especificado for fornecido, existem 3 parâmetros extras
if (argumentos [2]) {
for (var i = 2, len = argumentos.length; i <len; i ++) {
ReceivingObj.prototype [Argumentos [i]] = giveObj.prototype [argumentos [i]];
}
}
// Se você não especificar o terceiro parâmetro, ou mais parâmetros, todos os métodos serão misturados
outro {
para (var métodoName em giveObj.prototype) {
// Verifique se o objeto receptor não contém o nome a ser misturado; portanto, se estiver incluído, não será misturado
if (! ReceivingObj.prototype [MethodName]) {
ReceivingObj.prototype [MethodName] = GiveObj.prototype [MethodName];
}
}
}
}
// Misture os atributos para o carro, mas os valores são misturados com 'driveforward' e 'drivebackward'*/
aumento (carro, mixin, 'driveforward', 'drivebackward');
// Crie um novo carro de objeto
VAR VEÍCULO = NOVO CAR ({Model: 'Ford Escort', Color: 'Blue'});
// método para testar se a mistura é obtida com sucesso
veículo.DriveForward ();
veículo.DriveBackward ();
Este método é mais flexível de usar.
Padrão 4: Método de empréstimo
Um objeto empresta um ou dois métodos de outro objeto e não há conexão direta entre esses dois objetos. Não há necessidade de explicar mais, basta usar o código para explicar:
A cópia do código é a seguinte:
var one = {
Nome: 'Objeto',
Diga: função (cumprimenta) {
Retornar Greet + ',' + this.name;
}
};
// teste
console.log (One.Say ('HI')); // "oi, objeto"
var dois = {
Nome: 'Outro objeto'
};
console.log (one.say.apply (dois, ['hello'])); // "Olá, outro objeto"
// atribui a dizer a uma variável, isso apontará para a variável global
var diz = One.Say;
console.log (digamos ('hoho')); // "Hoho, indefinido"
// Passar um retorno de chamada para função de retorno de chamada
var yetanother = {
Nome: 'ainda outro objeto',
Método: função (retorno de chamada) {
retornar retorno de chamada ('hola');
}
};
console.log (yetanother.method (One.Say)); // "Holla, indefinido"
função bind (o, m) {
Return function () {
retornar M.Apply (O, [] .slice.Call (argumentos));
};
}
var twosay = bind (dois, um.say);
console.log (twosay ('yo')); // "yo, outro objeto"
// ECMAScript 5 Adiciona um método bind () ao function.prototype para que seja fácil de usar o aplicativo () e Call ().
if (typeof function.prototype.bind === 'indefinido') {
Function.prototype.bind = function (thisArg) {
var fn = this,
slice = array.prototype.slice,
args = slice.call (argumentos, 1);
Return function () {
return fn.apply (thisarg, args.concat (slice.call (argumentos)));
};
};
}
var twosay2 = One.say.bind (dois);
console.log (twosay2 ('Bonjour')); // "Bonjour, outro objeto"
var twosay3 = One.say.bind (dois, 'enchanté');
console.log (twosay3 ()); // "Encanté, outro objeto"
Resumir
Não há necessidade de resumir.