I’m going to use this post to go through some of the things I find counterintuitive about Javascript’s Object Orientated design. Note: I pretty much just took Jon Grover’s slides and turned them into a blog post.

I’ll start with the fact that constructors are just functions. And if prototypes are just functions, then why do I need to use “new” before instantiating a new instance?

1
2
3
4
5
6
7
8
9

function Person(name){
  this.name = name;
  this.favorite_color = "blue";
}

var rebecca = new Person("Rebecca");

rebecca.name; // "Rebecca"
rebecca.favorite_color; // "blue"

From my understanding, the “new” tells us where to fill in the “this” references made in the constructor and also places the parent first in the prototype chain. So if I call a method on rebecca that has not been specified, the next place it will look is the Person constructor. This is why I am able to call both rebecca.name and rebecca.favorite_color, even though I did not specifically set rebecca’s favorite color.

Ok, next: what is the deal with private versus public methods? Let’s say I wanted to add a method to the Person prototype…

1
2
3
4
5
6
7
8
9
10
11

function Person(name){
  this.name = name;
  this.favorite_color = "blue";
  function greeting(){
    return "Nice to meet you";
  }
}

var rebecca = new Person("Rebecca");

rebecca.greeting(); //TypeError: undefined is not a function

I would not be able to call rebecca.greeting(); because this method would not be accessible to instances of Person. However, if we wrote it the following way, creating an instance method of ‘this.greet,’ we could call greeting inside the constructor, and then it would be accessible by instances of Person through the instance method.

1
2
3
4
5
6
7
8
9
10
11
12
13

function Person(name){
  this.name = name;
  this.favorite_color = "blue";

  function greeting(){
    return "Nice to meet you";
  }
  this.greet = function(){ return greeting() };
}

var rebecca = new Person("Rebecca");

rebecca.greet(); // "Nice to meet you"

Another way we could have done this without completely redefining the Person constructor, would be to stick with our original constructor, and add functionality for all of its instances by doing:

1

Person.prototype.greet = function(){ return "Nice to meet you"; };

and then we would have been able to call rebecca.greet with no problem. I think about it as going inside the Person constructor, and then substituting prototype.greet with this.greet.

One last oddity appears when dealing with the scope of “this” inside functions in a constructor. As an example, this would come into play if we wanted to incorporate the name of the instance in the greet method, and have rebecca.greet(); return “Nice to meet you. My name is Rebecca.” The following could would NOT work:

1
2
3
4
5
6
7
8
9
10
11
12
13

function Person(name){
  this.name = name;
  this.favorite_color = "blue";

  function greeting(){
    return "Nice to meet you. My name is " + this.name + ".";
  }
  this.greet = function(){ return greeting() };
}

var rebecca = new Person("Rebecca");

rebecca.greet(); //"Nice to meet you. My name is ."

The problem here is that once we enter the greeting function, the scope of this is no longer an instance of the Person constructor. Somehow we need to capture the scope of “this” before we enter the function…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function Person(name){
  this.name = name;
  this.favorite_color = "blue";

  var self = this;

  function greeting(){
    return "Nice to meet you. My name is " + self.name + ".";
  }
  this.greet = function(){ return greeting() };
}

var rebecca = new Person("Rebecca");

rebecca.greet(); //"Nice to meet you. My name is Rebecca."

This method takes advantage of javascript’s unique scoping properties. This would also work!

1
2
3
4
5
6
7
8
9
10
11
12

function Person(name){
  this.name = name;
  this.favorite_color = "blue";

  var self = this;

  this.greet = function(){ return "Nice to meet you. My name is " + self.name + "."; };
}

var rebecca = new Person("Rebecca");

rebecca.greet(); //"Nice to meet you. My name is Rebecca."

Hope this post helped clear some things up about Javascript’s prototype-based design.