Resumo do esquema de criar objetos em JavaScript

Resumo do esquema de criar objetos em JavaScript

** JavaScript cria padrão de objeto:

Objeto literal

Modelo de fábrica

Modo construtor

Modo de protótipo

Combinando o padrão construtor e protótipo

Modo dinâmico de protótipo

**

A maioria dos idiomas orientados a objetos tem o conceito de classe, através do qual vários objetos com os mesmos métodos e atributos podem ser criados. Embora tecnicamente, o JavaScript seja uma linguagem orientada a objetos, o JavaScript não possui o conceito de classes, tudo é um objeto. Qualquer objeto é uma instância de um determinado tipo de referência e é criado através dos tipos de referência existentes; O tipo de referência pode ser nativo ou personalizado.

1. Objeto literal

 var pessoa = {nome: 'nicholas'; idade: '22'; Job: "Software Engineer" SayName: function () {alter (this.name); }}

No exemplo, um objeto chamado Pessoa é criado e três atributos (nome, idade, trabalho) e um método (SayName ()) são adicionados a ele. O método SayName () é usado para exibir o valor deste.name (resolvido como pessoa.name).

Os literais de objeto podem ser usados ​​para criar um único objeto, mas esse método tem uma desvantagem óbvia: criar muitos objetos usando a mesma interface produzirá muitos código duplicados.

2. Modelo de fábrica

O padrão de fábrica é um padrão de design bem conhecido no campo da engenharia de software. O padrão de fábrica abstrai o processo de criação de objetos específicos e usa funções para encapsular os detalhes da criação de objetos com interfaces específicas.

 função createPerson (nome, idade, trabalho) {var o = novo objeto {}; o.name = nome; o.age = idade; O.JOB = Job; O.SayName = function () {alert (this.name); }; retornar o;} var pessoa1 = creatperson ("nicholas", 22, "engenheiro de software"); Var Person2 = CreatPerson ("Greg", 24, "Student");

A função CreatPerson {} pode criar um objeto de pessoa que contém todas as informações necessárias com base nos parâmetros aceitos. Essa função pode ser chamada inúmeras vezes e, cada vez, retornará um objeto que contém três propriedades e um método.

Embora o modelo de fábrica resolva o problema de criar vários objetos semelhantes, ele não resolve o problema do reconhecimento de objetos (ou seja, como saber o tipo de objeto).

3. Modo construtor

 função pessoa (nome, idade, trabalho) {this.name = name; this.age = idade; this.Job = Job; this.sayName = function () {alert (this.name); }} // Crie uma instância de pessoa através do novo operador var pessoa1 = new Pessoa ("Nicholas", 22, "Engenheiro de Software"); var Person2 = New Pessoa ("Greg", 24, "Student"); Person1.SayName (); //Nicholaspson2.sayName (); // Greg

A diferença do modelo de fábrica é

Criar objeto não exibido

Atribuir atributos e métodos diretamente a este objeto

Nenhuma declaração de retorno

Para criar uma nova instância da pessoa, você deve usar o novo operador. 4 etapas para chamar o construtor:

Crie um novo objeto

Atribua o escopo do construtor a um novo objeto (isso aponta para este novo objeto)

Executar o código no construtor

Devolver um novo objeto

Todos os objetos criados neste exemplo são casos de instâncias de objeto e pessoa. Pode ser verificado pelo operador da instância.

 alerta (pessoa1 instância do objeto); // true

O padrão construtor também tem seus próprios problemas. De fato, o método SayName será recriado uma vez em cada instância. Deve -se notar que os métodos criados pela instanciação não são iguais. O código a seguir pode provar que

 alert (Person1.SayName == Person2.SayName); // false

Esse problema pode ser resolvido movendo o método para fora do construtor como uma função global.

 função pessoa (nome, idade, trabalho) {this.name = name; this.age = idade; this.Job = Job; } function SayName () {alert (this.name); }

As funções globais criadas no mundo global podem realmente ser chamadas por instâncias criadas pela pessoa, o que é um pouco irrealista; Se o objeto precisar definir um método muito correto, muitas funções globais precisam ser definidas, o que não possui encapsulamento.

4. Modo de protótipo

Cada função criada no JavaScript possui uma propriedade de protótipo, que é um ponteiro para um objeto, contendo propriedades e métodos que podem ser compartilhados por todas as instâncias de um tipo específico (deixe todas as instâncias de objeto compartilharem suas propriedades e métodos)

 function PERS () {} PERSON.Prototype.Name = "Nicholas"; Pessoa.prototype.age = 22; Pessoa.prototype.job = "engenheiro de software"; Pessoa.prototype.sayName () {alert (this.name); }; Var Person1 = New Pessoa (); PERSON.SAYNAME (); //Nicholasalert(person1.sayname == Person2.SayName); // true

O código acima faz as estas:

Defina uma pessoa construtora. A função da pessoa obtém automaticamente uma propriedade de protótipo. Esta propriedade contém apenas uma propriedade do construtor apontando para a pessoa por padrão.

Adicione três propriedades e um método através da pessoa. Prototipo

Crie uma instância da pessoa e depois chame o método SayName () na instância

Usando o construtor de pessoas e a pessoa.prototipo para criar uma instância como exemplo, para mostrar o relacionamento entre objetos

Usando o construtor de pessoas e a pessoa.prototipo para criar uma instância como exemplo, para mostrar o relacionamento entre objetos

A figura mostra a relação entre o construtor da pessoa, as propriedades do protótipo da pessoa e duas instâncias de pessoa. Person.Prototype aponta para o objeto Prototype, Pessoa.prototype.Constructor aponta de volta à pessoa. Além de conter o atributo construtor, o objeto de protótipo também contém outras propriedades e métodos adicionados posteriormente. As duas instâncias de ambas as pessoas, Person1 e Person2, contêm uma propriedade interna, que apenas aponta para a pessoa. Prototipo.

O processo de chamada do método SayName ():

Procurando o método logname () na instância Pessoa1, descobri que não havia esse método, então eu voltei ao protótipo de pessoa1

Procure o método sayame () no protótipo da pessoa1. Existe esse método, então o método é chamado

Com base nesse processo de pesquisa, podemos impedir que a instância acesse o mesmo nome do atributo no protótipo, definindo o mesmo atributo de nome no protótipo na instância. Deve-se notar que isso não excluirá o mesmo atributo de nome no protótipo, mas apenas impedirá o acesso à instância.

 function PERS () {} PERSON.Prototype.Name = "Nicholas"; Pessoa.prototype.age = 22; Pessoa.prototype.job = "engenheiro de software"; Pessoa.prototype.sayName () {alert (this.name); }; Var Person1 = New Pessoa (); var pessoa2 = new Person (); PERSON1.NAME = "Greg" Alert (Person1.name) // Greg vem do alerta da instância (Person2.Name) // Nicholas vem do protótipo

Use o operador de exclusão para excluir completamente as propriedades da instância

 Excluir Person1.name; Alert (Person1.name) // Nicholas do protótipo

Use o método HASOWNPROPERTY () para detectar se existe uma propriedade em uma instância ou um protótipo

 function PERS () {} PERSON.Prototype.Name = "Nicholas"; Pessoa.prototype.age = 22; Pessoa.prototype.job = "engenheiro de software"; Pessoa.prototype.sayName () {alert (this.name); }; Var Person1 = New Pessoa (); var pessoa2 = new Person (); alerta (Person1, HasownProperty ("Nome")); // False PERSON1.NAME = "Greg" Alert (Person1.name) // Greg a partir do alerta da instância (Person1, HasownProperty ("Nome"); Pessoa); Pessoa); Person1.name; alert (Person1.name) // Nicholas do protótipo Alert (Person1, HasOwnProperty ("Nome")); // false

A figura a seguir mostra a relação entre instâncias e protótipos em diferentes situações

Sintaxe do protótipo simples

 function Person () {} Person.prototype = {Nome: "Nicholas", Age: 22, Job: "Software Engineer", SayName: function () {alert (this.name); }};

No código acima, o atributo do construtor não aponta mais para a pessoa, e o tipo de objeto não pode ser determinado através do construtor. Você pode colocá -lo novamente no valor apropriado, como abaixo

 function Person () {} Person.prototype = {construtor: pessoa, nome: "nicholas", idade: 22, trabalho: "engenheiro de software", sayname: function () {alert (this.name); }};

A redefinição da propriedade do construtor fará com que sua propriedade [[enumerável]] seja definida como true. Por padrão, a propriedade do construtor nativo não é enumerável. Você pode usar o método Object.DefineProperty () para alterá -lo.

 Object.DefineProperty (Person.prototype, "Construtor", {enumerável: false, valor: pessoa});

O processo de encontrar valores em um protótipo é uma pesquisa e quaisquer modificações feitas pelo objeto de protótipo podem ser refletidas imediatamente a partir da instância.

 var amigo = new pessoa (); pessoa.prototype.sayhi = function () {alert ("oi);} amigo, sayhi (); //" oi "(sem problemas)

A instância da pessoa é criada antes de adicionar um novo método, mas ainda tem acesso ao método recém -adicionado devido à conexão solta entre a instância e o protótipo

A situação depois de reescrever o objeto de protótipo

 function pessoa () {} var amigo = new Person (); Person.Prototype = {Nome: "Nicholas", Idade: 22, Job: "Software Engineer", SayName: function () {alert (this.name); }}; amigo.SayName (); // Erro

O motivo do erro ao chamar friend.sayname () é que o protótipo apontado por Friend não contém atributos com o nome deste campo, como mostrado na figura abaixo.

Problema do objeto de protótipo

O objeto de protótipo omite o processo de aprovação de parâmetros de inicialização do construtor e todas as forças obtêm o mesmo valor de atributo por padrão. O maior problema com os modelos de protótipo é que eles têm sua natureza compartilhada. Quando o modelo de protótipo contém atributos do tipo de referência, o problema é mais grave. Vamos dar uma olhada no exemplo a seguir.

 function Person () {} Person.prototype = {Construtor: Pessoa, Nome: "Nicholas", Idade: 22, Jó: "Engenheiro de Software", Amigos: ["Shelby", "Court"], SayName: function () {alert (this.name); }}; Var Person1 = New Pessoa (); var pessoa2 = new Person (); Person1.friend.push ("van"); alert (Person1.friends); // "Shelby, Tribunal, Van" Alert (Person2.friends); // "Shelby, Tribunal, Van" Alert (Person1.friends == Person2.friends); // Verdadeiro

5. Combinar o modo construtor e o modo de protótipo

Em combinação do modo construtor e modo de protótipo, os construtores são usados ​​para definir propriedades de instância e os modelos de protótipo são usados ​​para definir métodos e propriedades compartilhadas. Dessa forma, cada instância terá sua própria cópia dos atributos da instância e também pode compartilhar referências a métodos, economizando memória na extensão máxima.

 função pessoa (nome, idade, trabalho) {this.name = name; this.age = idade; this.Job = Job; this.friends = ["Shelby", "Court"];} pessoa.prototype = {construtor: pessoa, SayName: function () {alert (this.name); }} var pessoa1 = nova pessoa ("nicholas", 22, "engenheiro de software"); var pessoa2 = nova pessoa ("Greg", 24, "Student"); Person1.friend.push ("van"); alerta (Person1.friends); // "Shelby, Tribunal, Van" Alert (Person2.friends); // "Shelby, Tribunal" Alert (Person1.friends == Person2.friends); // Alert False (Person1.SayName == Person2.SayName); // True

6. Modo de protótipo dinâmico

O modo protótipo dinâmico encapsula todas as informações necessárias no construtor e usa a instrução IF para determinar se existe uma determinada propriedade no protótipo. Se não existir (quando o construtor for chamado pela primeira vez), execute o código de inicialização do protótipo dentro da instrução IF.

 função pessoa (nome, idade) {this.name = name; this.age = idade; this.job = job; // método if (typeof this.sayName! = 'function') {Person.prototype.sayName = function () {alert (this.name); }; }} var amigo = new pessoa ('nicholas', '22', 'engenheiro de software'); // o construtor foi chamado pela primeira vez, e o protótipo foi modificado neste momento var pessoa2 = nova pessoa ('amy', '21'); // o método Sayname () já existe e o protótipo não será modificado novamente

Leitura recomendada:

Várias maneiras comuns de criar objetos no JS Orientado a objetos (modo de fábrica, modo construtor, modo de protótipo)

O exposto acima é o padrão de criar objetos no JavaScript, apresentado a você pelo editor. Espero que seja útil para todos!