Strict Standards: Declaration of action_plugin_discussion::register() should be compatible with DokuWiki_Action_Plugin::register($controller) in /home/mlange/widged.com/wiki/lib/plugins/discussion/action.php on line 15

Strict Standards: Declaration of action_plugin_importoldchangelog::register() should be compatible with DokuWiki_Action_Plugin::register($controller) in /home/mlange/widged.com/wiki/lib/plugins/importoldchangelog/action.php on line 182

Strict Standards: Declaration of action_plugin_importoldindex::register() should be compatible with DokuWiki_Action_Plugin::register($controller) in /home/mlange/widged.com/wiki/lib/plugins/importoldindex/action.php on line 57

Strict Standards: Declaration of action_plugin_include::register() should be compatible with DokuWiki_Action_Plugin::register($controller) in /home/mlange/widged.com/wiki/lib/plugins/include/action.php on line 140

Strict Standards: Declaration of action_plugin_indexmenu::register() should be compatible with DokuWiki_Action_Plugin::register($controller) in /home/mlange/widged.com/wiki/lib/plugins/indexmenu/action.php on line 131

Strict Standards: Declaration of action_plugin_syntaxhighlighter3::register() should be compatible with DokuWiki_Action_Plugin::register($controller) in /home/mlange/widged.com/wiki/lib/plugins/syntaxhighlighter3/action.php on line 109

Strict Standards: Declaration of action_plugin_tag::register() should be compatible with DokuWiki_Action_Plugin::register($controller) in /home/mlange/widged.com/wiki/lib/plugins/tag/action.php on line 80

Strict Standards: Declaration of action_plugin_task::register() should be compatible with DokuWiki_Action_Plugin::register($controller) in /home/mlange/widged.com/wiki/lib/plugins/task/action.php on line 178

Warning: Cannot modify header information - headers already sent by (output started at /home/mlange/widged.com/wiki/lib/plugins/discussion/action.php:15) in /home/mlange/widged.com/wiki/inc/auth.php on line 313

Warning: Cannot modify header information - headers already sent by (output started at /home/mlange/widged.com/wiki/lib/plugins/discussion/action.php:15) in /home/mlange/widged.com/wiki/inc/actions.php on line 163
widged wiki » en:computers:lg:javascript:object-oriented:prototypical-inheritance
    widged.com
 

Strict Standards: Declaration of syntax_plugin_code::render() should be compatible with DokuWiki_Syntax_Plugin::render($format, &$renderer, $data) in /home/mlange/widged.com/wiki/lib/plugins/code/syntax.php on line 40

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