Maison  >  Article  >  interface Web  >  Qu'est-ce qu'un constructeur JavaScript

Qu'est-ce qu'un constructeur JavaScript

WBOY
WBOYoriginal
2022-01-19 14:32:052149parcourir

En JavaScript, un constructeur est une fonction spéciale utilisée pour initialiser un nouvel objet une fois sa mémoire allouée. Le constructeur d'objet est utilisé pour créer un type d'objet spécial. Lorsque l'objet est créé pour la première fois, il reçoit des paramètres et est. utilisé pour attribuer des valeurs aux propriétés et méthodes des membres.

Qu'est-ce qu'un constructeur JavaScript

L'environnement d'exploitation de ce tutoriel : système Windows 10, JavaScript version 1.8.5, ordinateur Dell G3.

Qu'est-ce qu'un constructeur JavaScript

Dans la programmation orientée objet, un constructeur est une fonction spéciale utilisée pour initialiser un objet nouvellement créé après l'allocation de la mémoire de l'objet. En JavaScript, tout est un objet. Le constructeur d'objet est utilisé pour créer un type d'objet spécial. Premièrement, il prépare l'objet à utiliser. Deuxièmement, lorsque l'objet est créé pour la première fois, il reçoit des paramètres pour attribuer des valeurs aux propriétés et méthodes des membres.

Création d'objet

Trois façons de base de créer des objets :

var newObject = {};
// or
var newObject = Object.create( null );
// or
var newObject = new Object();

Lorsque le constructeur d'objet crée un wrapper d'objet pour une valeur spécifique, ou qu'aucune valeur n'est transmise, il crée un objet vide et le renvoie.

Quatre façons d'attribuer une paire clé-valeur à un objet :

// ECMAScript 3 兼容形式
// 1. “点号”法
// 设置属性
newObject.someKey = "Hello World";
// 获取属性
var key = newObject.someKey;
// 2. “方括号”法
// 设置属性
newObject["someKey"] = "Hello World";
// 获取属性
var key = newObject["someKey"];
// ECMAScript 5 仅兼容性形式
// For more information see: http://kangax.github.com/es5-compat-table/
// 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 ){
    var config = {
        value
    }
  Object.defineProperty( obj, key, config );
};
// 为了使用它,我们要创建一个“person”对象
var person = Object.create( null );
// 用属性构造对象
defineProp( person, "car",  "Delorean" );
defineProp( person, "dateOfBirth", "1981" );
defineProp( person, "hasBeard", false );
// 还可以创建一个继承于Person的赛车司机
var driver = Object.create( person );
// 设置司机的属性
defineProp(driver, "topSpeed", "100mph");
// 获取继承的属性 (1981)
console.log( driver.dateOfBirth );
// 获取我们设置的属性 (100mph)
console.log( driver.topSpeed );
// 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

Comme nous l'avons vu précédemment, JavaScript ne prend pas en charge le concept de classes, mais il a un moyen de travailler avec la fonction Constructeur d'objets. En utilisant le mot-clé new pour appeler cette fonction, nous pouvons demander à JavaScript d'utiliser cette fonction comme constructeur, qui peut initialiser un objet avec ses propres membres définis.

Dans ce constructeur, le mot-clé this fait référence à l'objet qui vient d'être créé. De retour à la création d'objets, un constructeur de base ressemble à ceci :

function Car( model, year, miles ) {
  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 );
// 打开浏览器控制台查看这些对象toString()方法的输出值
console.log( civic.toString() );
console.log( mondeo.toString() );

Ce qui précède est une version simple du modèle de constructeur, mais il présente deux problèmes :

Difficile d'hériter

Dans chaque objet créé par le constructeur Car, des fonctions comme toString() ont été redéfinis

Ce n'est pas très bon, la situation idéale est que tous les objets de type Car doivent référencer la même fonction

Utilisez le constructeur "prototype"

Les fonctions en JavaScript ont un attribut prototype. Lorsque nous appelons le constructeur JavaScript pour créer un objet, les propriétés du prototype du constructeur sont accessibles et appelées pour l'objet créé

function Car( model, year, miles ) {
  this.model = model;
  this.year = year;
  this.miles = miles;
}
// 注意这里我们使用 Object.prototype.newMethod 而不是 Object.prototype ,以避免我们重新定义原型对象
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() );

Grâce au code ci-dessus, une seule instance toString() est partagée par tous les objets Car.

Recommandations associées : Tutoriel d'apprentissage Javascript

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn