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`: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create. — Felix Kling, Jun 03 '13 at 11:59
Have you actually implemented this? There are syntax problems here. — Mutahhir, Jun 03 '13 at 11:59
For the kind of objects you're wanting to build, I'd suggest you look here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create. — Mutahhir, Jun 03 '13 at 12:03
Shouldn't you use `MyClass.prototype` instead of `object.prototype` ? — fernandosavio, Jun 03 '13 at 12:24
`MyClass.prototype` doesn't work either. Since the instance of the `MyClass` is `object`, which is created as a literal, it means that it inherits from `Object` class, I suppose. — BartoNaz, Jun 03 '13 at 12:30
@BartoNaz that is why you need to use constructor functions to make use of the prototype. If you just create new objects on the fly with `a = {prop:1};` then this object will only inherit from the `Object` object. — basilikum, Jun 03 '13 at 12:32

basilikum · Answer 1 · 2013-06-03T13:00:05.307

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 03 '13 at 13:00

answered Jun 03 '13 at 12:28

basilikum

10,378
5
45
58

That's not a module pattern – Bergi Jun 03 '13 at 12:31
Yes but the module pattern isn't really nessecary to implement private properties and methods. And that seemed to be the goal. – basilikum Jun 03 '13 at 12:36
Yeah, maybe I did misunderstood the OP and he didn't really want to make a module… – Bergi Jun 03 '13 at 12:50
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. – basilikum Jun 03 '13 at 12:54
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? – BartoNaz Jun 03 '13 at 13:02
I'm not completely sure but I would say that originally the module pattern is meant to be used if you want to create a single object (the module), that has some private methods and some public methods. The constructor pattern is used to have a class-like function, that you can call with the `new` keyword to create multiple instances, that also have something like private und public methods and properties. Of course you can mix these patterns and create something in between. Here is a link if you want to read more about JavaScript design pattern: http://tinyurl.com/crdgdzn – basilikum Jun 03 '13 at 13:13

score 1 · Accepted Answer · answered Jun 03 '13 at 12:29

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 03 '13 at 12:29

Bergi

630,263
148
957
1,375

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? – BartoNaz Jun 03 '13 at 14:02
1

Actually [they](http://stackoverflow.com/questions/423228/difference-between-function-and-function) 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… – Bergi Jun 03 '13 at 14:19

Set prototype of the module in Javascript

2 Answers2

Linked