Sept façons de créer des objets en JavaScript (résumé, à lire absolument)

Cet article présente principalement les sept façons de créer des objets en mode JavaScript Factory, en mode constructeur, en mode prototype, etc. Pour les étapes de fonctionnement spécifiques, vous pouvez consulter l'explication détaillée ci-dessous. Amis intéressés, vous pouvez vous y référer.

Il existe de nombreuses façons de créer des objets en JavaScript. Vous pouvez également créer un seul objet via le constructeur Object ou le littéral d'objet. Évidemment, ces deux méthodes généreront beaucoup de code répété et ne conviennent pas à la production de masse. . Ensuite, nous présentons sept façons très classiques de créer des objets. Elles ont également leurs propres avantages et inconvénients

Modèle d'usine

<.>

function createPerson(name, job) {
 var o = new Object()
 o.name = name
 o.job = job
 o.sayName = function() {
  console.log(this.name)
 }
 return o
}
var person1 = createPerson(‘Jiang', ‘student')
var person2 = createPerson(‘X', ‘Doctor')

Cette fonction d'usine peut être appelée d'innombrables fois, et à chaque fois elle renverra un objet contenant deux propriétés et une méthode

Bien que le modèle d'usine résolve le problème de la création de plusieurs objets similaires, mais ne résout pas le problème de reconnaissance d'objet, c'est-à-dire que le type d'un objet ne peut pas être connu

Modèle de constructeur

function Person(name, job) {
 this.name = name
 this.job = job
 this.sayName = function() {
  console.log(this.name)
 }
}
var person1 = new Person(‘Jiang', ‘student')
var person2 = new Person(‘X', ‘Doctor')

Créer un objet sans affichage. Utilisez new pour appeler ce constructeur Après avoir utilisé new, les opérations suivantes seront automatiquement effectuées

Créer un nouvel objetCe nouvel objet sera exécuté [[ prototype]] lien

Ce nouvel objet y sera lié dans l'appel de fonction
Renvoyer cet objet
L'utilisation de cette méthode pour créer des objets peut détecter le type d'objet

person1 instanceof Object // true

person1 instanceof Person //true

Mais en utilisant le constructeur pour créer des objets, chaque méthode doit être recréée une fois sur chaque instance

Modèle de prototype

function Person() {
}
Person.prototype.name = ‘Jiang'
Person.prototype.job = ‘student'
Person.prototype.sayName = function() {
 console.log(this.name)
}
var person1 = new Person()

Ajoutez des informations directement à l'objet prototype. L'avantage d'utiliser un prototype est que tous les objets d'instance peuvent partager les propriétés et les méthodes qu'il contient sans avoir à définir les informations d'instance d'objet dans le constructeur.

Le prototype est un concept très important, qui est expliqué en détail dans un article sur la compréhension de la relation et de la différence entre proto et prototype

Une manière d'écrire plus simple

function Person() {
}
Person.prototype = {
 name: ‘jiang',
 job: ‘student',
 sayName: function() {
  console.log(this.name)
 }
}
var person1 = new Person()

Définissez Person.prototype égal à un objet créé sous la forme d'un objet littéral, mais cela empêchera .constructor de pointer vers Person.

En utilisant cette méthode, l'objet Person.prototype par défaut est complètement réécrit, donc le .constructor n'existera pas ici

Person.prototype.constructor === Person // falseSi cet attribut est nécessaire, vous peut ajouter manuellement

function Person() {
}
Person.prototype = {
 constructor：Person
 name: ‘jiang',
 job: ‘student',
 sayName: function() {
  console.log(this.name)
 }
}

Cependant, cette méthode n'est pas suffisante. L'attribut constructeur n'est pas énumérable par défaut. la volonté est énumérable. Ainsi, lorsque cela est possible, la méthode Object.defineProperty

Object.defineProperty(Person.prototype, ‘constructor', {
 enumerable: false,
 value: Person
})

InconvénientsUtiliser prototypes , tous les attributs seront partagés, ce qui est un grand avantage, mais cela entraînera également certains inconvénients

Toutes les instances d'attributs du prototype sont partagées par de nombreuses instances, et ce type de partage est très approprié pour les fonctions. C'est à peine possible pour les propriétés contenant des valeurs de base. Après tout, les propriétés d'instance peuvent masquer les propriétés du prototype. Mais des problèmes surviennent lorsque des valeurs de type référence

function Person() {
}
Person.prototype = {
 name: ‘jiang',
 friends: [‘Shelby', ‘Court']
}
var person1 = new Person()
var person2 = new Person()
person1.friends.push(‘Van')
console.log(person1.friends) //[“Shelby”, “Court”, “Van”]
console.log(person2.friends) //[“Shelby”, “Court”, “Van”]
console.log(person1.friends === person2.friends) // true

friends existent dans le prototype. Les instances person1 et person2 pointent vers le même prototype, et person1 modifié. la référence. Le tableau sera également reflété dans l'instance person2

Utiliser le modèle de constructeur et le modèle de prototype en combinaison C'est le plus largement utilisé et reconnu. La meilleure façon possible de créer des types personnalisés. Cela peut résoudre les défauts des modèles ci-dessus

L'utilisation de ce modèle permet à chaque instance d'avoir sa propre copie des attributs de l'instance, mais en même temps de partager une référence à la méthode

Dans ce cas , Même si un attribut d'instance modifie la valeur d'un type référence, cela n'affectera pas les valeurs d'attribut des autres instances

function Person(name) {
 this.name = name
 this.friends = [‘Shelby', ‘Court']
}
Person.prototype.sayName = function() {
 console.log(this.name)
}
var person1 = new Person()
var person2 = new Person()
person1.friends.push(‘Van')
console.log(person1.friends) //[“Shelby”, “Court”, “Van”]
console.log(person2.friends) // [“Shelby”, “Court”]
console.log(person1.friends === person2.friends) //false

Mode prototype dynamiqueLe mode prototype dynamique encapsule toutes les informations dans le constructeur Lors de l'initialisation, il détermine si le prototype doit être initialisé en détectant si une méthode qui devrait exister est valide.

function Person(name, job) {
 // 属性
 this.name = name
 this.job = job

 // 方法
 if(typeof this.sayName !== ‘function') {
  Person.prototype.sayName = function() {
    console.log(this.name)
  }
 }

}
var person1 = new Person(‘Jiang', ‘Student')
person1.sayName()

La méthode sayName ne sera ajoutée au prototype que si ce n'est pas le cas exister. Ce code ne sera exécuté qu'au premier appel du constructeur.

Le prototype a été initialisé et aucune modification n'est nécessaire

Les modifications apportées au prototype ici peuvent être immédiatement reflétées dans toutes les instances

Deuxièmement, si la déclaration peut vérifier propriétés ou méthodes qui devraient exister après l'initialisation, il n'est donc pas nécessaire d'utiliser beaucoup d'instructions if pour vérifier chaque propriété et méthode, il suffit d'en vérifier une

Modèle de constructeur de parasite L'idée de base de ce modèle est de créer une fonction, qui encapsule uniquement le code qui crée l'objet, puis renvoie l'objet nouvellement créé

function Person(name, job) {
 var o = new Object()
 o.name = name
 o.job = job
 o.sayName = function() {
  console.log(this.name)
 }
 return o
}
var person1 = new Person(‘Jiang', ‘student')
person1.sayName()

这个模式，除了使用new操作符并把使用的包装函数叫做构造函数之外，和工厂模式几乎一样

构造函数如果不返回对象，默认也会返回一个新的对象，通过在构造函数的末尾添加一个return语句，可以重写调用构造函数时返回的值

稳妥构造函数模式

首先明白稳妥对象指的是没有公共属性，而且其方法也不引用this。

稳妥对象最适合在一些安全环境中（这些环境会禁止使用this和new），或防止数据被其他应用程序改动时使用

稳妥构造函数模式和寄生模式类似，有两点不同:一是创建对象的实例方法不引用this，而是不使用new操作符调用构造函数

function Person(name, job) {
 var o = new Object()
 o.name = name
 o.job = job
 o.sayName = function() {
  console.log(name)
 }
 return o
}
var person1 = Person(‘Jiang', ‘student')
person1.sayName()

和寄生构造函数模式一样，这样创建出来的对象与构造函数之间没有什么关系，instanceof操作符对他们没有意义

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

JS进行E-mail地址格式验证代码

Vue.js表单控件使用总结

Vue.js配置登录表单代码步骤剖析

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!