Set prototype of the module in Javascript

Question

I've seen in some tests that using prototype methods increases the performance of the code execution and reduces the memory consumption, since methods are created per class, not per object. At the same time I want to use the module pattern for my class, since it looks nicer and allows to use private properties and methods.

The layout of the code is like the following:

var MyClass = function() {
var _classProperty = "value1";

var object = {
  classProperty : _classProperty
};

object.prototype = {
  prototypeProperty = "value2"
}

return object;
}

But the prototype in this case doesn't work. I've found that the reason is that prototypes are set for the functions, not the object. So I suppose that I should use object.__proto__.prototype instead of just object.prototype. But the __proto__ is not supported by all browsers and doesn't comply to ECMAScript5 rules.

So is there a better way to use prototypes in the module pattern object constructor?

I have never heard of __prop__. Do you mean __proto__? Maybe you want to have a look at Object.create: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…. — Felix Kling
– Felix Kling, Commented Jun 3, 2013 at 11:59
Have you actually implemented this? There are syntax problems here. — Mutahhir
– Mutahhir, Commented Jun 3, 2013 at 11:59
For the kind of objects you're wanting to build, I'd suggest you look here: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…. — Mutahhir
– Mutahhir, Commented Jun 3, 2013 at 12:03
Shouldn't you use MyClass.prototype instead of object.prototype ? — fernandosavio
– fernandosavio, Commented Jun 3, 2013 at 12:24

Bergi · Accepted Answer · 2013-06-03 12:29:05Z

1

The prototype property is the one you have to set on constructor functions. And the module pattern uses an IEFE (for local variables), which returns the "class" constructor.

var MyClass = (function() {
    var _classProperty = "value1";

    function MyClass() {
        this.instanceProperty = …;
        …
    }

    MyClass.prototype.prototypeProperty = "value2";
    …

    return MyClass;
})();

Then:

var instance = new MyClass;
console.log(instance.instanceProperty);
console.log(instance.prototypeProperty);

answered Jun 3, 2013 at 12:29

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

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

2 Comments

BartoNaz Over a year ago

Thanks, this precisely answers my question. I thought that the feature of the module pattern is that it doesn't need this keyword. It turns out, that I was wrong. I wonder if there is any reason to enclose the constructor function in brackets. From my test I haven't noticed any difference between (function() {})() and function() {}() when looking at the object created by such constructor. Is there any performance improvement?

Bergi Over a year ago

Actually they are equivalent here, only it's good practice to indicate the IEFE by wrapping it in parenthesis (in case you don't see the invocation far below). And it would be a syntax error without the assignment…

basilikum · Accepted Answer · 2013-06-03 13:00:05Z

1

You have to set the prototype of your constructor function:

var MyClass = function() {
    var _classProperty = "value1";
    this.classProperty = _classProperty;
};

MyClass.prototype = {
    prototypeProperty : "value2"
};

var instance = new MyClass();
console.log(instance.classProperty); //value1
console.log(instance.prototypeProperty); //value2

FIDDLE

EDIT

This is not an implementation of the module pattern but the constructor pattern. Neverless, it allows for private properties and methods (as far as JavaScript allows for that). But if your goal really was to implement the module pattern, take a look at Bergi's answer.

edited Jun 3, 2013 at 13:00

answered Jun 3, 2013 at 12:28

basilikum

10.5k5 gold badges49 silver badges58 bronze badges

6 Comments

Bergi Over a year ago

That's not a module pattern

basilikum Over a year ago

Yes but the module pattern isn't really nessecary to implement private properties and methods. And that seemed to be the goal.

Bergi Over a year ago

Yeah, maybe I did misunderstood the OP and he didn't really want to make a module…

basilikum Over a year ago

I wasn't sure either but from the code he posted, I thought this might be sufficient. On the other hand it really says "module pattern" in the last sentence. Well, but I think I'll keep it that way.

BartoNaz Over a year ago

Thank a lot. Both answers are very similar and work exactly as I wanted. Is there really any difference between the 2 implementations? Does module pattern give any advantage here?

|

Collectives™ on Stack Overflow

Set prototype of the module in Javascript

2 Answers 2

2 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related