Analyser les quatre façons de créer des objets en Javascript

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);//true

Lorsque 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());//Young

Utilisez 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);//true

Ce 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!