This vanilla JS script enables you to use a very simple "Object Oriented Programming-Structured" class system. It supports extending classes, overrides, constructors, type checking, and static methods. I've included a sample script called oops-examples.js that demonstrates its use. Check out how the code is used in examples.js and load up examples.htm in your web browser to see it in action.
The setup for OOPS.js is similar to most other JavaScript class libraries, however it is designed to be as simple as possible to set up. All you have to do is create definitions by extending the global OOPS object.
To create classes you can start out be extending OOPS.js:
//Define the class
var MyClass = OOPS.extend({});
var myinstance = new MyClass();The above example just created a class definition called MyClass with no properties or methods. An instance is then created by calling new MyClass().
Let's start over and take the above example a step further:
//Define the class with some methods and properties
var MyClass = OOPS.extend({
foo: 0, //<-Will take on this initial value
_constructor_: function(foo) {
//Use 'this' to refer to the object properties
this.foo = foo;
},
toString: function () {
return "Foo is " + this.foo;
}
});
var myinstance = new MyClass(42);
console.log(myinstance.toString()); //Prints "Foo is 42"
console.log(myinstance.foo); //Prints "42"Now we've created a class with some data. Notice the _constructor_ function has a special functionality, allowing you to specify parameters for the new operator. Whenever new MyClass() is called, it will expect a value for foo to be provided.
Now let's try extending MyClass with a new definition:
//Define the class
var MyClassChild = MyClass.extend({
bar: "^_^",
_constructor_: function(foo) {
//Pass foo up to the parent constructor (kind of like a super() command in traditional OOP)
MyClass.prototype._constructor_.call(this, foo);
}
});
var myinstancechild = new MyClassChild(999);
console.log(myinstancechild.bar); //Prints "^_^"
console.log(myinstance.toString()); //Prints "Foo is 999"In the above example, MyClass was extended by a new class called MyClassChild and given a new property called bar. By binding this to the MyClass prototype functions, we simulate the traditional OOP super() command. The parent function is called but within the context of this (where this is the instance of MyClassChild). And you can see we have direct access to the parent's toString() since it was automatically passed down by OOPS.js.
(Note: For super calls that only go up one level, you may call them without the class name like so: this._super_.prototype.myMethod.call(this, arg1, arg2...). Unfortunately _super_ which is provided by OOPS.js can only traverse upward one level, since the context of this._super_ becomes invalid after the first call)
Class definitions can also have static properties and methods by defining the reserved _statics_ object:
//Define the class
var MyStaticClass = OOPS.extend({
_statics_: {
message: "Hello Static World!",
getMessage: function() {
return MyClass.message + " ~toString";
}
}
/* Other normal class properties can also be added if desired */
});
//No need to instantiate anything in this case since we are only accessing statics
console.log(MyStaticClass.getMessage()); //Prints "Hello Static World! ~toString"
console.log(MyStaticClass.message; //Prints "Hello Static World!"Statics are a great way to create singletons to act as global objects when you know you won't need to create multiple instances.
OOPS.js comes with a couple of extra built in functions that you can use:
OOPS.typeMatch(class1, class2) - Provided two class definitions or instances of a class, returns true if they are of the same type. Returns false otherwise.
OOPS.descendantOf(child, parent); - Tests to see if the child is a descendant of parent. The values provided can either be class definitions, or instances of the class.
And of course OOPS.js naturally supports the instanceof operator!
Free to use in any projects without notifying me, nor is credit needed (though it'd be much appreciated!). Just do not re-distribute it under anyone else's name and be sure to retain the copyright notice in the source!
1.1.2
- Readme update (Node.js)
1.1.1
- Minor syntax change
1.1.0
- Greatly simplified the setup structure by using standard JS practices
- Replaced
_parent_property with_super_
(99% backwards compatible with 1.0.0)
1.0.0
- Initial release
Copyrighted © 2013 by Greg McLeod
GitHub: https://github.com/cleod9