Cet article présente principalement les différentes manières, avantages et inconvénients d'une compréhension approfondie de l'héritage JavaScript . Les amis intéressés peuvent s'y référer
.Écrit devant
Cet article explique les différentes méthodes d'héritage ainsi que les avantages et les inconvénients de JavaScript.
Remarque :
est identique à "JavaScript en profondeur Création d'objets", plutôt comme des notes.
Hé, laissez-moi soupirer encore : "JavaScript Advanced Programming" est vraiment bien écrit !
1. Héritage de chaîne de prototypes
function Parent () {
this.name = 'kevin';
}
Parent.prototype.getName = function () {
console.log(this.name);
}
function Child () {
}
Child.prototype = new Parent();
var child1 = new Child();
console.log(child1.getName()) // kevinProblème :
1.références attributs< de type 🎜> est partagé par toutes les instances, par exemple :
function Parent () {
this.names = ['kevin', 'daisy'];
}
function Child () {
}
Child.prototype = new Parent();
var child1 = new Child();
child1.names.push('yayu');
console.log(child1.names); // ["kevin", "daisy", "yayu"]
var child2 = new Child();
console.log(child2.names); // ["kevin", "daisy", "yayu"]<🎜. >
2. Emprunter unConstructeur(héritage classique)
function Parent () {
this.names = ['kevin', 'daisy'];
}
function Child () {
Parent.call(this);
}
var child1 = new Child();
child1.names.push('yayu');
console.log(child1.names); // ["kevin", "daisy", "yayu"]
var child2 = new Child();
console.log(child2.names); // ["kevin", "daisy"]1. sont partagés par toutes les instances
2. Vous pouvez transmettre des paramètres à Parent in Child
Par exemple :
Inconvénients :function Parent (name) {
this.name = name;
}
function Child (name) {
Parent.call(this, name);
}
var child1 = new Child('kevin');
console.log(child1.name); // kevin
var child2 = new Child('daisy');
console.log(child2.name); // daisyLes méthodes sont toutes Définie dans le constructeur, la méthode sera créée à chaque création d'instance.
3. Héritage combiné
L'héritage de chaîne prototype et l'héritage classique sont deux épées combinées.
function Parent (name) {
this.name = name;
this.colors = ['red', 'blue', 'green'];
}
Parent.prototype.getName = function () {
console.log(this.name)
}
function Child (name, age) {
Parent.call(this, name);
this.age = age;
}
Child.prototype = new Parent();
var child1 = new Child('kevin', '18');
child1.colors.push('black');
console.log(child1.name); // kevin
console.log(child1.age); // 18
console.log(child1.colors); // ["red", "blue", "green", "black"]
var child2 = new Child('daisy', '20');
console.log(child2.name); // daisy
console.log(child2.age); // 20
console.log(child2.colors); // ["red", "blue", "green"]est l'implémentation simulée d'ES5
function createObj(o) {
function F(){}
F.prototype = o;
return new F();
}.create, utilisant l'objet entrant comme prototype d'objet créé. . Inconvénients :
Les valeurs d'attribut contenant des types de référence partageront toujours la valeur correspondante, ce qui est la même que l'héritage de chaîne de prototype.
Remarque : lorsque la valeur devar person = {
name: 'kevin',
friends: ['daisy', 'kelly']
}
var person1 = createObj(person);
var person2 = createObj(person);
person1.name = 'person1';
console.log(person2.name); // kevin
person1.firends.push('taylor');
console.log(person2.friends); // ["daisy", "kelly", "taylor"] ne change pas parce que person1.name et person2.name ont des valeurs de nom indépendantes, mais à cause de. person1 , en ajoutant une valeur de nom à person2, sans modifier la valeur de nom sur le prototype. person1.name = 'person1'person1
Créer une fonction qui est uniquement utilisée pour encapsuler le processus d'héritage. Cette fonction améliorera l'objet sous une forme interne. l'objet est restitué.
function createObj (o) {
var clone = object.create(o);
clone.sayName = function () {
console.log('hi');
}
return clone;
}
Pour la commodité de la lecture de chacun, le code de l'héritage combiné est répété ici :
function Parent (name) {
this.name = name;
this.colors = ['red', 'blue', 'green'];
}
Parent.prototype.getName = function () {
console.log(this.name)
}
function Child (name, age) {
Parent.call(this, name);
this.age = age;
}
Child.prototype = new Parent();
var child1 = new Child('kevin', '18');
console.log(child1)Une fois lors de la définition du prototype d'une instance de sous-type :
Une fois lors de la création d'une instance de sous-type :Child.prototype = new Parent();
var child1 = new Child('kevin', '18');
Parent.call(this, name);
Donc, dans cet exemple, si nous imprimons l'objet child1, nous constaterons que Child.prototype et child1 ont tous deux un attribut appelé couleurs, et la valeur de l'attribut est ['red', 'blue', ' vert'] .
Alors, comment pouvons-nous continuer à nous améliorer et éviter les appels répétés cette fois-ci ?
Et si nous n'utilisons pas Child.prototype = new Parent(), mais laissons indirectement Child.prototype accéder à Parent.prototype ?
Voyons comment l'implémenter :
Enfin nous encapsulons cette méthode d'héritage :function Parent (name) {
this.name = name;
this.colors = ['red', 'blue', 'green'];
}
Parent.prototype.getName = function () {
console.log(this.name)
}
function Child (name, age) {
Parent.call(this, name);
this.age = age;
}
// 关键的三步
var F = function () {};
F.prototype = Parent.prototype;
Child.prototype = new F();
var child1 = new Child('kevin', '18');
console.log(child1);function object(o) {
function F() {}
F.prototype = o;
return new F();
}
function prototype(child, parent) {
var prototype = object(parent.prototype);
prototype.constructor = child;
child.prototype = prototype;
}
// 当我们使用的时候：
prototype(Child, Parent);La grande efficacité de cette méthode reflète le fait qu'elle n'appelle le constructeur Parent qu'une seule fois, et évite ainsi de créer des attributs inutiles et redondants sur Parent.prototype. Dans le même temps, la chaîne de prototypes reste inchangée ; par conséquent, instanceof et isPrototypeOf peuvent toujours être utilisés normalement. Les développeurs pensent généralement que l'héritage compositionnel parasite est le paradigme d'héritage le plus idéal pour les types de référence.
【Recommandations associées】
1.
Recommandation spéciale : "php Programmer Toolbox" version V0.1 Télécharger 2.
Tutoriel vidéo en ligne js gratuitphp.cn Dugu Jiujian (3) - Tutoriel vidéo JavaScriptCe 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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
