Préface
Il existe de nombreuses façons de créer des objets en utilisant JavascriptMaintenant Énumérons quatre méthodes et énumérons les avantages et les inconvénients de chaque méthode, afin que chacun puisse choisir de les utiliser.
Modèle d'usine
function createPerson(name, age){
var obj = new Object();
obj.name = name;
obj.age = age;
return obj; //一定要返回，否则打印undefined:undefined
}
var person1 = new createPerson('Young',18);
console.log(person1.name + ':' + person1.age);Avantages : Le modèle d'usine peut résoudre le problème de la création de plusieurs modèles similaires objets
Inconvénients : Ne résout pas le problème de la reconnaissance des objets (comment déterminer le type d'un objet)
ConstructeurMotif
function Person(name,age){
this.name = name;
this.age = age;
}
var person1 = new Person('Young',18);
console.log(person1.name + ':' + person1.age);Avant de parler des avantages et des inconvénients, racontons d'abord une petite histoire sur elle-même
Utiliser le constructeur comme fonction
function Person(name,age){
this.name=name;
this.age=age;
this.sayName=function(){
return this.name;
}
}
//当做构造函数使用
var person1 = new Person('Young', 18);
person1.sayName();
console.log(person1.name + ':' + person1.age);
//当做普通函数调用
Person('Wind', 18);
console.log(window.sayName());
//在另一个作用域中调用
var obj = new Object();
Person.call(obj, 'bird', 100);
console.log(obj.sayName());Avantages et inconvénients du constructeur
Avantages : peut identifier ses instances comme un type spécifique
Inconvénients : Chaque méthode doit être recréée sur chaque instance. Bien sûr, vous pouvez également le modifier comme ceci :
function Person(name, age){
this.name = name;
this.age = age;
this.sayName = sayName;
}
function sayName(){
return this.name;
}
est modifié pour appeler la fonction globale, il n'y a donc aucune encapsulation du tout. . . Le prochain Modèle de prototype peut compenser cette lacune
Modèle de prototype
function Person(){
}
Person.prototype.name = 'Young';
Person.prototype.age = 18;
Person.prototype.sayName = function(){
return this.name;
}
var person1 = new Person();
console.log(person1.sayName());
var person2 = new Person();
console.log(person1.sayName());
alert(person1.sayName === person2.sayName);
//person1和person2访问的是同一组属性的同一个sayName()函数Bien qu'il soit accessible via des instances d'objet enregistré dans La valeur dans le prototype, mais la valeur dans le prototype ne peut pas être remplacée via l'objet instance
function Person(){
}
Person.prototype.name='Young';
Person.prototype.age=18;
Person.prototype.sayName=function(){
return this.name;
}
var person1=new Person();
var person2=new Person();
person1.name='Wind';
console.log(person1.sayName());//Wind
console.log(person2.sayName());//Young
alert(person1.sayName==person2.sayName);//trueLorsque nous appelons
person1.sayName
, deux recherches seront effectué. , l'analyseur détermine d'abord si l'instance person1 a les attributs de
sayName
Si c'est le cas, il appelle ses propres attributs. Sinon, il recherche les attributs dans le prototype.
function Person(){
}
Person.prototype.name='Young';
Person.prototype.age=18;
Person.prototype.sayName=function(){
return this.name;
}
var person1=new Person();
var person2=new Person();
person1.name='Wind';
console.log(person1.sayName());//Wind
console.log(person2.sayName());//Young
delete person1.name;
console.log(person1.sayName());//Young
console.log(person2.sayName());//YoungUtilisez la méthode
hasOwnPropertyType
pour détecter si une propriété existe dans le prototype ou dans l'instance. Cette méthode est héritée de Object Dans l'instance. est vrai, faux dans le prototype.
Les attributs d'instance sur les objets d'énumération utilisent la méthode
Object.keys()
function Person(){
}
Person.prototype.name='Young';
Person.prototype.age=18;
Person.prototype.sayName=function(){
return this.name;
}
var keys=Object.keys(Person.prototype);
console.log(keys);//["name", "age", "sayName"]Avantages et inconvénients du modèle de prototype
Avantages : Pas besoin de réitérer chaque méthode sur chaque instance
Inconvénients : Peu de personnes utilisent le modèle prototype seul. . Le problème est listé en détail
function Person(){
}
Person.prototype={
constructor:Person,
name:'Young',
age:18,
friends:['Big','Pig'],
sayName:function(){
return this.name;
}
};
var p1=new Person();
var p2=new Person();
p1.friends.push('Mon');
console.log(p1.friends);//["Big", "Pig", "Mon"]
console.log(p2.friends);//["Big", "Pig", "Mon"]C'est justement parce que les instances ont généralement leurs propres attributs, et nous les mettons ici dans
Person.prototype
, donc Avec la modification de p1, l'instance entière incluant le prototype est modifiée. Eh bien, nous pouvons utiliser une combinaison de modèle de constructeur et de modèle de prototype.
Utilisez le modèle de constructeur et le modèle de prototype en combinaison
function Person(name,age){
this.name=name;
this.age=age;
this.friends=['Big','Pig'];
}
Person.prototype={
sayName:function(){
return this.name;
}
};
var p1=new Person('Young',18);
var p2=new Person('Wind',78);
p1.friends.push('Raganya');
console.log(p1.friends);//["Big", "Pig", "Raganya"]
console.log(p2.friends);//["Big", "Pig"]
console.log(p1.friends==p2.friends);//false
console.log(p1.sayName==p2.sayName);//trueCe modèle est actuellement le plus largement utilisé et reconnu pour créer une méthode de type de personnalisation. Est un mode par défaut utilisé pour définir les types de référence.
Résumé
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
