How do I create a model of a function?

Question

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?

Answer 1

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!

Answer 2

You can do it without any additional libraries - it's just slightly more long-winded.

jsFiddle

First set up a car class and give it some methods (setColor, setMake and setModel):

function car(make,model){
    console.log( 'car constructor' );
    this.setMake( make );
    this.setModel( model );
}
car.prototype.setColor = function(color){ this.color = color; };
car.prototype.setMake  = function(make ){ this.make  = make;  };
car.prototype.setModel = function(model){ this.model = model; };
car.prototype.toString = function(){ return 'This is a ' + this.color + ' ' + this.make + ' ' + this.model + ' car' };

Then you can inherit from the car:

function volvo( model ){
    console.log( 'volvo constructor' );
    car.call( this, 'volvo', model );
}
volvo.prototype = Object.create( car.prototype );
volvo.prototype.constructor = volvo;

Looking at the various sections then:

• function volvo( model ){} defines a volvo class.
  • And within the constructor car.call( this, 'volvo', model ); is used to call the constructor of the parent class with a fixed make of volvo.
• volvo.prototype = Object.create( car.prototype ); sets the volvo class to inherit from the car class.
• volvo.prototype.constructor = volvo; is used to ensure that the volvo class uses the volvo constructor (without this line the previous statement would cause it to use the car constructor).

We can then test this:

var c = new car('Ford', 'Fiesta');
c.setColor('Red');
console.log( c.toString() );

var v = new volvo( 'S10' );
v.setColor( 'Grey' );
console.log( v.toString() );

The output is (including the log entries showing when the constructors were called):

car constructor
This is a Red Ford Fiesta car
volvo constructor
car constructor
This is a Grey volvo S10 car

And if you need a polyfill for Object.create then you can use:

if (!Object.create) {
  Object.create = (function(){
    function F(){}

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

Answer 3

function Car(color) {
    this.getColor = function() {
        return color;   
    };

    this.extend = function() {
        function F() {};
        F.prototype = this;
        return new F();
    };
}

car = new Car("black");
console.log(car.getColor());

vw = car.extend();
vw.slogan = function() { return "Das Auto"; };

console.log(vw.getColor());
console.log(vw.slogan());

gulf = vw.extend();
gulf.isHatchBack = function() { return true; };

console.log(gulf.getColor());
console.log(gulf.slogan());
console.log(gulf.isHatchBack());

Answer 4

Probably you might find this also interesting: http://jsbin.com/IgOCAvI/1/edit

function Car() {
  this.carData = {};
}

Car.prototype = {

  set: function(ob) {
    var obType = Object.prototype.toString.call(ob);
    if( ob && obType.match('Obj') ){
      for (var key in ob) {
        if ( ob.hasOwnProperty(key) ){
          this.carData[key] = ob[key];
          // console.log("Stored: "+ key +':'+ ob[key] ); // TEST
        }
      }
    }else{
      // alert(ob +' ('+obType+')\n is not an Object!');
    } 
  }, 

  get: function(key) {
    if(typeof key == "string"){
      var arr = key.replace(/ /g, "").split(',');
      for(var i=0; i<arr.length; i++){ arr[i] = this.carData[arr[i]]; }
      // console.log( arr ); // TEST
      return arr;
    }else{ // Return the whole Object!
      // console.log( JSON.stringify(this.carData, null, 2) ); // TEST
      return this.carData;
    }
  }

};

Usage:

// Create new instance of Car 
var car1 = new Car();

// Populate with values
car1.set({manufacturer:"Volvo", model:"S40", color:"green", doors:5, damage:"front fender"});
// Get Array collection
console.log(  car1.get("color")  );                    // [Green]
console.log(  car1.get("color, doors, firstOwner")  ); // [Green, 5, undefined]
// Get whole Object
console.log(  car1.get()  );                           // [object Object]
// Get specific value from Object
console.log(  car1.get().color  );                     // "Green"
// Let's change a key value
car1.set({color:"red"});
// Test 
console.log(  car1.get()  );  


//  CAR2
var car2 = new Car();
// let's see if the car2 inherited some property of car1
console.log( car2.get('color') );  // [undefined] // nope.
car2.set({manufacturer:"Nissan", model:"Micra", color:"gray", doors:3, damage:"none"});
// ...