03.Héritage

gistfile1.js

/**

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)

**/