Ein tiefgreifendes Verständnis der vielen Möglichkeiten, wie JavaScript Objekte erstellt, und ihrer Vor- und Nachteile

Dieser Artikel stellt hauptsächlich die verschiedenen Möglichkeiten und Vor- und Nachteile von JavaScript zum Erstellen von Objekten vor Es werden hauptsächlich 5 Möglichkeiten vorgestellt mehr Weiter

Vorne geschrieben

In diesem Artikel werden verschiedene Möglichkeiten zum Erstellen von Objekten sowie deren Vor- und Nachteile erläutert.

Aber Hinweis:

Dieser Artikel ist eher eine Notiz, weil „JavaScript Advanced Programming“ so gut geschrieben ist!

1. Fabrikmuster

function createPerson(name) {
  var o = new Object();
  o.name = name;
  o.getName = function () {
    console.log(this.name);
  };

  return o;
}

var person1 = createPerson('kevin');

Nachteile: Das Objekt kann nicht erkannt werden, da alle Instanzen auf einen Prototyp verweisen

2. KonstruktorMuster

function Person(name) {
  this.name = name;
  this.getName = function () {
    console.log(this.name);
  };
}

var person1 = new Person('kevin');

Vorteile: Instanzen können als spezifischer Typ identifiziert werden

Nachteile: Jedes Mal wird eine Instanz erstellt , jede Methode muss einmal erstellt werden

2.1 Konstruktormusteroptimierung

function Person(name) {
  this.name = name;
  this.getName = getName;
}

function getName() {
  console.log(this.name);
}

var person1 = new Person('kevin');

Vorteile: Lösen Sie das Problem, dass jede Methode neu erstellt werden muss

Nachteile: Wie heißt Kapselung...

3. Prototyp-Modus

function Person(name) {

}

Person.prototype.name = 'keivn';
Person.prototype.getName = function () {
  console.log(this.name);
};

var person1 = new Person();

Vorteile: Die Methode wird nicht neu erstellt Erstellen

Nachteile: 1. Alle Eigenschaften und Methoden werden gemeinsam genutzt 2. Parameter können nicht initialisiert werden

3.1 Optimierung des Prototypmodus

function Person(name) {

}

Person.prototype = {
  name: 'kevin',
  getName: function () {
    console.log(this.name);
  }
};

var person1 = new Person();

Vorteile: bessere Kapselung

Nachteile: Prototyp neu geschrieben und Konstruktorattribut verloren gegangen

3.2 Optimierung des Prototypmodus

function Person(name) {

}

Person.prototype = {
  constructor: Person,
  name: 'kevin',
  getName: function () {
    console.log(this.name);
  }
};

var person1 = new Person();

Vorteile: Die Instanz kann ihren Konstruktor über das Konstruktorattribut finden

Nachteile: Der Prototypmodus hat immer noch die Nachteile

4 Konstrukteursmuster und Prototypenmuster sind zwei Schwerter in einem.

function Person(name) {
  this.name = name;
}

Person.prototype = {
  constructor: Person,
  getName: function () {
    console.log(this.name);
  }
};

var person1 = new Person();

Hinweis: Bei Verwendung des dynamischen Prototypmodus können Sie den Prototyp nicht mit Objektliteralen überschreiben

function Person(name) {
  this.name = name;
  if (typeof this.getName != "function") {
    Person.prototype.getName = function () {
      console.log(this.name);
    }
  }
}

var person1 = new Person();

function Person(name) {
  this.name = name;
  if (typeof this.getName != "function") {
    Person.prototype = {
      constructor: Person,
      getName: function () {
        console.log(this.name);
      }
    }
  }
}
 
var person1 = new Person('kevin');
var person2 = new Person('daisy');
 
// 报错 并没有该方法
person1.getName();
 
// 注释掉上面的代码，这句是可以执行的。
person2.getName();

Sehen wir uns die Implementierungsschritte von new an:

Erstellen Sie zuerst ein neues Objekt

1. Richten Sie dann den Prototyp des Objekts auf Person .prototyp

2. Dann gibt Person.apply(obj)

3. dieses Objekt zurück

4. Beachten Sie dies Überprüfen Sie zu diesem Zeitpunkt die Implementierungsschritte von apply. Zu diesem Zeitpunkt wird der Inhalt der if-Anweisung ausgeführt. Beachten Sie, dass das Prototypattribut des Konstruktors auf den Prototyp der Instanz verweist Methode zum direkten Überschreiben von Person.prototype. Der Wert des Prototyps der Instanz person1 zeigt weiterhin auf den vorherigen Prototyp, nicht auf Person.prototype. Der vorherige Prototyp hatte keine getName-Methode, daher wurde ein Fehler gemeldet!

Wenn Sie Code nur wörtlich schreiben möchten, können Sie Folgendes versuchen:

5.1 Parasitäres Konstruktormuster

function Person(name) {
  this.name = name;
  if (typeof this.getName != "function") {
    Person.prototype = {
      constructor: Person,
      getName: function () {
        console.log(this.name);
      }
    }
 
    return new Person(name);
  }
}
 
var person1 = new Person('kevin');
var person2 = new Person('daisy');
 
person1.getName(); // kevin
person2.getName(); // daisy

Parasitäres Konstruktormuster, ich persönlich denke, es sollte so gelesen werden:

function Person(name) {
 
  var o = new Object();
  o.name = name;
  o.getName = function () {
    console.log(this.name);
  };
 
  return o;
 
}
 
var person1 = new Person('kevin');
console.log(person1 instanceof Person) // false
console.log(person1 instanceof Object) // true

Mit anderen Worten, unter dem Deckmantel eines Konstruktors versuchen Sie, etwas wie ein Schaf über den Kopf eines anderen zu verkaufen. Sie sehen, die mit „instanceof“ erstellte Instanz kann nicht auf den Konstruktor verweisen!

Diese Methode kann unter besonderen Umständen angewendet werden. Wenn wir beispielsweise ein spezielles

mit zusätzlichen Methoden erstellen möchten, aber den

-Konstruktor nicht direkt ändern möchten, können wir so schreiben:

Sie werden feststellen, dass das sogenannte parasitäre Konstruktormuster beim Erstellen von Objekten ein neues verwendet als das Fabrikmuster. Tatsächlich sind die Ergebnisse beider Muster gleich.

function SpecialArray() {
  var values = new Array();
 
  for (var i = 0, len = arguments.length; i len; i++) {
    values.push(arguments[i]);
  }
 
  values.toPipedString = function () {
    return this.join("|");
  };
  return values;
}
 
var colors = new SpecialArray('red', 'blue', 'green');
var colors2 = SpecialArray('red2', 'blue2', 'green2');
 
 
console.log(colors);
console.log(colors.toPipedString()); // red|blue|green
 
console.log(colors2);
console.log(colors2.toPipedString()); // red2|blue2|green2

Verwenden Sie diesen Modus nicht, wenn andere Modi verwendet werden können.

Aber es ist erwähnenswert, dass die

im obigen Beispiel:

ersetzt werden kann durch:

for (var i = 0, len = arguments.length; i len; i++) {
  values.push(arguments[i]);
}

5.2 Stabiles Konstruktormuster

values.push.apply(values, arguments);

Das sogenannte sichere Objekt bezieht sich auf Es handelt sich um ein Objekt, das keine öffentlichen Eigenschaften hat und dessen Methoden nicht
verweisen

function person(name){
  var o = new Object();
  o.sayName = function(){
    console.log(name);
  };
  return o;
}

var person1 = person('kevin');

person1.sayName(); // kevin

person1.name = "daisy";

person1.sayName(); // kevin

console.log(person1.name); // daisy

Es gibt zwei Unterschiede zum parasitären Konstruktormuster:

1. Die neu erstellte Instanzmethode verweist nicht darauf

2. Verwendet nicht new Operatorruft Konstruktor auf

Sichere Objekte eignen sich am besten für einige sichere Umgebungen.

Das sichere Konstruktormuster ist dasselbe wie das Fabrikmuster und kann den Typ des Objekts nicht identifizieren.

Das obige ist der detaillierte Inhalt vonEin tiefgreifendes Verständnis der vielen Möglichkeiten, wie JavaScript Objekte erstellt, und ihrer Vor- und Nachteile. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!