JavaScript OOP: Object instantiation and adding properties using different syntaxes

Question

I am trying to dig deeper into JavaScript OOP practices. In general I get the idea, but some questions remain, especially regarding object instantiation and adding of methods.

When creating a constructor function, I have used these two versions in the past:

function MyConstructor(someArg) {
    this.arg = someArg;
}

var MyConstructor = function(someArg) {
    this.arg = someArg;
}

Both can be initialized in the same way, but are they identical? I am asking because in one of them, the object’s name is the function’s name, in the other one the actual object is created in an anonymous function.

When it comes to adding methods to the object, I encountered several variations which is really confusing to me because I don’t really understand if it’s just a different syntax or if they work differently.

This one adds a function to the prototype of MyConstructor, which means all instances will have access to it, also objects extending MyConstructor because it’s in the prototype chain.

MyConstructor.prototype.showArg = function() {
    console.log(this.arg);
}

Sometimes I also see things like this:

MyConstructor.prototype = {
    showArgument:function() {
        console.log(this.arg);
    },
};

Is this the same as in the first example (MyConstructor.prototype.showArg = function()…)?

Then I've also encountered a syntax like this, which doesn’t work for me – is it because showArg is added only to one specific instance, but not to the prototype?

MyConstructor.showArg = function() {
    console.log(this.arg);
}

Also, there also seems to be a jQuery way of doing this:

$.extend(MyConstructor.prototype, {
    showArgument:function() {
        console.log(this.arg);
    },
});

This is probably the same as the first two example because it adds properties to the prototype, it it?

Firstly, `Object.prototype` is an object. When you do `Object.prototype.property = ...` you're changing a property, but when you do `Object.prototype = {...}` you're setting the entire value. Secondly, [**function expression vs declaration in JavaScript**](http://stackoverflow.com/questions/336859/var-functionname-function-vs-function-functionname) — adeneo, Oct 14 '15 at 21:15

score 4 · Accepted Answer · answered Oct 14 '15 at 22:07

4

MyConstructor.prototype refers to the object. when you assign it like

MyConstructor.prototype = {
    showArgument:function() {
        console.log(this.arg);
    },
};

It is actually creating a new object with showArgument as one property. All other default properties through prototypical inheritance are lost. But when you do

MyConstructor.prototype.showArg = function() {
    console.log(this.arg);
}

This extends the existing object to have an additional property showArg keeping other properties intact.

JQuery's extend() API provides a way to extend an object and add properties to it. It is more of a JQuery way of doing things.

answered Oct 14 '15 at 22:07

JsingH

189
7

I never realized that in the first example the default prototype is lost – how could I miss that! But just to clarify: In your first example, that would be `Object.prototype`, but what would it be in my first example? `Function.prototype`? – Sven Oct 15 '15 at 17:51
Yes. Any object created herits from `Object.prototype` while function from `Function.prototype`. – JsingH Oct 16 '15 at 17:02

Dave Newton · Answer 2 · 2016-03-23T15:25:57.787

1

The prototype example is most definitely not the same thing; in the second example you completely remove everything from the prototype except the showArgument function.

Only Sets showArg

MyConstructor.prototype.showArg = function() {
    console.log(this.arg);
}

Sets prototype to only showArgument

MyConstructor.prototype = {
    showArgument:function() {
        console.log(this.arg);
    },
};

edited Mar 23 '16 at 15:25

answered Oct 14 '15 at 21:15

Dave Newton

158,873
26
254
302

JavaScript OOP: Object instantiation and adding properties using different syntaxes

2 Answers2