Explicação básica orientada a objetos JS (modo de fábrica, modo construtor, modo de protótipo, modo misto, modo de protótipo dinâmico)

O que é orientado a objetos? Orientado a objetos é um tipo de pensamento! (absurdo).

Orientado a objetos pode tratar todos os módulos-chave em um programa como objetos, e os módulos têm atributos e métodos. Dessa forma, se encapsularmos algumas propriedades e métodos, será muito conveniente usar no futuro e também poderá evitar um trabalho tedioso e repetitivo. Em seguida, explicaremos a implementação orientada a objetos no JS.

Modelo de fábrica

O padrão de fábrica é um padrão de design bem conhecido no campo da engenharia de software e, como as classes não podem ser criadas no ECMAScript, os objetos são criados com o encapsulamento da função. O método de implementação é muito simples, ou seja, criar um objeto na função, atribuir atributos e métodos ao objeto e retornar o objeto.

 function createblog (nome, url) {var o = new Object (); o.name = nome; o.url = url; o.sayurl = function () {alert (this.url); } retornar o;} var blog1 = createblog ('wuyuchang', '//www.vevb.com/');

Pode -se observar que o método de implementação do padrão de fábrica é muito simples, resolvendo o problema de criar vários objetos semelhantes, mas o padrão de fábrica não pode identificar o tipo de objeto porque é tudo objeto, diferentemente da data, matriz etc., para que o padrão do construtor seja exibido.

Modo construtor

O construtor no ECMAScript pode criar objetos de tipos específicos, semelhantes aos objetos JS nativos, como matriz e data. O método de implementação é o seguinte:

 function blog (nome, url) {this.name = name; this.url = url; this.alerTurl = function () {alert (this.url); }} var blog = novo blog ('wuyuchang', '//www.vevb.com/') ;console.log(blog Instância do blog); // verdadeiro, determine se o blog é uma instância do blog, ou seja, resolve o problema de que o modo de fábrica não pode ser

Este exemplo é diferente do modelo de fábrica, exceto para o nome da função, os sapatos infantis cuidadosos devem encontrar muitas diferenças:

A primeira letra do nome da função é capitalizada (embora o padrão não estipule estritamente que a primeira letra é capitalizada, de acordo com a Convenção, a primeira letra do construtor é capitalizada.

Criar objeto não exibido

Atribuir atributos e métodos diretamente a este objeto

Nenhuma declaração de retorno

Crie um objeto usando novo

Ser capaz de reconhecer objetos (é aqui que os padrões do construtor superam os padrões de fábrica)

Embora os construtores sejam fáceis de usar, eles não têm desvantagens. O maior problema com o uso de construtores é que eles precisam recriar o método toda vez que criam uma instância (teoricamente, as propriedades do objeto são diferentes toda vez que criam um objeto e os métodos do objeto são os mesmos). No entanto, não é necessário criar exatamente o mesmo método duas vezes, para que possamos mover a função para fora do objeto (talvez alguns sapatos infantis tenham visto as desvantagens, shhhh!).

 function blog (nome, url) {this.name = name; this.url = url; this.alerTurl = alertUrl;} função alertUturl () {alert (this.url);} var blog = new blog ('scjb51', 'http://sc.vevb.com/'), blog2 = novo blog ('jb51', '//www.vevb.com/'; // http://sc.vevb.com/blog2.alerturl (); // //www.vevb.com/

Definimos alerturl para uma função global, para que o blog e o blog2 acessem a mesma função, mas o problema ocorre novamente. Uma função que realmente só deseja que o blog use é definido no escopo global, que mostra que o escopo global é um tanto digno de seu nome. O que é ainda mais inaceitável é que muitos métodos são definidos no escopo global que são usados ​​apenas por objetos específicos. Não é apenas o espaço desperdiçado, mas obviamente perde o encapsulamento orientado a objetos; portanto, esse problema pode ser resolvido através de protótipos.

Modo de protótipo

Cada função que criamos possui um atributo de protótipo, que é um ponteiro para um objeto, e o objetivo desse objeto é conter propriedades e métodos que possam ser compartilhados por todas as instâncias de um tipo específico. A vantagem de usar objetos de protótipo é que todas as instâncias de objetos podem compartilhar as propriedades e métodos que ele contém.

 function blog () {} blog.prototype.name = 'wuyuchang'; blog.prototype.url = 'http://tools.vevb.com/'; blog.prototype.friend = [' FR1 ',' FR2 ',' FR3 ',' FR4 ']; this.friend);} // a seguir é o código de teste var blog = new blog (), blog2 = new 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 = 'htpp. //); // wyc1http: //***.comfr1,fr2,fr3blog2.alertinfo (); // wyc2http: //++.comfr1,fr2,fr3

O padrão de protótipo não deixa de ter suas deficiências. Primeiro de tudo, omite o link do construtor que passa parâmetros de inicialização. Como resultado, todas as instâncias obtêm o mesmo valor de atributo por padrão, o que é muito inconveniente, mas esse não é o maior problema do protótipo. O maior problema com o padrão de protótipo é causado pela natureza do compartilhamento. Devido ao compartilhamento, uma instância modifica a referência e a outra também altera a referência. Portanto, geralmente não usamos protótipos isolados, mas combinamos padrões de protótipo com padrões de construtor.

Modo misto (modo de protótipo + modo construtor)

 function blog (nome, url, amigo) {this.name = name; this.url = url; this.friend = amigo;} blog.prototype.alertInfo = function () {alert (this.name + this.url + this.friend);} var blog = new Blog ('wuyuchang', 'http://tools.vevb.com/', ['fr1', 'fr2' ', fr3'] ,/tools.vevb.com/ ', [' fr1 ',' fr2 ', fr3']), blog. 'http: //**.com', ['a', 'b']); blog.friend.pop (); blog.alertinfo (); // wuyuchanghttp: //tools.vevb.com/fr1,fr2blog2.alertinfo (); // wychttp: //**.coma,

No modo híbrido, o modo construtor é usado para definir atributos de instância, enquanto o modo de protótipo é usado para definir métodos e atributos compartilhados. Cada instância terá seu próprio atributo de instância, mas ao mesmo tempo compartilha métodos, economizando memória na extensão máxima. Além disso, esse modo também suporta a passagem de parâmetros iniciais. Muitas vantagens. Esse padrão é o método mais utilizado e reconhecido para criar objetos personalizados no ECMAScript.

Modo de protótipo dinâmico

O modo de protótipo dinâmico encapsula todas as informações no construtor e, ao inicializar o protótipo no construtor (apenas o protótipo é inicializado quando o primeiro objeto é instanciado), isso permite escolher se o protótipo precisa ser inicializado por julgar se o método é válido.

 function blog (nome, url) {this.name = name; this.url = url; if (typeof this.alertinfo! = 'function') {// Este código é executado apenas uma vez alerta ('exe time'); Blog.prototype.alertinfo = function () {alert (thia.name + this.url); }}} var blog = new Blog ('Wuyuchang', 'http://tools.vevb.com'), blog2 = novo blog ('wyc', 'http: ***. com');

Você pode ver que, no exemplo acima, a janela aparece uma vez, 'Exe Time', ou seja, quando o blog é inicializado, o Blog2 não precisa inicializar o protótipo. Para criar objetos usando esse padrão, ele pode ser considerado perfeito.

Esta postagem no blog refere -se à terceira edição de "JavaScript Advanced Programming", mas o idioma foi simplificado e os exemplos foram reescritos. Se você tiver alguma dúvida, deixe uma mensagem e responda e o autor atualizará o blog.