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

Answer 1

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

• BalaKrishnan웃: 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: @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웃: 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: @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: @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.

Answer 2

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();

• Esailija: There is no inheritance though, you are just defining everything on the object itself. The line MyGarage.prototype = new MyCar(); Is superfluous.
• BalaKrishnan웃: take a look at this developer.mozilla.org/en/JavaScript/Guide/…

Answer 3

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