Escrita de classes no JavaScript

Sabemos que no JavaScript, não há conceito de classe. Todas as instâncias de objetos de classe herdam propriedades do mesmo objeto de origem, portanto, o objeto de origem é o núcleo da classe.

A classe é a abstração do objeto, e o objeto é a instância específica da classe. A classe é abstrata, não ocupa memória, e o objeto é específico, ocupa espaço de armazenamento. ——— Wikipédia

As necessidades do JavaScript no início eram muito simples, basicamente escritas como funções, e depois a escrita procedimental, mais tarde, lentamente introduzindo a思想的 desenvolvimento orientado a objetos, e então lentamente escritas como classes.

No JavaScript, a essência da escrita de classes é basicamente o construtor+原型. Abaixo, discutiremos algumas formas de escrita de classes no JavaScript:

Método do construtor

/**
* Classe Person: define uma pessoa, com a propriedade name e o método getName
  */
<script>
  function Person(name){
    this.name = name;
    this.getName = function(){
      return this.name;
    }
  }
  //Nós aqui instanciamos alguns objetos
  var p1 = new Person("trigkit4");
  var p2 = new Person("mike");
  console.log(p1 instanceof Person);//true
  console.log(p2 instanceof Person);//true
</script>

Pelo resultado de saída do console acima, podemos ver que p1e p2De fato, é uma instância de objeto da classe Person. O operador instanceof está do lado esquerdo do objeto da classe a ser verificada, e do lado direito é o construtor da classe. Aqui, instanceof é usado para verificar o objeto p1Se pertence à classe Person.

A vantagem deste método é que podemos construir instâncias de objetos diferentes com base em parâmetros, a desvantagem é que toda vez que construímos uma instância de objeto, geramos o método getName, causando desperdício de memória.

Podemos usar uma função externa para substituir o método de classe, alcançando que cada objeto compartilhe o mesmo método. A classe reformulada é:

//Função externa
<script>
  function getName() {
    return this.name;
  }
  function Person(name){
    this.name = name;
    this.getName = getName;//
  }
</script>

Método de protótipo

<script>
  function Person(){};
  Person.prototype.name = "trigkit"4";//Os atributos da classe estão todos no prototype
  Person.prototype.getName = function(){
    return " Eu sou " + this.name;
  }
  var p1 = new Person();
  var p2 = new Person();
  console.log(p1.name);//trigkit4
  console.log(p2.getName());//Eu sou trigkit4
</script>

A desvantagem do método de protótipo é que não é possível construir instâncias de objetos através de parâmetros (geralmente cada objeto tem atributos diferentes), a vantagem é que todas as instâncias de objetos compartilham o método getName (em comparação com o método de construtor), sem causar desperdício de memória.

Construtor+Método de protótipo
Tomando os pontos fortes das duas primeiras:
a) Definir atributos de classe (campos) usando construtores.
b) Definir métodos de classe usando o estilo de protótipo.

<script>
  function Person(name){
    this.name = name;
  }
  //As características do protótipo permitem que as instâncias de objetos compartilhem o método getName
  Person.prototype.getName = function(){
    return " Eu sou " + this.name;
  }
</script>

Desta forma, podemos construir objetos com diferentes atributos e também permitir que as instâncias de objetos compartilhem métodos, sem causar desperdício de memória.

Para que o código JavaScript seja mais compacto, movemos o código do método prototype para dentro do bloco de chaves de function Person.

<script>
  function Person(name){
    this.name = name;
    Person.prototype.getName = function(){
      return name;//Não é aconselhável usar this.name
    }
  }
  var p1 = new Person('trigkit"4);
  console.log(p1.getName());//trigkit4
</script>

Aqui, precisamos saber algumas formas de definir classes, além do construtor mencionado acima, temos:

Método Object.create()
Usando este método, "classe" é um objeto, não uma função.

 var Person = {
    name : "trigkit"4"
    age : 21,
    run: function(){
      alert("Eu gosto de correr");
    }
  }

Em seguida, crie diretamente a instância usando Object.create(), sem a necessidade de usar new.

var p1 = Object.create(Person);
  alert(p1.age);//21
  p1.run();//Eu gosto de correr

Esse método é mais simples que o "método construtor", mas não pode implementar atributos e métodos privados, e os objetos de instância não podem compartilhar dados, o que não é uma simulação completa da classe.

Método createNew()
Esse método não requer o uso de this e prototype. A prática é usar um objeto para simular uma classe, definir um construtor createNew() dentro da classe, definir o objeto de instância dentro de createNew() e retornar esse objeto de instância.

<script>
  var Person = {
    createNew : function () {
      var person = {};
      person.name = "trigkit4";
      person.run = function(){
        alert("Eu gosto de correr");
      };
      return person;
    }
  }
</script>

Quando usar, chame o método createNew() para obter o objeto de instância.

 var p1 = Person.createNew();
  p1.run();//Eu gosto de correr

Essa escrita é realmente muito semelhante à escrita de literais de objeto, só que uma usa vírgulas e a outra usa pontos-e-vírgulas.

Isso é tudo o que há no artigo. Espero que ajude no seu aprendizado e que você apoie o tutorial Yell.

Declaração: O conteúdo deste artigo foi extraído da Internet, pertence ao respectivo proprietário. O conteúdo foi contribuído e carregado voluntariamente pelos usuários da Internet. Este site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidades legais relacionadas. Se você encontrar conteúdo suspeito de violação de direitos autorais, por favor, envie um e-mail para: notice#oldtoolbag.com (ao enviar e-mail, substitua # por @ para denunciar e forneça provas relevantes. Caso seja confirmado, o site deletará imediatamente o conteúdo suspeito de violação de direitos autorais.)