Adding a property to a "Class" in JavaScript

Question

There are no actual classes in javascript. But you have to work with what you get.

Lets take this example "Class":

var example = function (string) {
  this._self = string;
}

With the above, you could do something like:

var ex = new example("Hello People."),
    display = ex._self; // returns "Hello People."

I thought that by using something like example.prototype.newFun = function(){} would add a new property to that "Class". But it isn't working in my code.

Here is the full code i'm testing:

var example = function (string) {
  this._self = string;//public, var like, storage
}

var showExample = new example("Hello People");
showExample.prototype.display = function (a) {//code stops here, with error "Uncaught TypeError: Cannot set property 'display' of undefined"
  return a;
}
console.log(showExample._self);
console.log(showExample.display("Bye"));

What i'm trying to do is add the display function to the example function as a "public function". I might be doing something wrong.

Answer 1

It's not the object that has the prototype, it's the function that you use to create the object:

var example = function (string) {
  this._self = string;
}

example.prototype.display = function (a) {
  return a;
};

Answer 2

Because there's no prototype for showExample - it's only an instance of example. Try to do this: example.prototype.display = function (a) {} and it will work.

Here's a bit more on classes in JavaScript:

• 3 Ways to "define" classes

• This lovely SO question

• I like the way Classy handles this and also how classes are implemented in CoffeeScript.

Answer 3

You try to add a method to the prototype of the instance of example (showExample). The instance has no prototype. Try example.prototype.display = function() {/*...*/}; (in other words, add the method to the prototype of the constructor of showExample, that is example) and check again. After that, all instances of example 'know' the display method, or in your words, display is 'public' to all instances.

You can add the method to the instance using showExample.display = function() {/*...*/};. Using that, only showExample knows the the display method.

Answer 4

You can modify to the constructor of showExample ..

ex.

showExample.constructor.prototype.display = function (a) {
  return a;
}

Answer 5

in your case showExample is an object of example...

use

example.prototype.display = function(a)...