widged.com
 

Prototypical inheritance

A case of object-based inheritance

objects inherit from objects

function Pet(name) {
   this.getName = function() { return name; }; 
   this.setName = function(newName) { name = newName; };
}

function Dog(name, breed) {
   Pet.call(this, name); 
   this.getBreed = function() { return breed; }; 
}

// this makes Dog.prototype inherits 
// from Pet.prototype 
Dog.prototype = new Pet();
// this will get the prototype.constructor to point to Pet as well. For instances to point to Dog
Dog.prototype.constructor = Dog;

var dog = new Dog("Buddy", "Great Dane");
(dot is Dog)? yes
(dot is Pet)? yes

(source: Advanced WEb applications with OO Javascript)

As Douglas Crockford says in his article “Prototypal Inheritance in JavaScript”, the JavaScript way of programming is to make prototype objects, and use the simple object function below to make new objects, which inherit from that original object:

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

(source: Advanced WEb applications with OO Javascript)

Use Case

three.js, SkinnedMesh

// define a new type SkinnedMesh and a constructor for it function SkinnedMesh(geometry, materials) {
// call the superclass constructor THREE.Mesh.call(this, geometry, materials);
// initialize instance properties this.identityMatrix = new THREE.Matrix4(); this.bones = []; this.boneMatrices = [];
...
};
// inherit behavior from Mesh SkinnedMesh.prototype = Object.create(THREE.Mesh.prototype); SkinnedMesh.prototype.constructor = SkinnedMesh;
// define an overridden update() method SkinnedMesh.prototype.update = function(camera) {
... // call base version of same method THREE.Mesh.prototype.update.call(this);
};

super

if (typeof Object.inherits !== 'function') { 
	Object.inherits = function(parent, child) {
		function temp() {}; 
		temp.prototype = parent.prototype; 
		child.super_ = parent.prototype; 
		hild.prototype = new temp(); 
		child.prototype.constructor = child;
	}; 
}

Object.inherits(parentConstructor, childConstructor);

Extends Approach

function extend(subClass, superClass) {
	var F = function() {};
	F.prototype = superClass.prototype;
	subClass.prototype = new F();
	subClass.prototype.constructor = subClass;
	subClass.superclass = superClass.prototype;
	if(superClass.prototype.constructor == Object.prototype.constructor) {
		superClass.prototype.constructor = superClass;
	}
}

Give all objects the ability to extend

Object.prototype.extends = function (oSuper) {
	for (sProperty in oSuper) {
        this[sProperty] = oSuper[sProperty];
	}
} 

function ClassA () {
}

function ClassB() {
   this.extends(new ClassA()); // !not! this.extends(ClassA); 
}

(source: Rethinking JavaScript Objects)

Object create polyfill

if (!Object.create) {  
    Object.create = function (o) {  
        if (arguments.length > 1) {  
            throw new Error('Object.create implementation only accepts the first parameter.');  
        }  
        function F() {}  
        F.prototype = o;  
        return new F();  
    };  
}  

(source: Introduction to OO JavaScript Programming @ Mozilla)

Functionally equivalent with better performance

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

(source: higher order javascript)

Module cloning and inheritance

var MODULE_TWO = (function (old) {
	var my = {},
		key;
	
	for (key in old) {
		if (old.hasOwnProperty(key)) {
			my[key] = old[key];
		}
	}
	
	var super_moduleMethod = old.moduleMethod;
	my.moduleMethod = function () {
		// override method on the clone, access to super through super_moduleMethod
	};
	
	return my;
}(MODULE));

(source: javascript module pattern in depth)

 
en/computers/lg/javascript/object-oriented/prototypical-inheritance.txt · Last modified: 2012/03/14 18:49 by marielle
 
RSS - Banner by widged, template © 7throot HeadQuarters, 2007