I want to create a model of a class, let's say
var car = function(){
var color;
this.setColor = function(clr){
color = clr;
}
}
Now I want some more classes, for example volvo(). But I also want all the stuff, car() has, to use it in volvo(), like this
var volvo = function(){
...probably some code here
this.getColor = function(){
return color;
}
}
How do I do that?
What you are trying to achieve is called inheritance and since JavaScript is not class-based like Java, C# and other languages and it is based on prototypes, it is not that easy to achieve.
There are many ways of achieving it:
One way is to use frameworks such as Backbone.js, AngularJS or Ember.js. Then in your model class, basically you can use the Extend keyword and then get the inheritance out of the box.
Another way is that you include the following code, wrote by John Resig (creator of jQuery) into your application:
/* Simple JavaScript Inheritance
* By John Resig http://ejohn.org/
* MIT Licensed.
*/
// Inspired by base2 and Prototype
(function(){
var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;
// The base Class implementation (does nothing)
this.Class = function(){};
// Create a new Class that inherits from this class
Class.extend = function(prop) {
var _super = this.prototype;
// Instantiate a base class (but only create the instance,
// don't run the init constructor)
initializing = true;
var prototype = new this();
initializing = false;
// Copy the properties over onto the new prototype
for (var name in prop) {
// Check if we're overwriting an existing function
prototype[name] = typeof prop[name] == "function" &&
typeof _super[name] == "function" && fnTest.test(prop[name]) ?
(function(name, fn){
return function() {
var tmp = this._super;
// Add a new ._super() method that is the same method
// but on the super-class
this._super = _super[name];
// The method only need to be bound temporarily, so we
// remove it when we're done executing
var ret = fn.apply(this, arguments);
this._super = tmp;
return ret;
};
})(name, prop[name]) :
prop[name];
}
// The dummy class constructor
function Class() {
// All construction is actually done in the init method
if ( !initializing && this.init )
this.init.apply(this, arguments);
}
// Populate our constructed prototype object
Class.prototype = prototype;
// Enforce the constructor to be what we expect
Class.prototype.constructor = Class;
// And make this class extendable
Class.extend = arguments.callee;
return Class;
};
})();
After you load this code, you will be able to use it for your problem:
var Car = Class.Extend({
setColor: function(clr){
color = clr;
}
});
var volvo = Car.Extend({
getColor: function () {
return color;
}
});
Read about it in the JavaScript Inheritance by John Resig post. Good luck!
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments