Explicação detalhada de seis maneiras de definir classes por JS

No desenvolvimento do front-end, geralmente é necessário definir as classes JS. Então, em JavaScript, existem várias maneiras de definir classes e quais são as diferenças? Este artigo explica as seis maneiras seguintes de definir as classes JS (descrição do caso):

1. Método da fábrica

 function car () {var ocar = new Object; ocar.color = "blue"; ocar.doors = 4; ocar.showcolor = function () {document.write (this.color)}; retorna ocar;} var car1 = car (); var car2 = car2 = car2 = ();

Quando essa função é chamada, um novo objeto é criado e todas as propriedades e métodos são atribuídos. Use esta função para criar 2 objetos com exatamente as mesmas propriedades.

Obviamente, você pode modificar esse método passando parâmetros para ele.

 function Car(color,door){var ocar = new Object;ocar.color = color;ocar.doors = door;ocar.showColor = function(){document.write(this.color)};return ocar;}var car1 = Car("red",4);var car2 = Car("blue",4);car1.showColor() // saída: "Red" car2.showcolor () // saída: "azul"

Agora você pode obter objetos com valores diferentes passando parâmetros diferentes para a função.

No exemplo anterior, cada vez que o carro da função () é chamado, o showColor () é criado, o que significa que cada objeto possui seu próprio método ShowColor ().

Mas, de fato, cada objeto compartilha a mesma função. Embora um método possa ser definido fora da função, apontando as propriedades da função para o método.

 Função ShowColor () {alert (this.color);} function car () {var ocar = new Object (); ocar.color = color; ocar.doors = Door; ocar.showcolor = ShowColor; retorna ocar;}

Mas isso não parece um método de função.

2. Método construtor

O método construtor é tão simples quanto o método da fábrica, como mostrado abaixo:

 function carro (cor, porta) {this.color = cor; this.doors = porta; this.showcolor = function () {alert (this.color)};} var car1 = novo ("vermelho", 4); var car2 = novo ("azul", 4);

Você pode ver que o método do construtor não cria objetos dentro da função e a palavra -chave que é usada. Porque um objeto foi criado ao chamar o construtor, e isso só pode ser usado para acessar as propriedades do objeto dentro da função.

Agora use novo para criar objetos, parece assim! Mas é o mesmo que a fábrica. Cada chamada cria seu próprio método para o objeto.

3. Método do protótipo

Este método aproveita o atributo protótipo do objeto. Primeiro, crie o nome da classe com uma função vazia e, em seguida, todos os atributos e métodos são atribuídos ao atributo do protótipo.

 function car () {} car.prototype.color = "vermelho"; car.prototype.doors = 4; car.prototype.showcolor = function () {alert (this.color);} var car1 = novo car (); var car2 = novo ();

Neste código, uma função vazia é definida pela primeira vez e, em seguida, as propriedades do objeto são definidas através do atributo protótipo. Quando essa função é chamada, todas as propriedades do protótipo serão atribuídas ao objeto a ser criado imediatamente. Todos os objetos nesta função armazenam ponteiros para exibir (), que sintaticamente parece pertencer ao mesmo objeto.

No entanto, essa função não possui parâmetros e o atributo não pode ser inicializado pela passagem de parâmetros. O valor padrão do atributo deve ser alterado após a criação do objeto.

Um problema muito sério com o método do protótipo é que quando o atributo aponta para um objeto, como uma matriz.

 function car () {} car.prototype.color = "vermelho"; car.prototype.doors = 4; car.prototype.arr = new Array ("a", "b"); car.prototype.showcolor = function () {alert (this.color);} var1 = carones; Car (); car1.arr.push ("cc"); alerta (car1.arr); //output:aa.bb,cclert(car2.arr); // Saída: AA, BB, CC

Aqui, devido ao valor de referência da matriz, ambos os objetos do carro apontam para a mesma matriz; portanto, quando o valor é adicionado no CAR1, você também pode vê -lo no CAR2.

Union é um método que pode criar objetos como outras linguagens de programação usando o construtor/protótipo. É um método que usa construtores para definir propriedades não funcionais de objetos e usa protótipos para definir objetos.

 function carro (cor, porta) {this.color = cor; this.Doors = Door; this.arr = new Array ("aa", "bb");} car.prototype.showcolor () {alert (this.color);} var car1 = novo ("vermelho", 4); var car2 = novo Carro ("azul", 4); car1.arr.push ("cc"); alerta (car1.arr); //output:aa.bb,ccalert(car2.arr); // saída: aa, bb

5. Método de protótipo dinâmico

O método de protótipo dinâmico é semelhante ao método de construtor/protótipo misto. A única diferença é a posição dada ao método do objeto.

 function carro (cor, porta) {this.color = cor; this.Doors = Door; this.arr = new Array ("aa", "bb"); if (typeof car._initialized == "indefinido") {car.prototype.showcolor = function () {alert ") {car.b.};

O método de protótipo dinâmico é usar um sinalizador para determinar se o protótipo foi atribuído um método. Isso garante que o método seja criado apenas uma vez

6. Método de fábrica mista

Seu professor de propósito cria um construtor falso que retorna apenas novas instâncias de outro objeto.

 function car () {var ocar = new Object (); ocar.color = "vermelho"; ocar.doors = 4; ocar.showcolor = function () {alert (this.color)}; retornar ocar;}

Ao contrário do método da fábrica, esse método usa o novo operador.

Os acima são todos os métodos de criação de objetos. O método mais utilizado é o método do construtor/protótipo híbrido, e o método de protótipo dinâmico também é muito popular. Funcionalmente equivalente ao método construtor/protótipo.

A explicação detalhada acima das seis maneiras de definir as classes JS é todo o conteúdo que compartilho com você. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.