Explication détaillée du modèle de constructeur des modèles de conception JS

Cette fois, je vais vous apporter une explication détaillée du modèle de constructeur du modèle de conception JS , et quelles sont les précautions lors de l'utilisation du modèle de constructeur du modèle de conception JS. Ce qui suit est un cas pratique. Levez-vous et jetez un œil.

Dans les langages POO classiques, le constructeur (également appelé constructeur ) est une méthode spéciale utilisée pour initialiser un objet. En JS, parce que tout est objet, les constructeurs d’objets sont souvent mentionnés.

Le constructeur d'objet est utilisé pour créer un objet d'un type spécifié (Classe) et peut accepter des paramètres pour initialiser les propriétés et méthodes de l'objet.

Création d'objet

En JS, il existe trois méthodes couramment utilisées pour créer des objets :

//1, 推荐使用
var newObject = {};
//2,
var newObject = Object.create( null );
//3, 不推荐
var newObject = new Object();

Cependant, cela ne crée que trois objets vides sans aucune propriété ni méthode. Nous pouvons définir les propriétés et les méthodes des objets via les quatre méthodes suivantes.

// ECMAScript 3 兼容的方式
// 1. 常规对象定义方式
//设置属性
newObject.someKey = "Hello World";
//获取属性
var key = newObject.someKey;
// 2. 方括号方式
// 设置属性
newObject["someKey"] = "Hello World";
//获取属性
var key = newObject["someKey"];
// 仅仅用于ECMAScript 5
// 3. Object.defineProperty
// 设置属性
Object.defineProperty(
 newObject, "someKey",
 { value: "for more control of the property's behavior",
  writable: true,
  enumerable: true,
  configurable: true
});
//可以通过下面的函数简化属性设置
var defineProp = function ( obj, key, value ){
  config.value = value;
  Object.defineProperty( obj, key, config );
};
// 使用方法
var person = Object.create( null );defineProp( person, "car", "Delorean" );
defineProp( person, "dateOfBirth", "1981" );
defineProp( person, "hasBeard", false );
// 4. Object.defineProperties
//设置属性
Object.defineProperties(
newObject,
{ "someKey": { value: "Hello World", writable: true },
 "anotherKey": { value: "Foo bar", writable: false }
});
// 3和4的获取属性方法同1,2.

Constructeur de base

Nous savons qu'il n'y a pas de concept de classe dans JS, mais il prend également en charge l'utilisation de constructeurs pour créer des objets.

En utilisant le mot-clé [new], nous pouvons faire en sorte qu'une fonction se comporte comme un constructeur et crée sa propre instance d'objet.

Un constructeur de base a la forme suivante :

function Car( model, year, miles ) {
  //这里，this指向新建立的对象自己
  this.model = model;
  this.year = year;
  this.miles = miles;
  this.toString = function () {
    return this.model + " has done " + this.miles + " miles";
  };
}
//用法
// 建立两个car实例
var civic = new Car( "Honda Civic", 2009, 20000 );
var mondeo = new Car( "Ford Mondeo", 2010, 5000 );
// 输出结果
console.log( civic.toString() );
console.log( mondeo.toString() );

Il s'agit du modèle de constructeur simple. Il présente deux problèmes principaux,

. Premièrement, il est difficile d'hériter ; deuxièmement, toString() est défini une fois pour chaque instance d'objet. En tant que fonction, il doit être partagé par chaque instance du type Car.

Constructeur utilisant un prototype

Il y a une très bonne fonctionnalité en JS : prototype [Prototype],

En l'utilisant, lors de la création d'un objet, toutes les propriétés du prototype du constructeur peuvent être obtenues par l'instance d'objet.

De cette façon, plusieurs instances d'objet peuvent partager le même prototype.

Nous améliorons l'exemple de voiture précédent comme suit :

function Car( model, year, miles ) {
  this.model = model;
  this.year = year;
  this.miles = miles;
}
Car.prototype.toString = function () {
  return this.model + " has done " + this.miles + " miles";
};
// 用法
var civic = new Car( "Honda Civic", 2009, 20000 );
var mondeo = new Car( "Ford Mondeo", 2010, 5000 );
//输出
console.log( civic.toString() );
console.log( mondeo.toString() );

Dans l'exemple ci-dessus, la méthode toString() est partagée par plusieurs instances d'objet Car. .

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Implémentation AngularJS de certaines étapes du menu déroulant de liaison secondaire, explication détaillée

Fonctionnement Bootstrap et Vue informations utilisateur Ajout et suppression

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!