Skip to content

Instantly share code, notes, and snippets.

@fdutey fdutey/gist:2358352
Created Apr 11, 2012

Embed
What would you like to do?
03.Héritage
/**
Comme nous l'avons vu, il n'y a pas de classe en JavaScript.
La notion même d'héritage tel que conçu de manière traditionnelle n'a donc aucun sens.
Il existe plusieurs façons de concevoir et mettre en oeuvre l'héritage en JS:
* héritage de prototype
* héritage classique
* copie
==== héritage de prototype
**/
var Dad = function(){ this.family = 'Galt'; }
var Kid = function(){}
Kid.prototype = new Dad();
var john = new Kid();
john.family; //=> 'Galt'
var GrandKid = function(){}
GrandKid.prototype = john;
var bob = new GrandKid();
bob.family; //=> 'Galt'
/**
====
**/
bob.hasOwnProperty('family'); //=> false
bob.__proto__.hasOwnProperty('family'); //=> false
bob.__proto__.__proto__.hasOwnProperty('family'); //=> true
john.family = 'Doe'
bob.family; //=> 'Doe'
bob.__proto__.hasOwnProperty('family'); //=> true
delete john.family;
bob.family; //=> 'Galt'
/**
==== Effet indésirable
**/
bob.constructor === Kid; //=> false
bob.constructor === Dad; //=> true
/**
==== Facile à résoudre
**/
Kid.prototype.constructor = Kid;
GrandKid.prototype.constructor = GrandKid;
/**
==== isPrototypeOf
**/
john.isPrototypeOf(bob); //=> true
Kid.prototype.isPrototypeOf(bob); //=> true
/**
==== instanceOf
**/
bob instanceof GrandKid; //=> true
bob instanceof Kid; //=> true
bob instanceof Dad; //=> true
/**
==== héritage classique
* il n'y a pas de classe en JS
* les objets héritent d'autres objets
* l'héritage classique consiste à considérer qu'un constructeur est une classe
====
**/
function Parent(){
this.name = 'parent';
}
Parent.prototype.getName = function(){
return this.name;
}
function Child();
Object.inherit(Child, Parent);
/**
====
**/
Object.inherit = function(Child, Parent){
Child.prototype = new Parent();
}
/**
- On perd le constructeur
- Quels arguments passer au constructeur parent?
====
**/
Object.inherit = function(Child, Parent){
Child.prototype = Parent.prototype;
}
/**
- On perd toujours le constructeur
- On perd aussi la logique du constructeur parent
- Que se passe-t-il si j'ajoute un méthode sur le prototype de Child?
====
**/
Object.inherit = function(Child, Parent){
var F = function(){};
F.prototype = Parent.prototype;
Child.prototype = new F();
}
Child.prototype.constructor; // Parent()
/**
- On perd toujours le constructeur
- On perd toujours la logique du constructeur parent
- On ne partage plus les méthodes
====
**/
Object.inherit = function(Child, Parent){
var F = function(){};
F.prototype = Parent.prototype;
Child.prototype = new F();
Child.prototype.constructor = Child;
}
/**
- On perd toujours la logique du constructeur parent
====
**/
Object.inherit = function(Child, Parent){
var F = function(){};
F.prototype = Parent.prototype;
Child.prototype = new F();
Child.prototype.constructor = Child;
Child.superConstructor = Parent.prototype.constructor;
}
function Child(args){
this.constructor.superConstructor.call(this, args);
}
/**
====
**/
Object.inherit = function(Child, Parent){
var F = function(){};
F.prototype = Parent.prototype;
Child.prototype = new F();
Child.prototype.constructor = Child;
Child.superConstructor = Parent.prototype.constructor;
Child.superClass = Parent.prototype;
}
function Child(args){
this.constructor.superConstructor.call(this, args);
//ou
this.constructor.superClass.constructor.call(this, args);
}
Child.prototype.meth = function(){
this.constructor.superClass.meth.call(this);
}
/**
==== Héritage par copie
**/
Object.extend = function(Parent){
var i, Child = {};
for(i in parent){
if(Object.prototype.hasOwnProperty.call(parent, i)){
Child[i] = Parent[i];
}
}
return Child;
}
/**
====
**/
var parent = { a: 1 };
var child = Object.extend(parent);
child.a; //=> 1
/**
====
* Cette implémentation naïve ne permet que de faire une copie de "surface".
* On peut faire de la copie avancée en utilisant la récursion
* L'intérêt est de mettre en oeuvre l'héritage multiple mais surtout les mixins (dans un autre chapitre)
**/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.