Scrittura di classi in JavaScript

Sappiamo che in JavaScript non c'è il concetto di classe. Tutte le istanze degli oggetti della classe derivano le proprietà dallo stesso oggetto prototipo, quindi l'oggetto prototipo è il nucleo della classe.

La classe è l'astrazione dell'oggetto, mentre l'oggetto è l'istanza concreta della classe. La classe è astratta e non utilizza memoria, mentre l'oggetto è concreto e utilizza spazio di archiviazione.——-Wikipedia

Le esigenze di JavaScript nelle prime fasi erano molto semplici, erano scritte come funzioni, poi il metodo a orientamento procedurale, e poi gradualmente introdotti i concetti di sviluppo orientato agli oggetti, infine scritti come classi.

In JavaScript, l'essenza di una classe è基本上是 costruttore+prototipo. Di seguito, esamineremo alcune scritture di classe in JavaScript:

Metodo costruttore

/**
* La classe Person: definisce una persona, con l'attributo name e il metodo getName
  */
<script>
  function Person(name) {
    this.name = name;
    this.getName = function(){
      return this.name;
    }
  }
  //In questo punto istanziamo alcuni oggetti
  var p1 = new Person("trigkit4");
  var p2 = new Person("mike");
  console.log(p1 instanceof Person);//true
  console.log(p2 instanceof Person);//true
</script>

Come可知从上面的控制台输出结果，p1和p2确实是类Person oggetti istanziati. L'operatore instanceof è usato per verificare se l'oggetto p1 appartiene alla classe Person.

I vantaggi di questo metodo sono: possiamo costruire istanze di oggetti diverse in base ai parametri, ma il difetto è che ogni volta che costruiamo un'istanza dell'oggetto, viene generato il metodo getName, causando uno spreco di memoria.

Possiamo utilizzare una funzione esterna per sostituire il metodo della classe, raggiungendo la condivisione della stessa funzione da parte di ogni oggetto. La classe riscritta è la seguente:

// Funzione esterna
<script>
  function getName() {
    return this.name;
  }
  function Person(name) {
    this.name = name;
    this.getName = getName;
  }
</script>

Modo prototipale

<script>
  function Person() {};
  Person.prototype.name = "trigkit4"; // Tutte le proprietà della classe sono collocate sul prototype
  Person.prototype.getName = function() {
    return "I'm " + this.name;
  }
  var p1 = new Person();
  var p2 = new Person();
  console.log(p1.name); // trigkit4
  console.log(p2.getName()); // I'm trigkit4
</script>

Il svantaggio del metodo prototipale è che non è possibile costruire istanze di oggetti tramite parametri (normalmente le proprietà di ogni oggetto sono diverse), ma il vantaggio è che tutti gli oggetti istanziati condividono il metodo getName (rispetto al metodo costruttore), senza causare sprechi di memoria.

Modo costruttore + prototipale
Prendere i vantaggi delle due precedenti modalità:
a、Definire le proprietà della classe utilizzando il costruttore (campi).
b、Definire i metodi della classe utilizzando il metodo prototipale.

<script>
  function Person(name) {
    this.name = name;
  }
  // Le caratteristiche del prototipo permettono agli oggetti istanziati di condividere il metodo getName
  Person.prototype.getName = function() {
    return "I'm " + this.name;
  }
</script>

In questo modo, possiamo costruire oggetti con proprietà diverse e far condividere i metodi agli oggetti istanziati, evitando sprechi di memoria.

Per rendere il codice JavaScript più compatto, spostiamo il codice del metodo prototype all'interno del corpo della funzione Person.

<script>
  function Person(name) {
    this.name = name;
    Person.prototype.getName = function() {
      return name; // Non è consigliabile utilizzare this.name
    }
  }
  var p1 = new Person('trigkit4');
  console.log(p1.getName()); // trigkit4
</script>

Qui, dobbiamo conoscere diversi metodi di definizione della classe, oltre a quello sopra menzionato costruttore, ci sono anche:

Metodo Object.create()
Con questo metodo, "classe" è un oggetto, non una funzione.

 var Person = {
    name : "trigkit4",
    age : 21,
    run: function() {
      alert("Mi piace correre");
    }
  }

Poi, utilizzare Object.create() per generare l'istanza, senza la necessità di new.

var p1 = Object.create(Person);
  alert(p1.age); // 21
  p1.run(); // Mi piace correre

Questo metodo è più semplice rispetto al "metodo costruttore", ma non può implementare attributi e metodi privati, e le istanze oggetto non possono condividere dati, la simulazione della "classe" non è completa.

Metodo createNew()
Questo metodo non richiede l'uso di this e prototype, l'approccio è utilizzare un oggetto per simulare una classe, quindi definire un costruttore createNew() nella classe, quindi definire l'oggettoistanza nell'createNew(), e restituire questa oggettoistanza come valore di ritorno.

<script>
  var Person = {
    createNew : function () {
      var person = {};
      person.name = "trigkit4";
      person.run = function(){
        alert("Mi piace correre");
      };
      return person;
    }
  }
</script>

Quando si utilizza, chiamare il metodo createNew() per ottenere l'oggettoistanza.

 var p1 = Person.createNew();
  p1.run(); // Mi piace correre

Questo modo di scrittura è molto simile a quello delle espressioni letterali di oggetti, ma uno è separato da virgola e l'altro da punto e virgola.

Questo è tutto il contenuto dell'articolo, speriamo che sia utile per la tua apprendimento, e speriamo che tutti sosteniate la guida tutorial.

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, il copyright spetta ai rispettivi autori, il contenuto è stato contribuito e caricato dagli utenti di Internet autonomamente, questo sito non detiene i diritti di proprietà, non è stato sottoposto a elaborazione editoriale umana e non assume responsabilità per le relative responsabilità legali. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una e-mail a notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, questo sito eliminerà immediatamente il contenuto sospetto di violazione del copyright.