Lernen Sie objektorientiertes Javascript und beherrschen Sie 9 Möglichkeiten zum Erstellen von Objekten_Javascript-Fähigkeiten

In diesem Artikel werden 9 Möglichkeiten zum Erstellen von Objekten in JavaScript als Referenz beschrieben. Der spezifische Inhalt lautet wie folgt:

【1】Verwenden Sie den Objektkonstruktor
[Nachteile] Die Verwendung derselben Schnittstelle zum Erstellen vieler Objekte führt zu einer Menge doppeltem Code

var person = new Object();
  person.name = "Nicholas";
  person.age = 29;
  person.job = "Software Engineer";
  person.sayName = function(){
  　　alert(this.name);
　　}

【2】Verwenden Sie Objektliterale
[Nachteile] Die Verwendung derselben Schnittstelle zum Erstellen vieler Objekte führt zu einer Menge doppeltem Code

var person = {
  name: "Nicholas",
  age : 29,
  job: "Software Engineer",
  sayName: function(){
    alert(this.name);
  }
};

【3】Fabrikmuster: Abstrahiert den Prozess der Erstellung spezifischer Objekte. Da in ECMAScript keine Klassen erstellt werden können, haben Entwickler eine Funktion erfunden, um die Details der Erstellung von Objekten mit einer bestimmten Schnittstelle zu kapseln.
[Nachteile] Es löst das Problem der Erstellung mehrerer ähnlicher Objekte, löst jedoch nicht das Problem der Objekterkennung

function createPerson(name,age,job){
  var o = new Object();
  o.name = name;
  o.age = age;
  o.job = job;
  o.sayname = function(){
    alert(this.name);
  }
  return o;
}
var person1 = createPerson('Nicholas',29,'software Engineer');
var person2 = createPerson('greg',27,'doctor');

【4】Konstruktormodus: Es wird kein Objekt explizit erstellt, Attribute und Methoden werden diesem Objekt direkt zugewiesen und es gibt keine Return-Anweisung
[Nachteile] Jede Methode muss auf jeder Instanz neu erstellt werden

function Person(name,age,job){
  this.name = name;
  this.age = age;
  this.jog = job;
  this.sayName = function(){
    alert(this.name);
  };
  //与声明函数在逻辑上是等价的
  //this.sayName = new Function('alert(this.name)');

}
var person1 = new Person("Nicholas",29,"software Engineer");
var person2 = new Person("Greg",27,"doctor");

【4.1】Konstruktor-Erweiterungsmodus: Funktionsdefinition außerhalb des Konstruktors übertragen
[Nachteil 1] Im globalen Bereich definierte Funktionen können tatsächlich nur von einem bestimmten Objekt aufgerufen werden, was den globalen Bereich seines Namens etwas unwürdig macht
[Nachteil 2] Wenn ein Objekt viele Methoden definieren muss, muss es viele globale Funktionen definieren. Dieser benutzerdefinierte Referenztyp hat überhaupt keine Kapselung

function Person(name,age,job){
  this.name = name;
  this.age = age;
  this.job = job;
  this.sayName = sayName;
}
function sayName(){
  alert(this.name);
}
var person = new Person('小火柴','20','student')
person.sayName();
console.log(Person);

【5】Prototypmuster: Jede von uns erstellte Funktion verfügt über ein Prototypattribut. Dieses Attribut ist ein Zeiger, der auf ein Objekt zeigt. Der Zweck dieses Objekts besteht darin, Informationen zu enthalten, die von allen Instanzen eines bestimmten Typs gemeinsam genutzt werden können. Eigenschaften und Methoden. Wenn Sie es wörtlich verstehen, ist Prototyp das Prototypobjekt der Objektinstanz, die durch den Aufruf des Konstruktors
erstellt wird

function Person(){
  Person.prototype.name = "Nicholas";
  Person.prototype.age = 29;
  Person.prototype.job = "software Engineer";
  Person.prototype.sayName = function(){
    alert(this.name);
  }
}
var person1 = new Person();
person1.sayName();//"Nicholas"
var person2 = new Person();
person2.sayName();//"Nicholas"
alert(person1.sayName == person2.sayName);//true

【5.1】Einfacherer Prototypmodus: Um unnötige Eingaben zu reduzieren und die Funktionalität des Prototyps besser visuell zu kapseln, schreiben Sie das gesamte Prototypobjekt mit einem Objektliteral neu, das alle Eigenschaften und Methoden enthält.
[Nachteil] Das Zurücksetzen der Konstruktor-Eigenschaft auf diese Weise führt dazu, dass ihr Attribut [[Enumerable]] auf true gesetzt wird. Die native Konstruktor-Eigenschaft ist standardmäßig nicht aufzählbar

function Person(){};
Person.prototype = {
  constructor : Person,
  name: "Nicholas",
  age: 29,
  job: "software Engineer",
  sayName : function(){
    alert(this.name);
  }
};

【5.2】Prototypmuster zur Lösung unzähliger Probleme

function Person(){};
Person.prototype = {
  name: "Nicholas",
  age: 29,
  job: "software Engineer",
  sayName : function(){
    alert(this.name);
  }
};
Object.defineProperty(Person.prototype,"constructor",{
  enumerable : false,
  value : Person
});

[Nachteil 1 des Prototypmusters] Durch das Überschreiben des Prototypobjekts wird die Verbindung zwischen dem vorhandenen Prototyp und der vorhandenen Objektinstanz unterbrochen, und sie verweisen weiterhin auf den ursprünglichen Prototyp.

function Person(){}
var friend = new Person();
Person.prototype = {
  constructor: Person,
  name: "Nicholas",
  age: 29,
  job: "Software Engineer",
  sayName: function(){
    alert(this.name);
  }
};
friend.sayName();//error

[Nachteil 2 des Prototypmusters] Das Problem der gemeinsamen Nutzung von Referenztypattributen ist im Vordergrund

function Person(){}
Person.prototype = {
  constructor: Person,
  name: "Nicholas",
  age: 29,
  job: "Software Engineer",
  friend : ["shelby","Court"],
  sayName: function(){
    alert(this.name);
  }
};
var person1 = new Person();
var person2 = new Person();
person1.friends.push("Van");
alert(person1.friends);//["shelby","Court","Van"];
alert(person2.friends);//["shelby","Court","Van"];
alert(person1.friends === person2.friends);//true

【6】Kombiniertes Muster: Die Kombination von Konstruktormuster und Prototypmuster ist die gebräuchlichste Methode zum Erstellen benutzerdefinierter Typen. Das Konstruktormuster wird zum Definieren von Instanzeigenschaften verwendet, während das Prototypmuster zum Definieren von Methoden und gemeinsamen Eigenschaften verwendet wird. Dieser gemischte Modus unterstützt auch die Übergabe von Parametern an den Konstruktor und ist ein Standardmodus zum Definieren von Referenztypen

function Person(name,age,job){
  this.name = name;
  this.age = age;
  this.job = job;
  this.friends = ["shelby","Court"];
}
Person.prototype = {
  constructor: Person,
  sayName : function(){
    alert(this.name);
  }  
}
var person1 = new Person("Nicholas",29,"Software Engineer");
var person2 = new Person("Greg",27,"Doctor");
person1.friends.push("Van");
alert(person1.friends);// ["shelby","Court","Van"];
alert(person1.friends);// ["shelby","Court"];
alert(person1.friends === person2.friends);//false
alert(person1.sayName === person2.sayName);//true

【7】Dynamischer Prototypmodus: Kapseln Sie alle Informationen im Konstruktor und initialisieren Sie den Prototyp im Konstruktor (nur bei Bedarf), während Sie die Vorteile der Verwendung sowohl des Konstruktors als auch des Prototyps beibehalten. Mit anderen Worten: Sie können entscheiden, ob der Prototyp initialisiert werden soll, indem Sie prüfen, ob eine vorhandene Methode gültig ist.
[Hinweis] Bei Verwendung des dynamischen Prototypmodus können Objektliterale nicht zum Überschreiben des Prototyps verwendet werden. Wenn Sie den Prototyp überschreiben, während bereits eine Instanz erstellt wurde, unterbrechen Sie die Verbindung zwischen der vorhandenen Instanz und der neuen Instanz

function Person(name,age,job){
  //属性
  this.name = name;
  this.age = age;
  this.job = job;
  //方法
  if(typeof this.sayName != "function"){
    Person.prototype.sayName = function(){
      alert(this.name);
    };
  }
}
var friend = new Person("Nicholas",29,"Software Engineer");
friend.sayName();

[8] Parasitäres Konstruktormuster: Erstellen Sie eine Funktion, die nur den Code kapselt, der das Objekt erstellt, und dann das neu erstellte Objekt zurückgibt

function Person(name,age,job){
  var o = new Object();
  o.name = name;
  o.age = age;
  o.job = job;
  o.sayName = function(){
    alert(this.name);
  };
  return o;
}
var friend = new Person("Nicholas",29,"Software Engineer");
friend.sayName();//"Nicholas"

【Parasite Constructor Pattern Application】Erstellen Sie ein spezielles Array mit zusätzlichen Methoden. Da der Array-Konstruktor nicht direkt geändert werden kann, kann dieses Muster verwendet werden

function SpecialArray(){
  //创建数组
  var values = new Array();
  //添加值
  values.push.apply(values,arguments);
  //添加方法
  values.toPipedString = function(){
    return this.join('|');
  };
  //返回数组
  return values;
}
var colors = new SpecialArray("red","blue","green");
alert(colors.toPipedString());//"red|blue|green"  

[9] Sicheres Konstruktormuster: Das sogenannte sichere Objekt bezieht sich auf ein Objekt, das keine öffentlichen Eigenschaften hat und dessen Methoden nicht darauf verweisen. Stabile Objekte werden am besten in einigen Sicherheitsumgebungen verwendet (die die Verwendung von this und new verbieten) oder um zu verhindern, dass Daten durch andere Anwendungen geändert werden.

function Person(name,age,job){
  //创建要返回的对象
  var o = new Object();
  //可以在这里定义私有变量和函数
  //添加方法
  o.sayName = function(){
    alert(name);
  };
  //返回对象
  return o;
}
//在稳妥模式创建的对象中，除了使用sayName()方法之外，没有其他方法访问name的值
var friend = Person("Nicholas",29,"Software Engineer");
friend.sayName();//"Nicholas"

Die oben genannten neun Möglichkeiten zum Erstellen von Objekten in JavaScript werden hoffentlich für das Lernen aller hilfreich sein.