(Open Source) Examples of JavaScript Prototypical OO
Bounty Edit:
I'm looking for code written in a pure prototypical OO paradigm (think Self). Not a mixture of prototypical OO and classical OO. I don't want to see generic OO wrappers but simply usage of prototypical OO techniques and only prototypical OO techniques.
Reference Related Question:
Prototypical OO in JavaScript
In the above question I mainly focused on
Can write prototypical OO like this?
Do we need constructors and initialization logic, What are the alternatives?
New question:
Basically are there any good examples of javascript prototypical OO in large open source projects?
Clarification:
I will have to clarify what I mean with prototypical OO :
- There are no classes. There are only Objects.
- There is zero emulation of the concepts of classes, again there is only objects and cloning objects to create new objects.
Further Clarification of Prototypical OO:
The difference between prototypical OO in JavaScript and classical OO emulation is a very grey area. It's not that I value avoiding classical OO. I want to learn prototypical OO in an academic fashion in it's own right, without learning the (probably more optimum) combination of classical OO emulation and prototypical OO.
This is why I "ban" classes, just so that I can see these techniques in a pure fashion and extend my own OO tool kit.
Example开发者_如何学运维s:
Popular examples like jQuery fail to meet the second criteria. The jQuery object is one big class emulation. It focuses on creating new objects from a class rather then cloning existing objects.
If I actually knew any example of using "pure" prototypical OO I would have shown you. I believe 99% of JavaScript OO is too heavily influenced by classical emulation.
Bonus points
If
- It's well comented / documented
- Has unit tests
- Is on github.
I will also accept articles / tutorials and examples on how to write prototypical OO code that goes beyond your trivial hello world application.
You will not find it.
I went looking for this sort of thing a while ago, and this is what I found: the Self Paper Organizing Programs Without Classes (Look at Citeseer for a PDF version.) This paper discusses the best practices for Self, the original prototypal language, and the best practice is to use the "traits object idiom", which is to have your objects inherit from "traits objects" that contain only methods, and no object specific data. In other words, an object that is suspiciously like a class.
Even the original prototypal language emulates classes.
Have you taken a look at OMeta/JS? OMeta is an experimental research pattern matching language based on Smalltalk and Self. OMeta/JS is an implementation in javascript using prototypical OO.
It is well commented and documented with many examples. It is also on Github.
http://tinlizzie.org/ometa-js/
https://github.com/alexwarth/ometa-js
Edit: OMeta is the result of Alexander Warth's PhD disertation.
I'm not exactly sure what you are looking for, but my current framework allows you to program in OO fashion like so:
Cin.define({
name: 'MyApp.Logger',
extends: 'Cin.Component',
implements: ['MyApp.ILogger'],
mixes: {
SomeMixin: 'MyApp.SomeMixin'
},
init: function() {
},
method: function() {
},
statics: {
staticMethod: function() {}
}
});
And then you can write code like:
var instance = new MyApp.Logger();
instance.method();
MyApp.Logger.staticMethod();
I am not trying to emulate classical OO here. I am trying to make a convenient and useful way to declare inheritance, mixins, interfaces, and general OO concepts so that it becomes easy for the developer to write such OO code. This also gives me the chance to finish my auto loading component so that you no longer take care of dependencies and you can make custom builds and enjoy faster development thanks to not needing to load 100 scripts per each page load.
If you want to learn prototypical OO concepts, I think you should write some kind of inheritance system. Take a look at Dojo Toolkit or ExtJS. A good thing to remember is that Prototype-based systems twist and mangle, they are more powerful than Class-based OO languages. In my opinion, there is no single right way to write prototypal code.
I'm afraid though that most if not all inheritance systems might look like they emulate classical OO. In my opinion, my framework does not, but then it's not even finished.
Probably JSLint (Crockford's a proponent of prototypical inheritance, but I haven't combed through every inch of it). It's also looks more functional than Object Oriented, but then I expect that's generally the case with code that truly embraces prototypical inheritance.
In my framework, everything is an object or an "interface".
Interfaces define the common functions (methods / property_gets / property_sets) that objects may have.
You create an interface like this: var some_interface = GetInterface(constructor, interface_setup, parent_interface..)
You can specify any number of parent_interfaces. So if interface_A inherits both interface_B and interface_C, you can create interface_A as such: GetInterface(constructor, interface_setup, interface_B, interface_C);
If interface_A inherits interface_X and interface_X inherits interface_Y, then interface_A will have all the functions which both interface_X and interface_Y has.
Interfaces which do not require a constructor will leave the constructor argument as null. The interface_setup is a function which looks like this:
function(proto){
}
The object that the proto argument points to has 4 methods: SetM, ShadowM, SetP, and ShadowP.
You use these 4 methods to setup your interface.
This framework also provides lazy instantiation of interfaces. (in other words the setup code will never actually be ran until it is actually first needed).
Limitations of this framework requires at least support for Object.keys, Object.getOwnPropertyDescriptor and Object.defineProperty. (In other words it works in the latest versions of FireFox, IE, Chrome, Safari but not Opera)
TestPage2.html:
<!doctype html>
<script src="js.js"></script>
<script>
var human = GetInterface(function(){
},function(proto){
//alert("trace: initing human");
proto.$SetM("Sleep",function(){
alert(this.Name+" is sleeping");
});
proto.$SetP("Name",function(){
return this._name;
},function(value){
this._name=value;
});
});
var female = GetInterface(function(){
},function(proto){
//alert("trace: initing female");
proto.$SetM("Dance",function(){
alert(this.Name+" is dancing");
});
},human);
var male = GetInterface(function(){
},function(proto){
//alert("trace: initing male");
proto.$SetM("Fight",function(){
alert(this.Name+" is fighting");
});
proto.$ShadowP("Name",function(parent_get){
return "Mr. "+parent_get();
},function(parent_set,value){
parent_set(value);
});
},human);
var child = GetInterface(function(){
},function(proto){
//alert("trace: initing child");
proto.$SetM("Play",function(){
alert(this.Name+" is playing");
});
},human);
var adult = GetInterface(function(){
},function(proto){
//alert("trace: initing adult");
proto.$SetM("Work",function(){
alert(this.Name+" is working");
});
},human);
var mammal = GetInterface(function(){
},function(proto){
//alert("trace: initing mammal");
proto.$SetM("DoMammalStuff",function(){
alert("doing mammal stuff");
});
});
var john=new male();
john.Name="john";
john.Sleep();
var mary=new female();
mary.$IsA(child);
mary.$IsA(mammal);
mary.$Setup(function(proto){
proto.$ShadowP("Name",function(parent_get){
return "Miss "+parent_get.call(this);
},function(parent_set,value){
parent_set.call(this,value);
});
});
mary.Name="mary";
mary.Play();
</script>
TestPage.html:
<!doctype html>
<script src="js.js"></script>
<script>
var human_interface = GetInterface(function(){
},function(proto){
alert("trace: initing human");
proto.$SetM("Sleep",function(){
alert(this.Name+" is sleeping");
});
proto.$SetP("Name",function(){
return this._name;
},function(value){
this._name=value;
});
});
var female_interface = GetInterface(function(){
},function(proto){
alert("trace: initing female");
proto.$SetM("Dance",function(){
alert(this.Name+" is dancing");
});
},human_interface);
var male_interface = GetInterface(function(){
},function(proto){
alert("trace: initing male");
proto.$SetM("Fight",function(){
alert(this.Name+" is fighting");
});
},human_interface);
var child_interface = GetInterface(function(){
},function(proto){
alert("trace: initing child");
proto.$SetM("Play",function(){
alert(this.Name+" is playing");
});
},human_interface);
var adult_interface = GetInterface(function(){
},function(proto){
alert("trace: initing adult");
proto.$SetM("Work",function(){
alert(this.Name+" is working");
});
},human_interface);
var mammal_interface = GetInterface(function(){
},function(proto){
alert("trace: initing mammal");
proto.$SetM("DoMammalStuff",function(){
alert("doing mammal stuff");
});
});
var john={};
john.$IsA(adult_interface);
//the above 2 lines are equal to simply doing:
//var john=new adult_interface();
//you can think of it as a shortcut
john.$IsA(mammal_interface);
john.DoMammalStuff();
john.Name="john";
john.Sleep();
var mary=new female_interface();
mary.$IsA(child_interface);
mary.$IsA(mammal_interface);
mary.DoMammalStuff();
mary.Name="mary";
mary.Play();
mary.Dance();
</script>
Js.js:
"use strict";
var GetInterface;
(function(){
//================================================================================//
//(constructor:Function, setup:Function?, parent_interfaces:Function..):Function
GetInterface = function (constructor, setup) {
var parent_classes = GetParray(arguments, 2);
var output = function () {
output.$Init();
for (var x = parent_classes.length - 1; x >= 0; --x) {
parent_classes[x](this);
}
if(constructor===null){
constructor.apply(this, arguments);
}
};
output.$Init = Mize(function () {
var output_proto = output.prototype;
parent_classes.forEach(function (parent_class) {
parent_class.$Init();
Infect(output_proto, parent_class.prototype);
});
init_proto(output_proto,setup);
if(setup!==undefined){
setup(output_proto);
}
});
return output;
};
var init_proto=function(proto){
$defineProperty(proto, "$SetM", { value: set_m, writable: true, configurable: true });
$defineProperty(proto, "$ShadowM", { value: shadow_m, writable: true, configurable: true });
$defineProperty(proto, "$SetP", { value: set_p, writable: true, configurable: true });
$defineProperty(proto, "$ShadowP", { value: shadow_p, writable: true, configurable: true });
};
var set_m = function (method_name, method) {
this[method_name] = method;
};
var set_p = function (property_name, getter, setter) {
$defineProperty(this, property_name, { get: getter, set: setter, enumerable: true, configurable: true });
};
var shadow_m = function (method_name, supplied_method) {
var old_method = this[method_name];
this[method_name] = function () {
var args = GetParray(arguments);
args.unshift(old_method.bind(this));
supplied_method.apply(this, args);
};
};
var shadow_p = function (property_name, getter, setter) {
var old_descriptor = $getOwnPropertyDescriptor(this, property_name);
var old_get = old_descriptor.get;
var old_set = old_descriptor.set;
$defineProperty(this, property_name, { get: function () {
return getter.call(this, old_get.bind(this));
}, set: function (value) {
setter.call(this, old_set.bind(this), value);
}, enumerable: true, configurable: true
});
};
var $slice=Array.prototype.slice;
var $defineProperty=Object.defineProperty;
var $getOwnPropertyDescriptor=Object.getOwnPropertyDescriptor;
if($defineProperty===undefined){
throw "Object.defineProperty, Object.getOwnPropertyDescriptor, Object.keys are required";
}
//================================================================================//
//(victim:Object, disease:Object):void
var Infect=function (victim, disease, excludes) {
var keys=Object.keys(disease);
if(excludes!==undefined){
excludes.forEach(function(exclude){
ForEach(keys,function(key,x){
if(key===exclude){
keys.splice(x,1);
return false;
}
});
});
}
keys.forEach(function(key){
$defineProperty(victim, key, $getOwnPropertyDescriptor(disease, key));
});
};
//================================================================================//
//(args:Object # arguments object #, start_index:int?):Array
var GetParray = function (args, start_index) {
if (start_index === undefined) {
start_index = 0;
}
return $slice.call(args, start_index);
};
//================================================================================//
//(array:Array, f:Function(item:Object|null, index:pint):boolean?):Object
var ForEach=function(array,f){
for (var x = 0, xx = array.length, last_index=xx-1; x < xx; ++x) {
var result = f(array[x], x, last_index);
if (result !== undefined) {
return result;
}
}
};
//================================================================================//
//provides memoization.
//(f:Function, arity_fixed:boolean?true):Function
//caching is done according to the inputs. the results of calling function(undefined) and function() are cached differently.
//if arity is fixed, optimizations can be done
var Mize=function(f, arity_fixed) {
if (arity_fixed === undefined) {
arity_fixed = true;
}
var used; //for 0 arg
var result; //for 0 arg
var results; //for >0 args
var used_params; //for 1 arg
var used_param_sets; //for >1 args
var f_length = f.length;
var use_generic = !arity_fixed || f_length > 3;
if (use_generic) { //if `f_length` <= 3, it will be optimized (i.e. not using generic function)
results = [];
used_param_sets = [];
return function () {
var params = GetParray(arguments);
var result_found = false;
var result = ForEach(used_param_sets,function (used_param_set, x) {
if (used_param_set.length === params.length) {
var params_match = true;
ForEach(params,function (param, y) {
if (used_param_set[y] !== param) {
params_match = false;
return false;
}
});
if (params_match) {
result_found = true;
return results[x];
}
}
});
if (!result_found) {
used_param_sets.push(params);
result = f.apply(null, params);
results.push(result);
}
return result;
};
}
if (f_length === 0) {
used = false;
return function () {
if (!used) {
result = f();
used = true;
}
return result;
};
}
if (f_length === 1) {
used_params = [];
} else {
used_param_sets = [];
}
results = [];
switch (f_length) {
case 1:
return function (arg) {
var result_found = false;
var result = ForEach(used_params,function (used_param, x) {
if (arg === used_param) {
result_found = true;
return results[x];
}
});
if (!result_found) {
used_params.push(arg);
result = f(arg);
results.push(result);
}
return result;
};
break;
case 2:
return function (arg1, arg2) {
var result_found = false;
var result = ForEach(used_param_sets,function (used_param_set, x) {
if (arg1 === used_param_set[0] && arg2 === used_param_set[1]) {
result_found = true;
return results[x];
}
});
if (!result_found) {
used_param_sets.push([arg1, arg2]);
result = f(arg1, arg2);
results.push(result);
}
return result;
};
break;
case 3:
return function (arg1, arg2, arg3) {
var result_found = false;
var result = ForEach(used_param_sets,function (used_param_set, x) {
if (arg1 === used_param_set[0] && arg2 === used_param_set[1] && arg3 === used_param_set[2]) {
result_found = true;
return results[x];
}
});
if (!result_found) {
used_param_sets.push([arg1, arg2, arg3]);
result = f(arg1, arg2, arg3);
results.push(result);
}
return result;
};
break;
default:
throw "Invalid `f_length`: " + f_length;
}
};
//================================================================================//
Object.prototype.$Setup=function(setup){
setup(Object.getPrototypeOf(this));
};
//================================================================================//
Object.prototype.$IsA=function(_interface){
var excludes=GetParray(arguments,1);
if(this.$SetM===undefined){
this.$SetM=set_m;
this.$SetP=set_p;
this.$ShadowM=shadow_m;
this.$ShadowP=shadow_p;
}
_interface.$Init();
/*var this_proto={};
init_proto(this_proto);
Infect(this_proto,Object.getPrototypeOf(this));
this.__proto__=this_proto;*/
Infect(Object.getPrototypeOf(this),_interface.prototype,excludes);
};
//================================================================================//
})();
ExtJS is an excellent example of JavaScript OO. It implements a really sophisticated, enterprise-level OO hierarchy in JavaScript that does a lot of things out of the box. It may be a daunting read (last I checked in 3.X, it was over 1MB of raw, uncompressed JavaScript), but it'd give you a lot of ideas. You could start out by reviewing the documentation to get a high-level view.
I'm currently using a inheritance plugin model which attempts to combine the prototypical OO pattern with jQuery plugin pattern. Its posted in detail in my answer here: attaching a class to a jQuery object
Note: Do not get turned away by mention of the word Class
Here is an example showing the basis of the OO programming that you are looking for. Best real-world example would be jQuery probably.
When learning JavaScript, you have to keep in mind that it is actually closer to Scheme than it is C or Java at its roots. Basically it is Scheme in C's syntax.
There is almost never a case where you should use "new" in JavaScript, especially if you are writing APIs. It seems as the "new" operator was added in because it JavaScript was not sure about its prototypal framework. For most of us that start programming with classical languages such as C, C++, and Java, this seems odd, as "new" is generally exactly what we are looking for, because it translates easily.
Why shouldn't I use "new" you ask? Well, due to the implementation of "new", you can inadvertently start wiping out your global data (which remember, is everything not in a function in JavaScript). If you happen to fall prey to this, then you will not see any errors, or notifications, but only see unpredictable behavior in your program. Also, it may or may not be clear as to what "this" actually is bound to within your "class".
The wipe out your global memory without knowing it problem mainly occurs when you write a function that is intended to be called with "new" and the user does not use "new". Hints why using it in APIs can lead to unhappy users.
The correct way to object oriented "classes" and inheritance is to use JavaScript's most powerful attribute...the object.
You can write a function to return an object to establish a "class". Anything you put into this object (numbers, strings, methods, etc.) are all public properties of your "class". Anything you write within your function that is not inside that object that is being returned, is private.
To inherit from your "class", you can simply initialize your object that you will be returning to a your "base class" result and then extend its functionality.
The following sections of code will show how to construct a base class with private and public variables, and the do 2 levels of inheritance.
Base Object
//Base Object
var Animal = function(spec) {
//This is our output object
//Everything provided from 'spec' and
//everything not addded to 'that' will
//be 'private'. Everything added to
//'that' is 'public'.
var that = {};
//Private Methods
function extend(obj1,obj2) {
for(var key in obj2) {
obj1[key] = obj2[key];
}
}
//Private Variables
var defaults = {
name : 'Default Name',
food : 'Default Food',
saying : 'Default Saying',
}
extend(defaults,spec);
//Public Methods
that.name = function() {
return defaults.name;
}
that.eats = function() {
if(typeof(defaults.food) === 'string') {
return defaults.food;
} else if(typeof(defaults.food) === 'object') {
return defaults.food.join(', ');
}
}
that.says = function() {
return defaults.saying;
}
return that;
}
var myAnimal = Animal(); //Create a new instance
alert(myAnimal.name()); //Alerts 'Default Name'
alert(myAnimal.eats()); //Alerts 'Default Food'
alert(myAnimal.says()); //Alerts 'Default Saying'
alert(myAnimal.saying); //Alerts 'undefined'
//alert(myAnimal.extend()); //Has No Method Error
var myAnimal2 = Animal({ //Create a new instance using a spec
name : 'Mike',
food : ['Chicken','Duck'],
saying : 'Rawr',
});
alert(myAnimal2.name()); //Alerts 'Mike'
alert(myAnimal2.eats()); //Alerts 'Chicken, Duck'
alert(myAnimal2.says()); //Alerts 'Rawr'
Inheritance
//Inheritance Object
var Mammal = function(spec) {
//Private Methods
//Have to redefine this since
//I decided to use this as an
//example of a private method
function extend(obj1,obj2) {
for(var key in obj2) {
obj1[key] = obj2[key];
}
}
//Private Variables
//New list of defaults
var defaults = {
name : 'Mammal',
attributes : ['fur'],
}
extend(defaults,spec);
//Inherrit from our Animal Object
//Use Mammal defaults
var that = Animal(defaults);
that.attributes = function() {
if(typeof(defaults.attributes) === 'string') {
return defaults.attributes;
} else if(typeof(defaults.attributes) === 'object') {
return defaults.attributes.join(', ');
} else {
return false;
}
}
return that;
}
//Second-Level Inheritance
var Cat = function(spec) {
//Private Methods
//Have to redefine this since
//I decided to use this as an
//example of a private method
function extend(obj1,obj2) {
for(var key in obj2) {
obj1[key] = obj2[key];
}
}
//Private Variables
//New list of defaults
var defaults = {
name : 'Cat',
saying : 'Meow',
food : ['fish','birds','frogs','MeowMix'],
fur_color : 'Default Fur Color',
attributes : ['fur','claws','crazy eyes','long tail'],
}
extend(defaults,spec);
//Inherrit from our Mammal Object
//We use our defaults for the cat
var that = Mammal(defaults);
that.fur_color = function() {
return defaults.fur_color;
}
that.purr = function(n) {
var str = '';
for(var i=0;i<n;i++) {
if(i === 0) {
str = 'p-';
} else if(i === n-1) {
str += 'r';
} else {
str += 'r-';
}
}
return str
};
return that;
}
var myMammal = Mammal();
alert(myMammal.name()); //Alerts Mammal
alert(myMammal.attributes()); //Alerts 'fur'
var myCat = Cat();
alert(myCat.name()); //Alerts Cat
alert(myCat.says()); //Alerts Meow
var toonces = Cat({
name : 'Toonces the Driving Cat',
food : ['Whiskas','ham'],
saying : 'Meeeooooowww',
fur_color : 'Black',
attributes : [
'Can Drive a Car', 'Claws',
'fur','crazy eyes','long tail',
'Steals Hub Caps',
],
});
alert(toonces.name()); //Alerts 'Toonces the Driving Cat'
alert(toonces.says()); //Alerts 'Meeooooowww'
alert(toonces.eats()); //Alerts 'Whiskas, ham'
alert(toonces.fur_color()); //Alerts 'Black'
alert(toonces.attributes()); //Alerts 'Can Drive a Car, Claws,
//fur, crazy eyes, long tail,
// Steals Hub Caps',
alert(toonces.purr(5)); //Alerts 'p-r-r-r-r'
EDIT: I was alerted that I did not use the "prototype" object. I did this, as to avoid HAVING to use the "new" operator, as mentioned in the text above. For completeness, I will give an example using the prototype object below...
Inheritance with the Prototype Object
//Building a class to use the prototype object
var Dog = function(spec) {
var that = this;
//Private Methods
//Have to redefine this since
//I decided to use this as an
//example of a private method
function extend(obj1,obj2) {
for(var key in obj2) {
obj1[key] = obj2[key];
}
}
//Private Variables
//New list of defaults
var defaults = {
name : 'Dog',
saying : 'Woof',
food : ['bacon'],
fur_color : 'Default Fur Color',
attributes : ['fur','Barks at Mailman'],
}
//Attach the properties of a Mammal to "self"
this.self = new Mammal(defaults);
//Add a function to get the name
this.getName = function() {
return that.self.name();
}
}
//Extend the prototype
Dog.prototype.growl = "grrrrrrr";
//Make a new dog...HAVE TO CALL NEW HERE OR ELSE BAD THINGS CAN HAPPEN
d= new Dog();
alert(d.growl); //Alerts 'grrrrrrr'
alert(d.getName()); //Alerts 'Dog'
alert(d.self.says()); //Alerts 'Woof'
Please feel free to ask me about any of this post. Enjoy.
加载中,请稍侯......
精彩评论