Explication détaillée de l'utilisation du prototype en javascript

JavaScript est un langage de programmation très populaire. La puissance de JavaScript réside dans ses prototypes.

Le prototype est un concept du modèle d'objet JavaScript. Cela nous permet de construire des objets en héritant des propriétés et des méthodes d'autres objets. C'est ainsi que fonctionne l'héritage en JavaScript.

Cet article présentera en détail l'utilisation des prototypes en JavaScript.

1. Qu'est-ce qu'un prototype

Chaque objet en JavaScript est dérivé de son prototype. Le prototype d'un objet est un autre objet qui possède une chaîne de prototypes. Chaque objet de cette chaîne de prototypes est dérivé étape par étape de l'objet d'origine jusqu'à l'objet ancêtre - le prototype de l'objet.

Par exemple :

//创建一个对象
var obj = {};

Le code ci-dessus crée un objet vide, et sa chaîne de prototypes est comme ceci :

obj -> Object.prototype -> L'objet obj est dérivé de l'objet Object.prototype est venu. Object.prototype est l'ancêtre de tous les objets en JavaScript.

2. Prototype et Constructeur

Il existe deux concepts étroitement liés au prototype en JavaScript : le constructeur et l'instance.

Constructeur

1. Un constructeur est une fonction utilisée pour créer des objets d'un type spécifique. Les constructeurs peuvent utiliser des prototypes pour définir des propriétés et des fonctions. Par exemple :

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Le code ci-dessus définit un constructeur Person, qui a deux paramètres : nom et âge. Dans le constructeur, nous utilisons le mot-clé this pour définir les propriétés de l'instance d'objet. Créons maintenant un objet Person :

var person1 = new Person('Tom', 20);

Cet objet person1 est créé par le constructeur Person. Il possède deux propriétés : name et age.

Instances

2. Les instances sont des objets créés par des constructeurs. Les instances peuvent accéder aux propriétés et méthodes définies dans le prototype du constructeur. Par exemple :

//定义Person的原型方法
Person.prototype.sayHello = function() {
  console.log('Hello, my name is ' + this.name);
}
//调用对象方法
person1.sayHello();

définit une méthode sayHello sur le prototype Person, accessible par toutes les instances de Person. Ainsi, lorsque nous appelons la méthode person1.sayHello(), elle renvoie : Bonjour, je m'appelle Tom.

3. Héritage prototypique

L'héritage prototypique est la principale méthode d'héritage en JavaScript. Il est mis en œuvre à travers la chaîne de prototypes.

L'héritage signifie qu'un objet peut accéder aux propriétés et méthodes d'un autre objet. Par exemple, un objet enfant peut hériter des propriétés et méthodes de son objet parent. En JavaScript, un objet peut posséder les propriétés et méthodes d'un autre objet par héritage.

Nous pouvons ajouter des propriétés et des méthodes à l'objet prototype, et ces propriétés et méthodes seront héritées par l'instance créée par le constructeur. Par exemple :

//定义一个Animal对象
function Animal(name) {
  this.name = name;
}
//在Animal的原型上定义一个属性
Animal.prototype.color = 'red';
//创建一个实例
var cat = new Animal('Tom');

Dans le code ci-dessus, nous définissons un objet Animal, qui a un attribut name et un attribut prototype color. Ensuite, nous créons une instance de chat, qui hérite de la couleur de l'attribut du prototype Animal.

Vous pouvez utiliser la méthode hasOwnProperty() pour déterminer si une instance contient ses propres propriétés spécifiques. Par exemple :

console.log(cat.hasOwnProperty('name')); // true
console.log(cat.hasOwnProperty('color')); // false

4. Méthodes et attributs statiques du prototype

Les méthodes et attributs statiques appartiennent au constructeur lui-même, ils n'appartiennent pas à l'instance. Avant ES5, JavaScript ne disposait d'aucun mécanisme officiel pour fournir des méthodes et des propriétés statiques, les développeurs les ajoutaient donc généralement manuellement aux constructeurs.

Par exemple :

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.create = function(name, age) {
  return new Person(name, age);
}

Dans le code ci-dessus, nous définissons une méthode statique create(). Cette méthode peut être appelée depuis le constructeur lui-même, et non depuis l'instance.

Dans ES6, vous pouvez utiliser la syntaxe de classe pour définir des méthodes et des propriétés statiques. Par exemple :

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  static create(name, age) {
    return new Person(name, age);
  }
}

Dans le code ci-dessus, nous utilisons la syntaxe de classe pour définir une méthode statique create().

5. Inconvénients de l'héritage prototypique

L'héritage prototypique est très puissant et flexible car nous pouvons hériter des propriétés et des méthodes de n'importe quel objet. Mais cela présente aussi certains inconvénients.

Toutes les instances partagent des prototypes

1. Étant donné que les prototypes sont partagés, toutes les instances créées à partir du même constructeur partageront le même prototype. Si une instance modifie une propriété ou une méthode sur le prototype, toutes les instances seront affectées.

Impossible d'accéder aux variables privées d'une instance

2. Les méthodes prototypes ne peuvent pas accéder aux variables privées d'une instance (c'est-à-dire les variables définies dans le constructeur). Parce que ces variables privées ne peuvent être utilisées qu’à l’intérieur du constructeur.

6. Résumé

Le prototype est un concept très puissant en JavaScript, qui peut être utilisé pour implémenter l'héritage, le code partagé, etc. Dans le développement réel, s'il est utilisé correctement, l'héritage prototypique peut nous aider à améliorer l'efficacité du développement et à réduire la quantité de code. Cependant, nous devons également être clairs sur les défauts de l'héritage prototypique, en particulier sur les problèmes tels que le partage de prototypes et l'impossibilité d'accéder aux variables privées.

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!