CODEWITHSUNDEEP
javascriptfunctionproperties
Red
Red

Reputation: 6378

change property of javascript obj later

In my main template file i have this

var Product = function(){  
   this.is_active = true,
   this.is_bom_enabled = false;
};

Now later i need to modify the Product, mainly i need to add more properties.

I tried

Product.someOtherThing = value; // only work for `Product` and not for new instances

after all 

var SONY = new Product();
SONY.is_active; // true;
SONY.someOtherThing; //undefined

How can i change properties of Product later ?

Upvotes: 0

Views: 36

Answers (2)

Yolo Submarine
Yolo Submarine

Reputation: 55

var Product = function(){
    this.is_active = true,
    this.is_bom_enabled = false;
};

Product.prototype.someOtherThing = value;

var SONY = new Product();
SONY.is_active; // true;
SONY.someOtherThing; //value

Upvotes: 1

T.J. Crowder
T.J. Crowder

Reputation: 1074078

Product is being used as a constructor function. When you use a function as a constructor function (via the new operator), it does this:

  1. new creates a new, blank object, and assigns FunctionName.prototype as the object's prototype.

  2. new calls your constructor function with this referring to that new object.

  3. (In the normal case.) The result of the new expression is a reference to that new object.

So what your code is doing in the Product function is assigning properties to the object created via new. If you want to add to that object, you simply add to it:

var p = new Product();
p.someOtherThing = "some value";

If you want to create properties on the prototype, you assign those to the Product.prototype object.

Product.prototype.someCommonProperty = "some value";

When you refer to a property on an object, the JavaScript engine first looks at the object itself to see if it has the property. If it doesn't, the engine looks at the object's prototype to see if it has the property (and then the prototype's prototype, etc.). So adding properties to the prototype makes them available via the instances that use that prototype.

So let's look at your Product:

var Product = function(){  
   this.is_active = true,
   this.is_bom_enabled = false;
};

var p = new Product();

The object that p refers to has it's own properties is_active and is_bom_enabled. They don't come from its prototype. If we do this:

Product.prototype.someCommonProperty = "some value";

...then if you do p.someCommonProperty, the engine first looks to see if p has its own property someCommonProperty and, since it doesn't, the engine looks to the prototype. Since the prototype has it, it gets the value from there.

Note that use of properties from prototypes is assymmetrical: Getting a property value from an object will use the prototype's version, but setting a property value will always set it on the actual object. So:

console.log(p.someCommonProperty); // "some value" -- from the prototype
p.someCommonProperty = "foo";      // Adds the property to `p`, doesn't change the prototype
console.log(p.someCommonProperty); // "foo" -- from `p`, not the prototype

Upvotes: 2

Related Questions