/    Sign up×
Community /Pin to ProfileBookmark

Two way of changing prototype

Copy linkTweet thisAlerts:
Feb 20.2012

Hi,

I’m always confused about the following way of modifying prototype. Are they the same? Or they slightly different? When to use one vs the other? Thanks!

[CODE]
var Mammal = function (name) {
this.name = name;
};

//first way
Mammal.prototype.get_name = function ( ) {
return this.name;
};

//second way
Mammal.prototype={
get_name: function ( ) {
return this.name;
}
};
[/CODE]

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@aj_nscFeb 20.2012 — <i>
</i>var Animal = function(name) {
this.name = name;
this.type = 'dog';
}

Animal.prototype.getName = function() {
alert(this.name); <br/>
}

Animal.prototype = {
getType : function() { alert(this.type); }
}

var aDog = new Animal('Jamie');
aDog.getType();
aDog.getName();
&amp;#8203;


The second method should never ever be used.

If you have an object that has methods attached to it's prototype, then by using the second method you have posted (Mammal.prototype = {}) you effectively remove all other methods that you may have attached to that prototype. You can see that in the above example.

The second method overwrites all/any methods that were in the prototype while the first method only adds methods to the prototype/modifies an existing method of the same name
Copy linkTweet thisAlerts:
@ypsdauthorFeb 20.2012 — <i>
</i>var Animal = function(name) {
this.name = name;
this.type = 'dog';
}

[/QUOTE]

After the above code, Animal.prototype has two elements

constructor: function(name) {

__proto__: Object

If I use the second way, prototype will not have constructor anymore. What this constructor is for. How it is used in javascript?


The second method should never ever be used.

If you have an object that has methods attached to it's prototype, then by using the second method you have posted (Mammal.prototype = {}) you effectively remove all other methods that you may have attached to that prototype. You can see that in the above example.

The second method overwrites all/any methods that were in the prototype while the first method only adds methods to the prototype/modifies an existing method of the same name[/QUOTE]
Copy linkTweet thisAlerts:
@aj_nscFeb 20.2012 — It references the constructor function. I'm at a loss for give an example of how it could be used, but I'm sure that someone, somewhere has used it before under certain circumstances.

You raise another good point, using the second method overwrites some of JavaScript's 'native' prototype methods.
Copy linkTweet thisAlerts:
@JMRKERMar 15.2012 — @ypsd and @aj_nsc:

Sorry to butt in, but I have a question for either of you...

<i>
</i>&lt;html&gt;
&lt;head&gt;
&lt;title&gt; Untitled &lt;/title&gt;
&lt;script type="text/javascript"&gt;
var Animal = function(name) {
this.name = name;
this.type = 'dog';
}

Animal.prototype.getName = function() { alert('prototype: '+this.name); }
Animal.prototype.getType = function() { alert('prototype: '+this.type); }

var aDog = new Animal('Jamie');
aDog.getType(); aDog.getName();

alert('DOM: '+aDog.type); alert('DOM: '+aDog.name);

&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;/body&gt;
&lt;/html&gt;

Both type of alerts produce the same output.

Why (or would) the prototype have an advantage here (if it does)?
Copy linkTweet thisAlerts:
@aj_nscMar 15.2012 — It doesn't have an advantage at all in the example that's been posted.

In a best practices kind of way, it's good to access/manipulate properties via methods as you can contains different kinds of logic within these methods:

<i>
</i>var Animal = function(name) {
this.name = name;
this.type = 'dog';
}

Animal.prototype.getName = function() {
if(this.name !== undefined) {
alert('prototype: '+this.name);
} else {
alert('This animal is nameless');
}
}

var aDog = new Animal();
aDog.getName(); //alerts 'This animal is nameless'
alert('DOM: '+aDog.name); //alerts undefined


Still not a great example, but it illustrates my point of having logic within these 'getter' methods.

It's quite common for classes in many programming languages (and JavaScript's equivalent) to have getter and setter methods. Getter methods get the value of a property and setter methods set the value of a property.
Copy linkTweet thisAlerts:
@JMRKERMar 15.2012 — It doesn't have an advantage at all in the example that's been posted.

In a [COLOR="Red"]best practices[/COLOR] kind of way, it's good to access/manipulate properties via methods as you can contains [COLOR="Red"]different kinds of logic within these methods[/COLOR]:

...[/QUOTE]

Thanks, that's as good a reason as any for me.
×

Success!

Help @ypsd spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...