Analyse verschiedener Modi zum Erstellen von Objekten in Javascript (grafisches Tutorial)

Jetzt bringe ich Ihnen eine Analyse verschiedener Muster zum Erstellen von Objekten in JavaScript. Jetzt teile ich es mit Ihnen und gebe es als Referenz

Erstellung von Objekten in Javascript

•Werksmuster

• Konstruktormuster

• Prototypmuster

• Konstruktor- und Prototypmuster kombinieren

• Dynamisches Prototypmuster

Die meisten objektorientierten Sprachen verfügen über das Konzept einer Klasse, durch die mehrere Objekte mit denselben Methoden und Eigenschaften erstellt werden können. Obwohl JavaScript technisch gesehen eine objektorientierte Sprache ist, verfügt JavaScript nicht über das Konzept von Klassen, alles ist ein Objekt. Jedes Objekt ist eine Instanz eines bestimmten Referenztyps, der über einen vorhandenen Referenztyp erstellt wird. Der Referenztyp kann nativ oder angepasst sein. Zu den nativen Referenztypen gehören: Objekt, Array, Daten, RegExp und Funktion. ! Ein Referenztyp ist eine Datenstruktur, die Daten und Funktionen organisiert und oft als Klasse bezeichnet wird. In JavaScript, dem das Konzept von Klassen fehlt, besteht das Problem, das gelöst werden muss, darin, wie Objekte effizient erstellt werden können.

1.1.0. Allgemeine Methode zum Erstellen von Objekten

var person = {}; //对象字面量表示，等同于var person = new Objcect();
person.name = 'evansdiy';
person.age = '22';
person.friends = ['ajiao','tiantian','pangzi'];
person.logName = function() {
  console.log(this.name);
}

Basierend auf dem Objektreferenztyp wird ein Objekt erstellt, das vier Eigenschaften enthält, von denen eine eine ist Verfahren. Wenn Sie viele Instanzen personenähnlicher Objekte benötigen, wird es eine Menge doppelten Code geben.

1.1.1. Factory-Muster

Erstellen Sie ein Objekt über eine Funktion, die die Details des Objekts enthalten kann, und geben Sie dann das Objekt zurück.

function person(name,age,friends) {

  var o = {
    name: name,
    age: age,
    friends: friends,
    logName: function() {
      console.log(this.name);
    }
  };

  return o;

}

var person1 = person('Evansdiy','22',['ajiao','tiantian','pangzi']);

Jedes Mal, wenn die Personenfunktion aufgerufen wird, wird über das Objekt o innerhalb der Funktion ein neues Objekt erstellt und dann zurückgegeben. Abgesehen davon gibt es kein anderes internes Objekt o, das zum Erstellen neuer Objekte vorhanden ist Zweck. Darüber hinaus ist es unmöglich, den Typ des durch das Factory-Muster erstellten Objekts zu bestimmen.

1.1.2. Konstruktormuster

function Person(name,age,job) {

  this.name = name;
  this.age = age;
  this.job = job;
  this.logName = function() {
    console.log(this.name);
  }

}

//通过new操作符创建Person的实例
var person1 = new Person('boy-a','22','worker');

var person2 = new Person('girl-b','23','teacher');

person1.logName(); //boy-a

person2.logName(); //girl-a

Wenn Sie das Fabrikmuster vergleichen, können Sie feststellen, dass hier keine Notwendigkeit besteht, Zwischenobjekte zu erstellen, und dass es keine Rückgabe gibt. Darüber hinaus kann die Instanz des Konstruktors als ein bestimmter Typ identifiziert werden, wodurch das Problem der Objektidentifizierung gelöst wird (durch Überprüfen der Konstruktoreigenschaften der Instanz oder Verwenden des Operators „Instanceof“, um zu überprüfen, ob die Instanz über einen bestimmten Konstruktor erstellt wurde). .

console.log(person1.constructor == Person);//konstruktor befindet sich im Konstruktorprototyp und zeigt auf den Konstruktor, und das Ergebnis ist wahr

console.log(person1 instanceof Person);//Verwenden Sie den Operator „Instanceof“, um zu bestimmen, ob Person1 eine Instanz des Konstruktors „Person“ ist. Tatsächlich wird die Methode „logName“ für jede Instanz neu erstellt. Wenn die Methoden durch Instanziierung erstellt werden und nicht gleich sind, erhält der folgende Code den Wert „false“:

console.log(person1.logName == person2.logName);//false wir können die Methode außerhalb des Konstruktors verschieben (zur globalen Funktion werden), um dieses Problem zu lösen:

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

function logAge() {
  console.log(this.age);
}

Allerdings kann die im globalen Kontext erstellte globale Funktion tatsächlich nur von der von Person erstellten Instanz aufgerufen werden, was bei vielen Methoden etwas falsch ist Sie müssen einzeln definiert werden. Fehlende Kapselung.

1.1.3. Prototypmodus

Jede Funktion in JavaScript enthält einen Zeiger auf das Prototypattribut (die meisten Browser können auf das interne Attribut __proto__ zugreifen), die Prototypeigenschaft ist ein Objekt, das Eigenschaften und Methoden enthält, die von allen von einem bestimmten Referenztyp erstellten Instanzen gemeinsam genutzt werden.

function Person() {}

Person.name = 'evansdiy';

Person.prototype.friends = ['ajiao','jianjian','pangzi'];

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

var person1 = new Person();

person1.logName();//'evansdiy'

Der obige Code führt Folgendes aus:

1. Definiert eine Konstruktorfunktion Person. Die Person-Funktion erhält automatisch ein Prototypattribut, das standardmäßig nur ein Konstruktorattribut enthält, das auf Person verweist. ;

2. Fügen Sie über Person.prototype drei Attribute hinzu, von denen eines eine Methode ist.

3. !

Was hier beachtet werden muss, ist der Aufrufprozess der logName()-Methode:

1. Durchsuchen Sie die logName()-Methode in der Person1-Instanz und stellen Sie fest, dass es keine solche Methode gibt. Verfolgen Sie es also bis zum Prototyp von Person1

2. Finden Sie die Methode logame() auf dem Prototyp von Person1, sodass der Aufruf dieser Methode auf einem solchen Suchvorgang basieren kann Instanz vom Zugriff auf den Prototyp abhält, indem die gleichnamige Eigenschaft im Prototyp auf der Instanz definiert wird. Dabei ist zu beachten, dass dadurch nicht die gleichnamigen Attribute auf dem Prototyp gelöscht werden verhindert nur den Zugriff auf die Instanz.

var person2 = new Person();

person2.name = 'laocai'; Wenn wir die Attribute auf der Instanz nicht mehr benötigen, können wir sie über den Löschoperator löschen.

delete person2.name; Verwenden Sie eine for-in-Schleife, um alle Attribute aufzuzählen, auf die die Instanz zugreifen kann (unabhängig davon, ob das Attribut in der Instanz oder im Prototyp vorhanden ist):

for(i in person1) {
  console.log(i);
}

At the Gleichzeitig können Sie auch die Methode hasOwnProperty() verwenden, um festzustellen, ob eine Eigenschaft in der Instanz oder im Prototyp vorhanden ist. Nur wenn die Eigenschaft in der Instanz vorhanden ist, wird true zurückgegeben:

console.log(person1.hasOwnProperty('name'));//true！hasOwnProperty来自Object的原型，是javascript中唯一一个在处理属性时不查找原型链的方法。[via javascript秘密花园] 另外，也可以通过同时使用in操作符和hasOwnProperty()方法来判断某个属性存在于实例中还是存在于原型中：

console.log(('friends' in person1) && !person1.hasOwnProperty('friends'));先判断person1是否可以访问到friends属性，如果可以，再判断这个属性是否存在于实例当中（注意前面的!），如果不存在于实例中，就说明这个属性存在于原型中。 前面提到，原型也是对象，所以我们可以用对象字面量表示法书写原型，之前为原型添加代码的写法可以修改为：

Person.prototype = {

  name: 'evansdiy',
  friends: ['ajiao','jianjian','pangzi'],
  logName: function() {
    console.log(this.name);
  }

}

由于对象字面量语法重写了整个prototype原型，原先创建构造函数时默认取得的constructor属性会指向Object构造函数：

//对象字面量重写原型之后
console.log(person1.constructor);//Object不过，instanceof操作符仍会返回希望的结果：

//对象字面量重写原型之后
console.log(person1 instanceof Person);//true当然，可以在原型中手动设置constructor的值来解决这个问题。

Person.prototype = {

  constructor: Person,
  ......

}

如果在创建对象实例之后修改原型对象，那么对原型的修改会立即在所有对象实例中反映出来：

function Person() {};

var person1 = new Person();

Person.prototype.name = 'evansdiy';

console.log(person1.name);//'evansdiy'

实例和原型之间的连接仅仅是一个指针，而不是一个原型的拷贝，在原型实际上是一次搜索过程，对原型对象的所做的任何修改都会在所有对象实例中反映出来，就算在创建实例之后修改原型，也是如此。 如果在创建对象实例之后重写原型对象，情况又会如何？

function Person() {};

var person1 = new Person1();//创建的实例引用的是最初的原型

//重写了原型
Person.prototype = {
  friends: ['ajiao','jianjian','pangzi']
}

var person2 = new Person();//这个实例引用新的原型

console.log(person2.friends);

console.log(person1.friends);

以上代码在执行到最后一行时会出现未定义错误，如果我们用for-in循环枚举person1中的可访问属性时，会发现，里头空无一物，但是person2却可以访问到原型上的friends属性。 ！重写原型切断了现有原型与之前创建的所有对象实例的联系，之前创建的对象实例的原型还在，只不过是旧的。

//创建person1时，原型对象还未被重写，因此，原型对象中的constructor还是默认的Person()
console.log(person1.constructor);//Person()

//但是person2的constructor指向Object()
console.log(person2.constructor);//Object()

需要注意的是，原型模式忽略了为构造函数传递参数的过程，所有的实例都取得相同的属性值。同时，原型模式还存在着一个很大的问题，就是原型对象中的引用类型值会被所有实例共享，对引用类型值的修改，也会反映到所有对象实例当中。

function Person() {};

Person.prototype = {
  friends: ['ajiao','tiantian','pangzi']
}

var person1 = new Person();

var person2 = new Person();

person1.friends.push('laocai');

console.log(person2.friends);//['ajiao','tiantian','pangzi','laocai']

修改person1的引用类型值friends，意味着person2中的friends也会发生变化，实际上，原型中保存的friends实际上只是一个指向堆中friends值的指针（这个指针的长度是固定的，保存在栈中），实例通过原型访问引用类型值时，也是按指针访问，而不是访问各自实例上的副本（这样的副本并不存在）。

1.1.4.结合构造函数和原型模式创建对象

结合构造函数和原型模式的优点，弥补各自的不足，利用构造函数传递初始化参数，在其中定义实例属性，利用原型定义公用方法和公共属性，该模式应用最为广泛。

function Person(name,age) {

  this.name = name;
  this.age = age;
  this.friends = ['ajiao','jianjian','pangzi'];

}

Person.prototype = {

  constructor: Person,
  logName: function() {
    console.log(this.name);
  }

}

var person1 = new Person('evansdiy','22');

var person2 = new Person('amy','21');

person1.logName();//'evansdiy'

person1.friends.push('haixao');

console.log(person2.friends.length);//3

1.1.5.原型动态模式

原型动态模式将需要的所有信息都封装到构造函数中，通过if语句判断原型中的某个属性是否存在，若不存在（在第一次调用这个构造函数的时候），执行if语句内部的原型初始化代码。

function Person(name,age) {

  this.name = name;
  this.age = age;

  if(typeof this.logName != 'function') {
    Person.prototype.logName = function() {
      console.log(this.name);
    };
    Person.prototype.logAge = function() {
      console.log(this.age);
    };
  };

}

var person1 = new Person('evansdiy','22');//初次调用构造函数，此时修改了原型

var person2 = new Person('amy','21');//此时logName()方法已经存在，不会再修改原型

需要注意的是，该模式不能使用对象字面量语法书写原型对象（这样会重写原型对象）。若重写原型，那么通过构造函数创建的第一实例可以访问的原型对象不会包含if语句中的原型对象属性。

function Person(name,age) {

  this.name = name;
  this.age = age;

  if(typeof this.logName != 'function') {
    Person.prototype = {
      logName: function() {
        console.log(this.name);
      },
      logAge: function() {
        console.log(this.Age);
      }
    }
  };

}

var person1 = new Person('evansdiy','22');

var person2 = new Person('amy','21');

person2.logName();//'amy'

person1.logName();//logName()方法不存在

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

详细解读JavaScript设计模式开发中的桥接模式（高级篇）

详细解读在JavaScript中实现设计模式中的适配器模式的方法（图文教程）

设计模式中的facade外观模式在JavaScript开发中的运用（高级篇）

Das obige ist der detaillierte Inhalt vonAnalyse verschiedener Modi zum Erstellen von Objekten in Javascript (grafisches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!