Using constructor function to add methods

Question

The classic way to create constructor function is like:

var Obj = function(param){
    this.param = param;
    this.method = function(){ console.log(this.param); }
}

But why i can't do something like this:

Obj.anotherMethod = function(){ //some code }

(I know about Obj.prototype.anotherMethod).

In practical usage i can't understand why use String.prototype.func instead of String.func to define new method. Is it just because String is constructor function and it's impossible to add method to it?

You're only making a single object of this type. Try making two objects of that type and then see if your method is as streamlined (hint, you will want to use the new operator and you will need methods on the new object, not on the function itself). — jfriend00
– jfriend00, Commented Aug 17, 2014 at 22:01

Oriol · Accepted Answer · 2014-08-17 22:07:04Z

1

Those are different things.

If you add a method to Constructor.prototype, it will be available on all instances of Constructor.

You can also add methods to Constructor itself. However, instances won't inherit them.

For example,

charAt method is defined on String.prototype, so you can use both "abc".charAt(1) and String.prototype.charAt.call("abc", 1).
But fromCharCode is defined on String, so you can use String.fromCharCode(65), but "abc".fromCharCode is undefined.

edited Aug 17, 2014 at 22:07

answered Aug 17, 2014 at 22:01

Oriol

291k71 gold badges459 silver badges535 bronze badges

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

3 Comments

Maxx Over a year ago

Is fromCharCode usage is like class static method? And why it is not in prototype?

Oriol Over a year ago

@Maxx It isn't in the prototype because it makes no sense to run it on string instances. Not sure if it is like class static methods because I only know prototypical inheritance, not class inheritance.

Krzysztof Safjanowski Over a year ago

fromCharCode is static method that does not require object instance. Like almost every methods from Math

JustcallmeDrago · Accepted Answer · 2014-08-17 22:10:29Z

0

You can do this with prototypal inheritance. Instead of using constructors, you can have objects inherit from other objects using Object.create(). You can add members to the parent object at any time and they will be available to objects that have the parent as their prototype.

var Base = {a: "a"};
Base.b = "b";
var sub = Object.create(Base); // creates a new object with Base as its prototype
Base.c = "c"; // sub.c will be available because Base is its prototype!
alert(sub.a + sub.b + sub.c); // "abc"

http://jsfiddle.net/kqtm4f8j/

Great article to understand prototypal inheritance patterns:

http://aaditmshah.github.io/why-prototypal-inheritance-matters/

answered Aug 17, 2014 at 22:10

JustcallmeDrago

1,8831 gold badge13 silver badges23 bronze badges

Comments

Mark · Accepted Answer · 2014-08-17 22:12:29Z

Here's a little code that should help. Starting with your constructor:

var Obj = function(param){
    this.param = param;
    this.method = function(){ console.log(this.param); }
}

Now make an instance:

var inst = new Obj("testParam")
//now use it
console.log(inst.param) // logs: "testparam

Now add another parameter to Obj:

Obj.anotherParam = "TestParam2"
console.log(Obj.anotherParam) // <-- Works
console.log(inst.anotherParam) // <-- but this is Undefined on the instance

But if you add it to the prototype:

Obj.prototype.anotherParam = "TestParam2"
console.log(inst.anotherParam) // <-- this now works as expected

The takeaway is that when you add it to the prototype it becomes available to all instances. If you simply add it to the constructor, only the constructor function has the parameter. There are a lot of other ways to do this in Javascript, but understanding the prototype object is a good place to start.

Collectives™ on Stack Overflow

Using constructor function to add methods

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related