Maison > interface Web > js tutoriel > Explication détaillée des cas d'utilisation de l'héritage d'objets JS

Explication détaillée des cas d'utilisation de l'héritage d'objets JS

php中世界最好的语言
Libérer: 2018-06-04 10:48:55
original
1563 Les gens l'ont consulté

Cette fois, je vais vous apporter une explication détaillée des cas d'utilisation de l'héritage d'objets JS. Quelles sont les précautions à prendre pour utiliser l'héritage d'objets JS ? Voici des cas pratiques, jetons un coup d'œil.

Modifier des objets que vous ne possédez pas est une bonne solution à certains problèmes. Dans un état « bénin », cela ne se produit généralement pas ; cela peut se produire parce que le développeur a rencontré un problème et l'a ensuite résolu en modifiant l'objet. Néanmoins, il existe toujours plusieurs solutions à un problème connu. Une grande partie des connaissances en informatique a évolué pour résoudre des problèmes difficiles dans des environnements linguistiques typés statiquement, tels que Java. Il peut exister des méthodes, appelées modèles de conception, qui ne modifient pas directement ces objets mais les étendent.

En dehors de JS, la forme d'extension d'objet la plus populaire est l'héritage. Si un type d'objet fait déjà la plupart de ce que vous voulez, héritez-en, puis ajoutez quelques fonctionnalités. Il existe deux formes de base dans JS : l'héritage basé sur les objets et l'héritage basé sur le type.

En JS, l'héritage a encore de grosses limites. Premièrement, vous ne pouvez pas hériter des objets DOM ou BOM. Deuxièmement, en raison de la relation complexe entre l'index du tableau et la propriété length, l'héritage d'Array ne fonctionnera pas correctement.

Héritage basé sur les objets

Dans l'héritage basé sur les objets, souvent appelé héritage prototypique, un objet hérite d'un autre objet sans appeler le constructeur. La méthode ES5 Object.create() est le moyen le plus simple d'implémenter ce type d'héritage. Par exemple :

var person = {  name: 'Nicholas',  sayName: function () {    console.log(this.name);
  }
};var myPerson = Object.create(person);
myPerson.sayName(); // "Nicholas"
Copier après la connexion

Cet exemple crée un nouvel objet myPerson, qui hérite de person. Cette méthode d'héritage est comme le prototype de myPerson étant défini sur person. Dès lors, myPerson peut accéder aux attributs et méthodes de person sans avoir à redéfinir la variable du même nom sur un nouvel objet. Par exemple, redéfinir myPerson.sayName() coupera automatiquement l'accès à person.sayName() :

myPerson.sayName = function () {  console.log('Anonymous');
};
myPerson.sayName(); // "Anonymous"person.sayName(); // "Nicholas"
Copier après la connexion

La méthode Object.create() peut spécifier un deuxième paramètre, les propriétés de l'objet paramètre et Les méthodes seront ajoutées au nouvel objet. Par exemple :

var myPerson = Object.create(person, {  name: {    value: 'Greg'
  }
});
myPerson.sayName(); // "Greg"person.sayName(); // "Nicholas"
Copier après la connexion

L'objet myPerson créé dans cet exemple a sa propre valeur d'attribut name, donc appeler sayName() affiche "Greg" au lieu de "Nicholas".

Une fois qu'un nouvel objet est créé de cette manière, le nouvel objet est totalement libre de le modifier. Après tout, vous êtes le propriétaire de l'objet et vous pouvez ajouter des méthodes, écraser des méthodes existantes ou même supprimer des méthodes (ou empêcher leur accès) dans votre projet.

L'héritage basé sur le type

L'héritage basé sur le type fonctionne de la même manière que l'héritage basé sur l'objet. Il hérite d'un objet existant. L'héritage dépend ici du prototype. Par conséquent, l’héritage basé sur le type est implémenté via des constructeurs et non des objets. Cela signifie qu'il faut accéder au constructeur de l'objet hérité. Comparé aux types natifs dans JS, l'héritage basé sur les types est plus approprié lorsque les développeurs définissent des constructeurs. Dans le même temps, l’héritage basé sur le type nécessite généralement deux étapes : d’abord l’héritage du prototype, puis l’héritage du constructeur ; L'héritage du constructeur consiste à transmettre l'objet nouvellement créé comme valeur lors de l'appel du constructeur de la super classe. Par exemple :

function Person (name) {  this.name = name;
}function Author (name) {
  Person.call(this, name); // 继承构造器}
Author.prototype = new Person();
Copier après la connexion

Dans ce code, le type Auteur hérite de Personne. Le nom de l'attribut est en fait géré par la classe Person, donc Person.call(this, name) permet au constructeur Person de continuer à définir l'attribut. Le constructeur Person est exécuté sur celui-ci, qui pointe vers un objet Author, donc le nom final est défini sur cet objet Author.

Par rapport à l'héritage basé sur les objets, l'héritage basé sur le type est plus flexible lors de la création de nouveaux objets. La définition d'un type vous permet de créer plusieurs objets d'instance, qui héritent tous d'une superclasse commune. Le nouveau type doit définir clairement les propriétés et les méthodes qu'il doit utiliser, et elles doivent être complètement différentes de celles de la superclasse.

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 :

Comment éviter les comparaisons nulles dans le développement Web

Pourquoi devez-vous éviter d'utiliser des variables globales dans développement web

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal