Comprendre la création d'objets JavaScript et la création d'objets via des prototypes

1. Plusieurs façons de créer des objets

1. Mode de déclaration indépendant

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());

À l'heure actuelle, box2 et box1 sont indépendantes l'une de l'autre. , il n'y aura pas de confusion.

Mais à chaque fois que vous déclarez un objet avec la même structure, vous devez ajouter un morceau de code, ce qui est particulièrement gênant, nous avons donc le modèle d'usine suivant.

2. Mode usine

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

De cette façon, il vous suffit d'appeler la méthode createObject() à chaque fois que vous créez un nouvel objet. En même temps, vous pouvez également passer. paramètres pour initialiser l’objet.
Mais comme les objets produits par new sont tous subordonnés à Object, lorsque je veux faire quelques distinctions essentielles entre les objets produits par new, ce n'est pas possible pour le moment, il existe un mode constructeur plus simple.

3. Modèle de constructeur

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

Le modèle de constructeur résout en grande partie le problème de la réutilisation des objets et de l'initialisation des paramètres, et est le nouveau modèle d'objet le plus couramment utilisé.
Remarque :

Icibox1.run != box2.run, car ils jugent l'adresse de référence, donc ça peut être vu que les méthodes des deux objets sont stockées à des endroits différents et sont deux méthodes différentes.
mais box1.run() == box2.run() car ils renvoient la même valeur.
Lorsque vous avez un objet, cela impliquera naturellement le partage d'attributs et de méthodes d'objet (par exemple, en Java, les sous-classes partagent les variables et méthodes membres de la classe parent).
Pour parler franchement, les objets créés par le modèle constructeur sont indépendants les uns des autres (comme box1.run != box2.run ci-dessus). Si je veux partager certaines propriétés entre deux objets, je dois utiliser un prototype. .prototype.

2. Créer des objets grâce à des prototypes

1. Mode Prototype

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中的引用属性就是修改引用所指向的数组，所以原型也被修改了
			//这是我们不希望看到的！

Les avantages de ce mode :

1. Les attributs du nouvel objet dans le prototype sont partagés à ce moment, box1.run == box2.run
2. être garanti Complètement unifié (contrairement à l'Inconvénient 2)
Inconvénients de ce mode :

1 Lorsqu'il contient un attribut d'un type référence, l'attribut pointait. à par le type référence Il existe dans le prototype. Modifier les attributs de référence directement dans l'objet modifiera les attributs de référence de tous les objets
2. Ce mode omet le transfert des paramètres d'initialisation, de sorte que tous les attributs qui sortent du nouveau sont les mêmes

1.1, mode littéral du prototype

(un autre mode du mode prototype, généralement il n'y a pas beaucoup de différence, les deux appartiennent au prototype mode)

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

Ce mode hérite de tous les avantages et inconvénients du mode prototype, mais a également ses propres avantages et inconvénients
Avantages : Meilleur reflet de encapsulation
Inconvénients : le constructeur ne pointe pas sur lui-même et doit être forcé manuellement à pointer vers

2. Constructeur + mode prototype

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

Avantages : Ce mode résout parfaitement le problème des attributs partagés et des attributs non partagés, et peut être contrôlé avec précision. C'est un très bon mode.
Inconvénients : Cependant, dans cette méthode, le prototype et le constructeur sont séparés, ce qui rend les gens bizarres et ne reflète pas l'encapsulation.

3. Mode prototype dynamique

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

Avantages : Ce mode hérite de tous les avantages du mode précédent (construction + prototype), et résout également parfaitement le problème d'encapsulation
Remarque : le mode littéral ne peut pas être utilisé lors de l'écriture de prototypes dans ce mode, ce qui couperait la connexion entre l'instance et le nouveau prototype. ? ? ?

Fondamentalement, à ce stade, les deux modes ci-dessus peuvent gérer la plupart des problèmes, et ce sont de meilleurs modes.
Cependant, il existe encore des besoins plus spécifiques qui nécessitent l'utilisation des deux modes alternatifs suivants.

4. Modèle de constructeur parasite (modèle d'usine + modèle de constructeur)

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. Modèle de constructeur sûr

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

Le modèle de constructeur sécurisé est un modèle qui n'est nécessaire que lorsque son utilisation n'est pas autorisée dans le constructeur et que new n'est pas autorisé à être utilisé pour une instanciation externe.
Je ne sais pas pourquoi il y a des demandes aussi étranges. Cependant, de nombreux modèles de création d'objets sont en effet bien plus éblouissants que Java.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!