A lot of people's first introduction to javascript is through Codecademy. I think a lot of beginners start out with Codecademy because it's a fun and easy way to learn Javascript's basic syntax. In the beginning, understanding the basic logic behind the Javascript methodologies taught by Codecademy is relatively easy, but for many people I think that tends to stop being the case when they get to the object oriented section or thereabouts. This is where the course teaches you to create multiple objects with similar properties using Javascript's Object constructor (using the 'new' keyword).

This pseudoclassical instantiation pattern is very popular, and Codecademy teaches it because it is the easiest and most efficient way of creating objects that follow a class pattern.

They don't delve into the inner workings of how the object constructor works because they don't want to confuse beginners unnecessarily, but I think it's useful to understand why we're able to create objects in javascript using the keywords 'this' and 'new'.

Here's how the Object Constructor works on the surface:

1) First, you define the properties you want your class of objects to have, by attaching them to the 'this' keyword inside of a function expression. This will be your 'Constrcutor Function':

var Car = function(x,y){
    this.Horsepower = x;
    this.Topspeed = y;
}

2) You use the 'new' keyword in conjunction with the constructor function to instantiate new Objects with the specified properties:

//lets make two new Cars
var ferrari = new Car(600,230);
var prius = new Car(130,120);

console.log(ferrari.Topspeed) 
//this would return 230

console.log(prius.Horsepower) 
//this would return 130

Understanding why the code above works the way it does, requires an understanding of what the 'this' keyword means, and what the 'new' keyword actually does.

What does 'this' do?

To illustrate quickly one of the key functionalities of the 'this' keyword, let me show you what happens in the code example below, when you invoke dog.bark():

var barkFunction = function(){
    console.log('Woof woof, I'm a ' + this.breed)
 }

var dog = {
    breed: 'bulldog',
    bark: barkFunction
}

dog.bark() 
//this would log "Woof woof I'm a bulldog"

**Within the definition of barkFunction, the 'this' keyword is basically like a variable that refers to any object. Which object it refers to, you can't really know until you invoke it on something. In this code, the function is being attached to dog as dog's bark method. The 'this' keyword basically says, 'I will refer to whatever object this function gets attached to'. Since in this instance it is being attached to the dog object, 'this' refers to the dog object, and when dog.bark() is called, this.breed will actually refer to dog.breed. 
Lets look at the car example again:

Now that you understand one of the key ways 'this' is used in javascript, let's re-examine the way it's implemented with the Object constructor.

var Car = function(x,y){
  this.Horsepower = x;
  this.Topspeed = y;
}

**Right now, 'this' is simply a variable that refers to nothing. If you were to call Car() right now, it would return nothing. It will only refer to a value when the Car function gets invoked with the 'new' keyword. 

var ferrari = new Car(600,230);
var prius = new Car(130, 120);

console.log(ferrari.Topspeed)     
//this would return 230
console.log(prius.Horsepower)   
//this would return 130

What's happening here is that when the ferrari and prius objects are instantiated using the 'new' keyword, if you look inside the Car constructor function, you can imagine that javascript automatically creates (under the hood) a ghost object*, which it magically assigns 'this' to point to. Since 'this' references the ghost object, the ghost object now contains all of the properties that 'this' contains. The ghost object then gets returned by the constructor function, which is why new Car(x,y) actually returns an object even though the Car function itself doesn't contain a return statement.

*The ghost object actually starts as an object that references Car.prototype, which is an empty object unless we add other properties to it ourselves, but don't worry about that for now. That will be covered in a later post.

Now that you know how the object constructor works, the question becomes, "How can we use it to create subclasses"? Check in for the next post, as that is a complicated topic.

comments powered by Disqus