7 Muster zum Erstellen von Objekten in JavaScript-js-Tutorial-php.cn

ECMA-262 definiert ein Objekt als: „Eine Sammlung ohne Attribute, deren Attribute Grundwerte, Objekte oder Funktionen enthalten können.“ Streng genommen entspricht dies der Aussage, dass ein Objekt eine Menge von Werten in Nr. ist konkrete Reihenfolge. Jede Eigenschaft oder Methode eines Objekts hat einen Namen, und jeder Name ist einem Wert zugeordnet. Aus diesem Grund können wir uns ECMAScript-Objekte als Hash-Tabellen vorstellen: nichts anderes als eine Reihe von Namenspaaren, deren Werte Daten oder Funktionen sein können.

Der einfachste Weg, ein benutzerdefiniertes Objekt zu erstellen, besteht darin, eine Instanz von Object zu erstellen und ihr dann Eigenschaften und Methoden hinzuzufügen, wie unten gezeigt:

var person = new Object();
person.name = "liubei";
person.age = 29;
person.job = "shayemuyou";

person.sayName = function(){
    alert(this.name);
}

Nach dem Login kopieren

Das obige Beispiel erstellt ein Objekt namens Person und fügt ihm drei Eigenschaften und eine Methode hinzu. Die Methode sayName() wird verwendet, um das Namensattribut anzuzeigen, und this.name wird als person.name analysiert. Frühe Entwickler verwendeten diesen Modus häufig zum Erstellen von Objekten Das obige Beispiel mit Objektliteral-Syntax kann wie folgt geschrieben werden:

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

Nach dem Login kopieren

Das Personenobjekt in diesem Beispiel ist dasselbe wie das vorherige Objekt und verfügt über dieselben Eigenschaften und Methoden.

Obwohl der Objektkonstruktor oder die Objektliteralmethode zum Erstellen eines einzelnen Objekts verwendet werden können, haben diese Methoden einen offensichtlichen Nachteil: Sie werden über dieselbe Schnittstelle erstellt Viele Objekte generieren viel wiederholten Code. Um dieses Problem zu lösen, begann man, eine Variante des Fabrikmusters zu verwenden.

1 Fabrikmuster

Das Fabrikmuster ist ein bekanntes Entwurfsmuster im Bereich der Softwareentwicklung. Dieses Muster 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 Objekterstellung mit einer bestimmten Schnittstelle zu kapseln, wie unten gezeigt:

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("wei",25,"software");
var person2 = createPerson("bu",25,"software");

Nach dem Login kopieren

Die Funktion createPerson() kann auf den akzeptierten Parametern basieren um ein Person-Objekt zu erstellen, das alle notwendigen Informationen enthält. Diese Funktion kann mehrmals aufgerufen werden und gibt jedes Mal ein Objekt zurück, das drei Eigenschaften und eine Methode enthält. Obwohl das Factory-Muster das Problem der Erstellung mehrerer ähnlicher Objekte löst, löst es nicht das Problem der Objektidentifizierung, also der Frage, um welchen Objekttyp es sich handelt.

2 Konstruktormuster

Native Konstruktoren wie Array und Object werden zur Laufzeit automatisch in der Ausführungsumgebung angezeigt. Darüber hinaus können wir benutzerdefinierte Konstruktoren erstellen, um Eigenschaften und Methoden benutzerdefinierter Typen zu definieren. Zum Beispiel können wir das vorherige Beispiel mit einem Konstruktor umschreiben:

function Person(name, age, job){    
this.name = name;    
this.age = age;    
this.job = job;    
this.sayName = function(){        
alert(this.name);    
}}
var person1 = new Person("wei",25,"software");
var person2 = new Person("bu",25,"software");

Nach dem Login kopieren

In diesem Beispiel ersetzt die Funktion Person() die Funktion createPerson(). Wir bemerken den Unterschied zwischen Person() und createPerson(). Der Unterschied ist:

Es erfolgt keine explizite Erstellung des Objekts
Weisen Sie diesem Objekt Eigenschaften und Methoden direkt zu
Es gibt keine Return-Anweisung

Außerdem sollten Sie auch beachten, dass der Funktionsname Person den Großbuchstaben P verwendet. Konventionell sollten Konstruktoren immer mit einem Großbuchstaben beginnen, und Nicht-Konstruktoren sollten immer mit einem Kleinbuchstaben beginnen. Dieser Ansatz ist aus anderen OO-Sprachen übernommen, hauptsächlich um ihn von anderen Funktionen in ECMAScript zu unterscheiden. Da der Konstruktor selbst ebenfalls eine Funktion ist, kann er lediglich Objekte erstellen.

Um eine Personeninstanz zu erstellen, müssen Sie den neuen Operator verwenden. Die obige Methode durchläuft die folgenden vier Schritte:

1. Erstellen Sie ein neues Objekt

2. Weisen Sie dem neuen Objekt den Bereich des Konstruktors zu (dieser zeigt also auf dieses neue Objekt).

3. Führen Sie den Code im Konstruktor aus

4. Geben Sie das neue Objekt zurück

Eine andere Instanz. Beide Objekte verfügen über ein Konstruktorattribut, das auf Person verweist. Wie folgt:

Das Konstruktorattribut eines Objekts wird zunächst zur Identifizierung des Objekttyps verwendet. Bei der Erkennung von Objekttypen ist der Instanzoperator jedoch zuverlässiger. Die in diesem Beispiel erstellten Objekte sind alle Instanzen des Object-Objekts und auch Instanzen des Person-Objekts. Dies kann durch den Instanzenoperator überprüft werden.

console.log(person1.constructor == Person);     //true
console.log(person2.constructor == Person);     //true
console.log(person1.constructor == Person);     //true
console.log(person2.constructor == Person);     //true

Nach dem Login kopieren

Das Erstellen eines benutzerdefinierten Konstruktors bedeutet, dass seine Instanz in Zukunft als spezifischer Typ identifiziert werden kann, und hier übertrifft das Konstruktormuster das Fabrikmuster. In diesem Beispiel sind Person1 und Person2 beide Instanzen von Object, weil alle Objekte von Object erben.

console.log(person1 instanceof Object);     //true
console.log(person1 instanceof Person);     //true
console.log(person2 instanceof Object);     //true
console.log(person2 instanceof Person);     //true

Nach dem Login kopieren

Das Hauptproblem des Konstruktors besteht darin, dass jede Methode auf der Instanz neu erstellt werden muss, was zu einer Speicherverschwendung führt. Im vorherigen Beispiel verfügen sowohl Person1 als auch Person2 über eine Methode namens sayName(), aber die beiden Methoden sind keine Instanzen derselben Funktion. Vergessen Sie nicht, dass Funktionen in ECMAScript auch Objekte sind. Jedes Mal, wenn Sie eine Funktion definieren, instanziieren Sie ein Objekt. Aus logischer Sicht kann der Konstruktor zu diesem Zeitpunkt wie folgt definiert werden:

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

Nach dem Login kopieren

从这个角度来看构造函数，更容易看明白每个Person实例都会包含一个不同的Function实例的本质。说明白些，会导致不同的作用域链和标识符解析，但是创建Function新实例的机制仍然是相同的。因此，不同实例上的同名函数是不相等的，以下代码可以证实这一点。

alert(person1.sayName == person2.sayName);  //false

Nach dem Login kopieren

然而，创建两个完成同样任务的Function实例的确没有必要；况且有this对象在，根本不用在执行代码前就把函数绑定到特定的对象上。因此，可以像下面这样，通过把函数定义转移到构造函数外部来解决这个问题。

function Person(name, age, job){    
this.name = name;    
this.age = age;    
this.job = job;    
this.sayName = sayName;}
function sayName(){    
alert(this.name);

Nach dem Login kopieren

这样做解决了多个函数解决相同问题的问题，但是有产生了新的问题，在全局作用域中实际上只被某个对象调用，这让全局对象有点名不副实。更让人无法接受的是：如果对象需要定义很多方法，那么就要定义很多全局函数，于是我们这个自定义的引用类型就丝毫没有封装性可言了。好在这些问题可以使用原型模式来解决。

3 原型模式

我们创建的每个函数都有一个prototype（原型）属性，这个属性是一个指针，指向一个对象，而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。使用原型对象的实例就是让所有实例共享它所包含的属性和方法。换句话说，不必在构造函数中定义对象的实例信息，而是可以将这些信息直接添加到原型对象中，如下所示：

function Person(){
}
Person.prototype.name = "wei";
Person.prototype.age = 27;
Person.prototype.job = "Software";
Person.prototype.sayName = function(){
    alert(this.name);
}

var person1 = new Person();
person1.sayName();      //"wei"

var person2 = new Person();
person2.sayName();      //"wei"

alert(person1.sayName == person2.sayName);

Nach dem Login kopieren

在此，我们将sayName()方法和所有的属性直接添加在了Person的prototype属性中，构造函数变成了空函数。即便如此，我们仍然可以通过构造函数来创建新对象，而且新对象还会具有相同的属性和方法。但是与构造函数不同的是，新对象的这些属性和方法是由所有实例共享的。换句话说，person1和person2访问的都是同一组属性和同一个sayName()函数。要理解原型模式的工作原理，就必须先理解ECMAScript中原型对象的性质。

原型对象的本性由于篇幅太长将会在下一章节详细分析。上面我们说了原型模式的好处，接下来我们来看一下原型模式的缺点。原型模式省略了为构造函数传递参数的这一环节，结果所有实例在默认情况下都具有相同的属性值。这会在某些程度上带来一种不便，这并不是原型模式最大的问题，因为如果我们想为一个通过原型模式创建的对象添加属性时，添加的这个属性就会屏蔽原型对象的保存的同名属性。换句话说，就是添加的这个属性会阻止我们去访问原型中的属性，但并不会改变原型中的属性。

原型模式最大的问题是由其共享的本质所导致的。原型中所有的属性被很多实例共享，这种共享对函数非常合适，对包含基本值的属性也说的过去，但是对引用类型的属性值来说问题就比较突出了，下面我们来看一个例子：

function Person(){}Person.prototype = {    
constructor:Person,    
name:"wei",    
age:29,    
friends:["乾隆","康熙"],    
sayName:function(){        
alert(this.name);    
}}
var person1 = new Person();
var person2 = new Person();
person1.friends.push("嬴政");
console.log(person1.friends);   //["乾隆","康熙","嬴政"]
console.log(person2.friends);   //["乾隆","康熙","嬴政"]
console.log(person1.friends === person2.friends);   //true

Nach dem Login kopieren

上面的例子中，Person.prototype对象有一个名为friends的属性，该属性包含一个字符串数组。然后创建了两个Person的实例，接着修改person1.friends引用的数组，向数组中添加一个字符串，由于数组存在于Person.prototype中而不是person1中，所以person2.friends也会被修改。但是一般每个对象都是要有属于自己的属性的，所以我们很少看到有人单独使用原型模式来创建对象。

4 组合使用构造函数模式和原型模式

创建自定义类型最常见的方式就是组合使用构造函数模式与原型模式。构造函数模式用于定义实例属性，原型模式用于定义方法和共享的属性。结果，每个实例都会有自己的一份实例属性的副本，但同时又共享着对方法的引用，最大限度的节省了内存。另外，这种混成模式还支持向构造函数传递参数；可谓是集两种模式之长。下面的代码重写了前面的例子：

function Person(name, age){    
this.name = name;    
this.age = age;    
this.friends = ["乾隆","康熙"];}
Person.prototype = {    
constructor:Person,    
sayName:function(){        
alert(this.name);    
}}
var person1 = new Person("wei",29);
var person2 = new Person("bu",25);
person1.friends.push("嬴政");
console.log(person1.friends);   //["乾隆", "康熙", "嬴政"]
console.log(person2.friends);   //["乾隆", "康熙"]
console.log(person1.friends === person2.friends);   //false
console.log(person1.sayName === person2.sayName);   //true

Nach dem Login kopieren

在这个例子中，实例属性都是在构造函数中定义的，而由所有实例共享的属性constructor和方法sayName()则是在原型中定义的。所以修改了person1.friends并不会改变person2.friends，因为他们分别引用了不同的数组。

这种构造函数与原型模式混成的模式，是目前在ECMAScript中使用最广泛、认同度最高的一种创建自定义类型的方法。可以说，这是用来定义引用的一种默认形式。

5 动态原型模式

有其他OO语言经验的开发人员在看到独立的构造函数和原型时，很可能会感到非常的困惑。动态原型模式就是用来解决这个问题的一个方案，它把所有的信息都封装在了构造函数中，而通过构造函数中初始化原型（仅在必要的情况下），又保持了同时使用构造函数和原型的优点。换句话说，可以通过检查某个应该存在的方法是否有效，来决定是否要初始化原型。来看一个例子：

function Person(name, age){    
this.name = name;    
this.age = age;    
this.friends = ["乾隆","康熙"];    
//注意if语句    
if(typeof this.sayName!="function"){        
Person.prototype.sayName = function(){            
alert(this.name);        
}    
}}
var person1 = new Person("wei",29);
person1.friends.push("嬴政");
person1.sayName();

Nach dem Login kopieren

注意构造函数代码中的if语句，这里只在sayName()方法不存在的情况下才会将它添加到原型中。这断代码只有在第一次调用构造函数的时候才会被执行。此后，原型已经被初始化，不需要再做什么修改。不过要记住，这里所做的修改能立即在所有实例中得到反映。因此，这种方法可以说确实非常完美。其中if语句检查的是初始化之后应该存在的任何方法和属性–不必再用一大堆if来检查每个属性和方法，只检查其中一个即可。对于采用这样模式创建的对象，还可以使用instanceof操作符来确定他的类型。

注意：使用动态原型模式时，不能使用对象字面量重写原型。如果在已经创建了实例的情况下重写原型，那么就会切断现有的实例与新原型之间的联系。

6 寄生构造函数模式

通常，在上述几种模式都不适合的情况下可以使用寄生构造函数模式。这种模式的基本思想是创建一个函数，该函数的作用仅仅是封装创建对象的代码，然后再返回新创建的对象，但从表面看，这个函数又很像典型的构造函数。来看一个例子：

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 person = new Person("wei",29,"banzhuan");
person.sayName();   //"wei"

Nach dem Login kopieren

在这个例子中，Person函数创建了一个对象，并以相应的属性和方法初始化该对象，然后返回了这个对象。除了使用new操作符把使用的包装函数叫做构造函数之外，这个模式和工厂模式并没有多大的区别。构造函数在不返回值的情况下，会默认返回新对象的实例。而通过在构造函数的末尾添加一个return语句，可以重写调用构造函数时返回的值。

这个模式可以在特殊的情况下来为对象创建构造函数。假设我们想创建一个具有额外方法的特殊数组。由于不能直接修改Array构造函数，因此可以使用这个模式：

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");
console.log(colors.toPipedString());    //red|blue|green

Nach dem Login kopieren

在这个例子中，我们创建了一个名为SpecialArray的构造函数。在这个函数的内部，首先创建了一个数组，然后push()方法初始化了数组的值。随后又给数组实例添加了toPipedString()方法，用来返回以竖线分隔的数组值。最后将数组以函数的形式返回。接着，我们调用了SpecialArray构造函数，传入了初始化的值，并调用了toPipedString()方法。

关于寄生构造函数模式，有一点需要声明：首先，返回的对象与构造函数或者构造函数的原型没有任何关系；也就是说，构造函数返回的对象与在构造函数外部创建的对象没有什么不同。为此，不能依赖instanceof操作符来确定对象的类型。由于存在这一的问题，我们建议在可以使用其他模式的情况下不要使用这种模式。

7 稳妥构造函数模式

道格拉斯·克拉克福德发明了JavaScript中的稳妥对象这个概念。所谓稳妥对象，是指没有公共属性，而且其方法也不引用this对象。稳妥对象最适合在一些安全环境中（这些环境会禁止使用this和new），或者在防止数据被其他应用程序改动时使用。稳妥构造函数遵循的与寄生构造函数类似的模式，但又两点不同：一是新创建对象的实例方法不引用this；二是不使用new操作符调用构造函数。按照稳妥构造函数的要求，可以将前面的Person构造函数重写如下：

function Person(name, age, job){
    //创建要返回的新对象
    var o = new Object();

    //可以在这里定义私有变量和函数

    //添加方法
    o.sayName = function(){
        alert(this.name);
    };

    //返回对象
    return o;
}

Nach dem Login kopieren

注意，在以这种模式创建的对象中，除了使用sayName()方法之外，没有其他办法访问name的值。可以像下面使用稳妥的Person构造函数：

var person =Person("weiqi",22,"banzhuan");
person.sayName();   //weiqi

Nach dem Login kopieren

这样，变量person中保存的是一个稳妥对象，而除了sayName()方法外，没有别的方式可以访问其他数据成员。即使有其他代码会给这个对象添加方法或数据成员，但也不可能有别的办法访问传入到构造函数中的原始数据。稳妥构造函数模式提供的这种安全性，使得他非常适合在某些安全执行环境–例如，ADsafe(www.adsafe.org)提供的环境下使用。

Hinweis: Ähnlich wie beim parasitären Konstruktormuster gibt es keine Beziehung zwischen dem mit dem sicheren Konstruktormuster erstellten Objekt und dem Konstruktor, sodass der Instanzoperator für solche Objekte keinen Sinn ergibt.

Das Obige ist der Inhalt der 7 Modi zum Erstellen von Objekten in JavaScript. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (m.sbmmt.com)!