Issue with javascript inheritance using function prototype

Question

I want to use inheritance concept in js, so what i did is

function myGarage(x) {
        var _x = x;
        Object.defineProperty(this, "BenZ", {
            get: function () {
                return _x;
            },
            set: function (value) {
                _x = value;
            },
            enumerable: true,
            configurable: true
        });
    }
    myGarage.prototype = new MyCar();
    function MyCar() {
     var _x =0;
        Object.defineProperty(this, "Audi", {
            get: function () {
                return _x;
            },
            set: function (value) {
                _x = value;
            },
            enumerable: true,
            configurable: true
        });
    }

After this i created there instance for myGarage.

        var g1 = new myGarage(true);
        var g2 = new myGarage(false);
        var g3 = new myGarage("null");

The problem here is when i set g1.Audi = 10; all other instance of myGarage's Audi will hold the sample value

(eg)

    g1.Audi = 10;
    var a = g2.Audi // a is 10
    var b = g3.Audi; // b is 10

but i set the value to g1.

what i need is other instance must hold the default value or undefined

Esailija · Accepted Answer · 2012-06-11 12:11:09Z

3

First of all, a garage wouldn't inherit from a car but would rather hold many car instances.

Secondly, you are not using the javascript object model but closures. In the closure model, an object doesn't own "its data" but is treated as a dumb store for closures that are the real owners of the data. With the closure model you lose features like inheritance.

To use inheritance, you would do like:

function MyCar() {
    this.Audi = 0;
}

MyCar.prototype = {
             //Todo: name the method properly
    setAudi: function(audi) {
        this.Audi = audi; //Do bunch of other stuff here
    },

    constructor: MyCar
};

function MyGarage(x) {
    this.Benz = x;
}

MyGarage.prototype = Object.create( MyCar.prototype );

MyGarage.prototype.constructor = MyGarage;

MyGarage.prototype.garageMethod1 = function() {

};

var g1 = new MyGarage(null),
    g2 = new MyGarage(false),
    g3 = new MyGarage(true);

    console.log( g1.Benz, g2.Benz, g3.Benz );
    //null false true

The above has some boilerplate which can be mitigated with many libraries out there. I don't have any particular recommendations.

More about javascript's Object Model: https://developer.mozilla.org/en/JavaScript/Guide/Details_of_the_Object_Model

edited Jun 11, 2012 at 12:11

answered Jun 11, 2012 at 11:17

Esailija

140k24 gold badges280 silver badges328 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

BalaKrishnan웃 Over a year ago

thanks for your response, if i do like this means , i set g1.Audi = 10; that is not going to use the MyCar's Audi prop it will create a new thing right ?

Esailija Over a year ago

@BalaKrishnan if you use this model, then setting g1.Audi = 10 will not affect g2 or g3. It will set it for g1 only.

BalaKrishnan웃 Over a year ago

Actually, i want to know it will create a prop or not, because when a value is set to Audi, i am going to do somthing with that value, so that i use the "Object.defineProperty", in you recommendation the Object.defineProperty'set is not call when the value set to Audi.

Esailija Over a year ago

@BalaKrishnan in that case you want a method like setAudi() with a higher level name of course that describes it better. I have edited the Car prototype.

Esailija Over a year ago

@BalaKrishnan I suggest you learn the basics before trying to learn advanced features like Object.defineProperty. I'm not sure what "not working" means, anyway.

|

Rajagopal 웃 · Accepted Answer · 2012-06-11 13:25:43Z

0

try the following code, this works fine,

$(document).ready(function () {

        var g1 = new MyGarage(true);
        var g2 = new MyGarage(false);
        var g3 = new MyGarage("null");
        g1.Audi = 10;
        var a = g2.Audi
        var b = g3.Audi;

    });
    function MyCar() {
        var _x = 1;
        Object.defineProperty(this, "Audi", {
            get: function () {
                return _x;
            },
            set: function (value) {
                _x = value;
            },
            enumerable: true,
            configurable: true
        });
    }
    function MyGarage(x) {
        MyCar.apply(this, arguments);
        var _x = x;
        Object.defineProperty(this, "BenZ", {
            get: function () {
                return _x;
            },
            set: function (value) {
                _x = value;
            },
            enumerable: true,
            configurable: true
        });
    }
    MyGarage.prototype = new MyCar();

answered Jun 11, 2012 at 13:25

Rajagopal 웃

8,5617 gold badges33 silver badges44 bronze badges

2 Comments

Esailija Over a year ago

There is no inheritance though, you are just defining everything on the object itself. The line MyGarage.prototype = new MyCar(); Is superfluous.

BalaKrishnan웃 Over a year ago

take a look at this developer.mozilla.org/en/JavaScript/Guide/…

Angel · Accepted Answer · 2012-06-11 11:57:19Z

0

Check this simple javascript inheritance by John Resig, you will find it amazing: http://ejohn.org/blog/simple-javascript-inheritance/

answered Jun 11, 2012 at 11:57

Angel

1,2009 silver badges14 bronze badges

Collectives™ on Stack Overflow

Issue with javascript inheritance using function prototype

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related