Héritage JavaScript non constructeur

1. Qu'est-ce que l'héritage du « non-constructeur » ?
Par exemple, il y a un objet appelé "Chinois".

Le code est le suivant :

　var Chinese = { 
　　　　nation:'中国' 
　　};

Il y a aussi un objet appelé "Docteur".

Le code est le suivant :

var Doctor ={ 
　　　　career:'医生' 
　　}

Comment puis-je laisser "médecin" hériter du "chinois", c'est-à-dire comment puis-je générer un "médecin chinois" " "L'objet de "?
Il convient de noter ici que ces deux objets sont des objets ordinaires, pas des constructeurs, et « l'héritage » ne peut pas être implémenté à l'aide de la méthode constructeur.

2. Méthode Object()

Douglas Crockford, l'inventeur du format json, a proposé une fonction object() qui peut faire cela petit.

Le code est le suivant :

　function object(o) { 
　　　　function F() {} 
　　　　F.prototype = o; 
　　　　return new F(); 
　　}

Cette fonction object() ne fait en fait qu'une seule chose, qui est de pointer l'attribut prototype de l'objet enfant vers l'objet parent, donc connectez l'objet enfant à l'objet parent.
Lors de son utilisation, la première étape consiste à générer un objet enfant basé sur l'objet parent :
　var Doctor = object(Chinese);
Ensuite, ajoutez les attributs de l'objet enfant lui-même :
Doctor.career = 'Doctor';
À ce stade, l'objet enfant a hérité des attributs de l'objet parent.
　alert(Doctor.nation); //Chine

3. Copie superficielle

En plus d'utiliser la "chaîne prototype" , Il existe une autre façon de penser : copier toutes les propriétés de l'objet parent vers l'objet enfant peut également réaliser l'héritage.
La fonction suivante copie :

Le code est le suivant :

　function extendCopy(p) { 
　　　　var c = {}; 
　　　　for (var i in p) { 
　　　　　　c[i] = p[i]; 
　　　　} 
　　　　c.uber = p; 
　　　　return c; 
　　}

Lors de son utilisation, écrivez comme ceci :

Le code est le suivant :

var Doctor = extendCopy(Chinese); 
　　Doctor.career = '医生'; 
　　alert(Doctor.nation); // 中国

Il y a cependant un problème avec une telle copie. Autrement dit, si les propriétés de l'objet parent sont égales à celles d'un tableau ou d'un autre objet, alors en fait, ce que l'objet enfant obtient n'est qu'une adresse mémoire, pas une copie réelle, il est donc possible que l'objet parent ait été trafiqué.
Veuillez voir, ajoutez maintenant un attribut "lieu de naissance" au chinois, sa valeur est un tableau.
Chinese.birthPlaces = ['Beijing','Shanghai','Hong Kong'];
Grâce à la fonction extendCopy(), Doctor hérite du chinois.
　var Doctor = extendCopy(Chinese);
Ensuite, nous ajoutons une ville pour le « lieu de naissance » du docteur :
　Doctor.birthPlaces.push('Xiamen'); Le « lieu de naissance » des Chinois a également été modifié !
alert(Doctor.birthPlaces); //Pékin, Shanghai, Hong Kong, Xiamen
alert(Chinese.birthPlaces); //Pékin, Shanghai, Hong Kong, Xiamen
Donc, extendCopy() copie simplement le type de données de base, nous appelons cette copie « copie superficielle ». C'est ainsi que l'héritage a été implémenté au début de jQuery.

4. Copie profonde

La soi-disant « copie profonde » est la capacité de copier des tableaux et des objets dans le vrai sens du terme. Sa mise en œuvre n'est pas difficile, il suffit d'appeler "copie superficielle" de manière récursive.

Le code est le suivant :

function deepCopy(p, c) { 
　　　　var c = c || {}; 
　　　　for (var i in p) { 
　　　　　　if (typeof p[i] === 'object') { 
　　　　　　　　c[i] = (p[i].constructor === Array) ? [] : {}; 
　　　　　　　　deepCopy(p[i], c[i]); 
　　　　　　} else { 
　　　　　　　　　c[i] = p[i]; 
　　　　　　} 
　　　　} 
　　　　return c; 
　　}

Lorsqu'il est utilisé, écrivez comme ceci :

var Doctor = deepCopy(Chinese); add Une propriété dont la valeur est un tableau. Ensuite, modifiez cet attribut sur l'objet enfant :


Le code est le suivant :

A ce moment, l'objet parent ne sera pas affecté.

Chinese.birthPlaces = ['北京','上海','香港']; 
Doctor.birthPlaces.push('厦门');

Le code est le suivant :

Actuellement, la bibliothèque jQuery utilise cette méthode d'héritage.

alert(Doctor.birthPlaces); //北京, 上海, 香港, 厦门 
alert(Chinese.birthPlaces); //北京, 上海, 香港

【Tutoriels associés recommandés】

1

Tutoriel vidéo JavaScript

2 Manuel en ligne JavaScript
3. Tutoriel bootstrap