Verstehen Sie die Erstellung von JavaScript-Objekten und die Objekterstellung durch Prototypen

1. Mehrere Möglichkeiten, Objekte zu erstellen

1. Unabhängiger Deklarationsmodus

var box1 = new Object();	//声明第一个对象并给各属性赋值
box1.name = 'Lee';
box1.age = 100;
box1.run = function () {
	return this.name + this.age + '运行中...';
};
alert(box.run());

var box2 = new Object();	//声明第二个对象并给属性赋值
box2.name = 'Jack';
box2.age = 200;
box2.run = function () {
	return this.name + this.age + '运行中...';
};
alert(box2.run());

Zu diesem Zeitpunkt sind Box2 und Box1 unabhängig voneinander , es wird keine Verwirrung geben.

Aber jedes Mal, wenn Sie ein Objekt mit derselben Struktur deklarieren, müssen Sie einen Code hinzufügen, was besonders unpraktisch ist. Daher haben wir das folgende Factory-Muster.

2. Factory-Modus

function createObject(name, age) { //集中实例化的函数
	var obj = new Object();
	obj.name = name;
	obj.age = age;
	obj.run = function () {
		return this.name + this.age + '运行中...';
	};
	return obj;
}

Auf diese Weise müssen Sie bei jedem Erstellen eines neuen Objekts nur die Methode createObject() aufrufen Parameter zum Initialisieren des Objekts.
Aber da die von new erzeugten Objekte alle Object untergeordnet sind, ist es derzeit nicht möglich, einige wesentliche Unterscheidungen zwischen den von new erzeugten Objekten zu treffen.

3. Konstruktormuster

function Box(name, age) {
	this.name = name;
	this.age = age;
	this.run = function () {
		return this.name + this.age + '运行中...';
	};
}
var box1 = new Box('Lee', 100);
var box2 = new Box('Jack', 200);
alert(box1.run());
alert(box1 instanceof Box); //很清晰的识别他从属于Box

Das Konstruktormuster löst weitgehend das Problem der Objektwiederverwendung und Parameterinitialisierung und ist das am häufigsten verwendete neue Objektmuster.
Hinweis:

Hierbox1.run != box2.run, weil sie die Referenzadresse beurteilen, also Es kann sein Es ist ersichtlich, dass die Methoden der beiden Objekte an unterschiedlichen Orten gespeichert sind und zwei verschiedene Methoden sind.
aber box1.run() == box2.run() weil sie den gleichen Wert zurückgeben.
Wenn Sie ein Objekt haben, beinhaltet dies natürlich die gemeinsame Nutzung von Objektattributen und -methoden (in Java beispielsweise teilen Unterklassen Mitgliedsvariablen und Methoden der übergeordneten Klasse).
Um es ganz klar auszudrücken: Die vom Konstruktormuster erstellten Objekte sind unabhängig voneinander (wie oben box1.run != box2.run). Wenn ich bestimmte Eigenschaften zwischen zwei Objekten teilen möchte, muss ich einen Prototyp verwenden . Prototyp.

2. Objekte durch Prototypen erstellen

1. Prototypenmodus

function Box() {} //声明一个构造函数
Box.prototype.name = 'Lee'; //在原型里添加属性
Box.prototype.age = 100;
Box.prototype.arr = ['aaa','bbb'];
Box.prototype.run = function () { //在原型里添加方法
	return this.name + this.age + '运行中...';
};
var box1 = new Box();
var box2 = new Box();

//修改普通属性，看下会不会影响prototype
alert(box1.name);	//Lee
box1.name = 'Rinima';
alert(box1.name);	//Rinima
alert(box2.name);	//Lee，修改box1的普通属性，相当于直接在box1中添加一个属性，是不会牵扯到原型中的属性的。
					//这一点非常好。但是如果是引用对象（数组）的话，就有问题了。

//修改引用属性，看下会不会影响prototype
alert(box1.arr);	//aaa,bbb
box1.arr.push('ccc');
alert(box1.arr);	//aaa,bbb,ccc
alert(box2.arr);	//aaa,bbb,ccc，修改box1的引用属性，却牵扯到了原型中的属性。
			//这是因为arr只是个引用地址，指向数组真实存储的位置，修改box1中的引用属性就是修改引用所指向的数组，所以原型也被修改了
			//这是我们不希望看到的！

Die Vorteile dieses Modus:

1. Die Attribute des neuen Objekts im Prototyp werden zu diesem Zeitpunkt geteilt. box1.run == box2.run
2 Die Attribute der neuen Objektinstanz garantiert vollständig einheitlich sein (im Gegensatz zu Nachteil 2)
Nachteile dieses Modus:

1. Wenn ein Attribut eines Referenztyps enthalten ist, zeigt das Attribut durch den Referenztyp Es ist im Prototyp vorhanden. Durch Ändern der Referenzattribute direkt im Objekt werden die Referenzattribute aller Objekte geändert
2. In diesem Modus wird die Übertragung der Initialisierungsparameter weggelassen, sodass alle Attribute Das Neue ist dasselbe

1.1, Prototyp-Literalmodus

(ein anderer Modus des Prototypmodus, im Allgemeinen gibt es keinen großen Unterschied, beide gehören zum Prototyp Modus)

function Box() {};
Box.prototype = { //使用字面量的方式
	constructor : Box,
	name : 'Lee',
	age : 100,
	run : function () {
		return this.name + this.age + '运行中...';
	}
};

Dieser Modus erbt alle Vor- und Nachteile des Prototypmodus, hat aber auch seine eigenen einzigartigen Vor- und Nachteile
Vorteile: Bessere Reflexion von Kapselung
Nachteile: Konstruktor zeigt nicht auf sich selbst und muss manuell gezwungen werden, auf

zu zeigen 2. Konstruktor + Prototyp-Modus

function Desk(name, age) { //不共享的使用构造函数
	this.name = name;
	this.age = age;
	this.family = ['aaa', 'bbb', 'ccc'];
};
Desk.prototype = { //共享的使用原型模式
	constructor : Desk,
	run : function () {
		return this.name + this.age + this.family;
	}
};

var desk1 = new Desk('Lee',100);
var desk2 = new Desk('Jack',200);
alert(desk1.family);	//aaa,bbb,ccc
desk1.family.push('ddd');
alert(desk1.family);	//aaa,bbb,ccc,ddd
alert(desk2.family);	//aaa,bbb,ccc

Vorteile: Dieser Modus löst das Problem gemeinsamer und nicht gemeinsamer Attribute perfekt und kann präzise gesteuert werden. Es ist ein sehr guter Modus.
Nachteile: Bei dieser Methode sind jedoch der Prototyp und der Konstruktor getrennt, was den Leuten ein seltsames Gefühl gibt und nicht die Kapselung widerspiegelt.

3. Dynamischer Prototypmodus

function Box(name ,age) { //将所有信息封装到函数体内
	this.name = name;		//不共享的属性
	this.age = age;
	
	if (typeof this.arr != 'object') {		//共享的属性
		alert('在第一次调用的时候...arr');
		Box.prototype.arr = ['aaa','bbb'];
	}
	if (typeof this.run != 'function') {
		alert('在第一次调用的时候...run');
		Box.prototype.run = function () {
			return this.name + this.age + '运行中...';
		};
	}
}
var box1 = new Box();
var box2 = new Box();
alert( box1.arr );		//aaa,bbb
box1.arr.push('ccc');
alert( box1.arr );		//aaa,bbb,ccc
alert( box2.arr );		//aaa,bbb

Vorteile: Dieser Modus übernimmt alle Vorteile des vorherigen Modus (Konstruktion + Prototyp) und löst auch das Kapselungsproblem perfekt
Hinweis: Beim Schreiben von Prototypen in diesem Modus kann der Literalmodus nicht verwendet werden, da dadurch die Verbindung zwischen der Instanz und dem neuen Prototyp unterbrochen wird. ? ? ?

Grundsätzlich können die beiden oben genannten Modi zu diesem Zeitpunkt die meisten Probleme lösen und sind bessere Modi.
Es gibt jedoch noch einige spezifische Anforderungen, die die Verwendung der folgenden beiden alternativen Modi erfordern.

4. Parasitäres Konstruktormuster (Fabrikmuster + Konstruktormuster)

function Box(name, age) {
	var obj = new Object();
	obj.name = name;
	obj.age = age;
	obj.run = function () {
		return this.name + this.age + '运行中...';
	};
	return obj;
}

5. Sicheres Konstruktormuster

function Box(name , age) {
	var obj = new Object();
	obj.run = function () {
		return name + age + '运行中...'; //直接打印参数即可
	};
	return obj;
}

Das sichere Konstruktormuster ist ein Muster, das nur benötigt wird, wenn dies nicht im Konstruktor verwendet werden darf und new nicht für die externe Instanziierung verwendet werden darf.
Ich weiß nicht, warum es so seltsame Forderungen gibt. Allerdings sind so viele Objekterstellungsmuster tatsächlich viel umwerfender als Java.

Das obige ist der detaillierte Inhalt vonVerstehen Sie die Erstellung von JavaScript-Objekten und die Objekterstellung durch Prototypen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!