Analyse d'un exemple de modèle de constructeur JavaScript

Cet article présente principalement le modèle de constructeur du modèle de conception de programmation JavaScript. Il décrit brièvement le concept et le principe du modèle de constructeur et analyse la définition et l'utilisation du modèle de constructeur sous la forme d'exemples auxquels les amis dans le besoin peuvent se référer. ça. J'espère pouvoir aider tout le monde.

Cet article décrit le modèle de constructeur du modèle de conception de programmation JavaScript avec des exemples. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Dans le langage POO classique, le constructeur (également appelé constructeur) est une méthode spéciale utilisée pour initialiser des objets. 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 les méthodes de l'objet.

Création d'objets

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 en JS. Mais il prend également en charge la création d'objets à l'aide de constructeurs.

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

Un formulaire de constructeur de base est le suivant :

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 bonne fonctionnalité dans JS : prototype [Prototype],

utilisez-le, quand En créant 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 Car 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 .

Recommandations associées :

Modèles de conception JavaScript en mode usine et compétences en mode constructeur_javascript

Conception Node.js Le modèle utilise des flux pour l'encodage

Une brève introduction au modèle de poids structurel des modèles de conception 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!