Análise detalhada de quatro maneiras de criar objetos em JavaScript

Prefácio

Existem muitas maneiras de criar objetos usando JavaScript. Agora, vamos listar quatro deles e listar as vantagens e desvantagens de cada método, para que você possa escolher e usá -lo. Vamos dar uma olhada.

Modelo de fábrica

 função createPerson (nome, idade) {var obj = new Object (); obj.name = nome; obj.age = idade; retornar obj; // Certifique -se de retornar, caso contrário, indefinido: indefinido} var pessoa1 = new CreatePerson ('Young', 18); console.log (Person1.name + ':' + Person1.age);

Vantagens: o padrão de fábrica pode resolver o problema de criar vários objetos semelhantes

Desvantagens: o problema de reconhecimento de objetos não foi resolvido (como determinar o tipo de objeto)

Modo construtor

 função pessoa (nome, idade) {this.name = name; this.age = idade; } var pessoa1 = nova pessoa ('Young', 18); console.log (Person1.name + ':' + Person1.age);

Antes de falar sobre seus prós e contras, vamos falar sobre sua própria história primeiro.

Use construtores como funções

 função pessoa (nome, idade) {this.name = name; this.age = idade; this.sayName = function () {return this.name; }} // Use var pessoa1 = new Pessoa ('Young', 18); PERSON.SAYNAME (); console.log (Person1.name + ':' + Person1.age); // Pessoa chamando ('vento', 18); console.log (window.sayname ()); // chamando var obj = new Object (); Pessoa.call (obj, 'pássaro', 100); console.log (obj.sayname ());

Vantagens e desvantagens dos construtores

Vantagens: sua instância pode ser identificada como um tipo específico

Desvantagens: Cada método deve ser recriado em cada instância. Claro que você pode mudar assim:

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

Em vez disso, chame as funções globais, para que não haja encapsulamento. . . O modo de protótipo a seguir pode compensar esta falha

Modo de protótipo

 function Person () {} Pessoa.prototype.name = 'Young'; Pessoa.prototype.age = 18; Pessoa.prototype.sayName = function () {return this.name; } var pessoa1 = new Person (); console.log (Person1.SayName ()); var pessoa2 = new Person (); console.log (Person1.SayName ()); alert (Person1.SayName === Person2.SayName); // Person1 e Person2 Acesse a mesma função SayName () do mesmo grupo de atributos

Embora o valor salvo no protótipo possa ser acessado através da instância do objeto, o valor armazenado no protótipo não pode ser reescrito através do objeto de instância

 function Person () {} Pessoa.prototype.name = 'Young'; Pessoa.prototype.age = 18; Pessoa.prototype.sayName = function () {return this.name; } var pessoa1 = new Person (); var pessoa2 = new Person (); pessoa1.name = 'vento'; console.log (Person1.SayName ()); // Wind Console.log (Person2.SayName ()); // Young Alert (Person1.SayName == Pessoas.Sayname); // true

Quando chamamos person1.sayName , realizaremos duas pesquisas em sucessão. O analisador determina primeiro se a pessoa da instância1 tem o atributo sayName . Se houver, chamaremos nossos próprios atributos. Se não houver, procuraremos os atributos no protótipo.

 function Person () {} Pessoa.prototype.name = 'Young'; Pessoa.prototype.age = 18; Pessoa.prototype.sayName = function () {return this.name; } var pessoa1 = new Person (); var pessoa2 = new Person (); pessoa1.name = 'vento'; console.log (Person1.SayName ()); // Wind Console.log (PERSON2.SAYNAME ()); // YOUNG DELETE PERSON1.NAME; console.log (Person1.SayName ()); // Young Console.log (PERSON2.SayName ()); // Young

Use o método hasOwnPropertyType para detectar se existe uma propriedade no protótipo ou na instância. O método é herdado do objeto, verdadeiro na instância e falso no protótipo.

Use Object.keys() para enumerar as propriedades de instância em objetos

 function Person () {} Pessoa.prototype.name = 'Young'; Pessoa.prototype.age = 18; Pessoa.prototype.sayName = function () {return this.name; } var keys = object.Keys (Person.prototype); console.log (chaves); // ["nome", "idade", "sayname"]]

Prós e contras do modo de protótipo

Vantagens: não há necessidade de reiterar todos os métodos em cada instância

Desvantagens: Muito poucas pessoas usam o modo de protótipo sozinho. . Lista de perguntas em detalhes

 function pessoa () {} pessoa.prototype = {construtor: pessoa, nome: 'jovem', idade: 18, amigos: ['big', 'porco'], SayName: function () {return this.name; }}; var p1 = new Person (); var p2 = nova pessoa (); p1.friends.push ('seg'); console.log (P1.friends); // ["Big", "Pig", "Mon"] Console.log (p2.friends); // ["Big", "Pig", "Mon"]

É precisamente porque as instâncias geralmente têm seus próprios atributos e os colocamos Person.prototype aqui; portanto, com a modificação de P1, toda a instância e protótipo são modificados. Em seguida, podemos usar uma combinação de modo construtor e modo de protótipo.

Use o modo construtor e o modo de protótipo em combinação

 função pessoa (nome, idade) {this.name = name; this.age = idade; this.friends = ['grande', 'porco']; } Person.prototype = {SayName: function () {return this.name; }}; var p1 = nova pessoa ('Young', 18); var p2 = nova pessoa ('vento', 78); p1.friends.push ('raganya'); console.log (p1.friends); // ["big", "pig", "raganya"] console.log (p2.friends); // ["big", "pig"] console.log (p1.friends == p2.friends); // False Console.Log (p1.SayName == P2.Saynam);

Atualmente, esse padrão é o método mais utilizado e reconhecido para criar tipos personalizados. é um modo padrão usado para definir tipos de referência.

Resumir

O exposto acima é sobre analisar a maneira como os objetos são criados no JavaScript. Os quatro métodos e suas vantagens e desvantagens foram resumidas por este artigo. Espero que possa ser útil para que todos aprendam a usar o JavaScript.