Explication détaillée des exemples d'héritage Javascript non constructeur

Cet article vous présente l'implémentation de "l'héritage" sans utiliser de constructeurs. C'est très simple. Les amis le connaîtront très bien s'ils le comprennent bien.

1. Qu'est-ce que l'héritage du « non-constructeur » ?

Par exemple, il y a un objet appelé "Chinois".

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

Il existe un autre objet appelé "Docteur".

　var Doctor ={ career:'医生' }

Comment puis-je laisser « Docteur » hériter du « Chinois » ? En d'autres termes, comment puis-je générer un objet « Docteur chinois » ?

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.

function object(o) {

　　　　function F() {}

　　　　F.prototype = o;

　　　　return new F();

　　}

Cette fonction object() ne fait en fait qu'une seule chose, c'est-à-dire pointer l'attribut prototype de l'objet enfant vers l'objet parent, faisant ainsi l'objet enfant Connecté à l'objet parent. Lors de l'utilisation de

, 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 = '医生';

À ce stade, l'objet enfant a hérité des attributs de l'objet parent. 　

alert(Doctor.nation); //中国

3. Copie superficielle

En plus d'utiliser la « chaîne de prototypes », il existe une autre façon de penser : copier le Les attributs de l'objet parent sont tous copiés sur les objets enfants et l'héritage peut également être obtenu.

La fonction suivante est destinée à la copie :

　　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 : 　

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

Cependant, il y a 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, et sa valeur est un tableau. 　

Chinese.birthPlaces = ['北京','上海','香港'];

Grâce à la fonction extendCopy(), Doctor hérite du chinois.

var Doctor = extendCopy(Chinese);

Ensuite, on ajoute une ville pour le « lieu de naissance » du Docteur :

Doctor.birthPlaces.push('厦门');

Que s'est-il passé ? Le « lieu de naissance » des Chinois a également été modifié !

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

Ainsi, extendCopy() copie uniquement 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 réaliser la copie fidèle de tableaux et d'objets. Sa mise en œuvre n'est pas difficile, il suffit d'appeler "copie superficielle" de manière récursive.

　　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; }

Écrivez comme ceci lorsque vous l'utilisez :

var Doctor = deepCopy(Chinese);

Maintenant, ajoutez un attribut à l'objet parent avec la valeur comme un tableau. Ensuite, modifiez cet attribut sur l'objet enfant : 　

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

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

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

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

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!