[Lucas Galego] JavaScript Object Oriented Programming

When I started to work as a developer, I remember that my fellow programmers used to hate JavaScript.
I myself was not a real fan of this incredible language.
That’s why I decided to study it more deeply.
During my studies, one thing came clear to me:

JavaScript is one of the most powerfull languages I ever seen.

But… There is always a but.

Its API is terrible.

But since JavaScript is a language ready to be extended, we solve this problem using some great tools like jQuery or Undescore.js, that make the JavaScript API be really beautiful.

JavaScript is a really powerfull language, so, we can program in JavaScript using a lot of paradigms.

Let’s talk about how to implement your JavaScript code using Object Oriented Programming.

JavaScript and OOP

To understand how to make OOP code using JavaScript, we first need to understand how the variable this works.

console.log(this);

If you run this code, the console will log to you an instance of the DOM Window object representing the window of your browser (this will change if you are running this on a Node.js server).

That means that in the global scope this is the Window object.

Okay, so what if we run this code:

function some(){

console.log(this);

}

some();

If you run, you will see that again Window is logged.

That means that the this of a function is the same this from the scope where the function is defined.

So, how can I create an object and make its this referencing it?

Creating a JavaScript Object

var myObj = {

some: function(){console.log(this);}

};

myObj.some();

Now we are getting somewhere, When you run this code, it’s an Object that is logged, not a Window Object, just an Object.

If you inspect the logged object, you will se that it has a property called some. This property is a function, the function that we called.

Once we have an object, we can add properties to it:

myObj.coolProperty = “JavaScript rocks”;

And also retrieve these properties:

console.log(myObj.coolProperty)

console.log(myObj[‘coolProperty’]

Note that the properties are like keys of a map. You can retrieve them using the [] syntax, so, you can pass the properties as parameters.

var myObj = {

func1: function(){console.log(“Called 1″)},

func2: function(){console.log(“Called 2″)}

}

myObj[“func2″]();

This will prompt “Called 2″.

Creating constructors

There is another way to create an object:

function MyObject(){

this.some = function(){console.log(this);};

}

myObj = new MyObject();

console.log(myObj.some());

We just created a constructor. If you run this code, you will se now MyObject at the console.

Since we created this object using the function new, this was redefined from Window to MyObject.

Thats why when we make this.some = function(){console.log(this);}; inside the function MyObject the function is defined inside our MyObject instance.

So what happens if we run this code:

function MyObject(){

this.some = function(){console.log(this);};

}

myObj = MyObject();

console.log(myObj);

some();

Now, we don’t used new when we invoked MyObject function. That means that inside the function this remains to be Window.

Wich means

console.log(myObj);

log undefined. We don’t return anything from MyObject function, so myObj is undefined.

And that’s why we can invoke some at the global scope and it log Window.

So its very important to remember that you have to use new when you are creating an Object  from a Constructor.

Creating Public Methods

All right, now we know how to create objects and even how to create this objects from constructors.

But how can we add methods to a Object definition.

Let’s see two ways.

  • Using properties:

function MyObject(){

this.method = function(){console.log(“I’m a public method”);};
}

new MyObject().method();

or

var myObject = {

method: function(){console.log(“I’m a public method”);}

}

myObject.method();

In both examples we defined a property in an object that is a function. So we can use this function like a method.

  • Using prototype

function MyObject(){};

MyObject.prototype.method = function(){console.log(“I’m a public method”);};

new MyObject().method();

We just created a construtor for MyObject, after that, we defined in the prototype of our constructor an attribute that is a function.

Every attribute defined in the prototype of an object, is automatically, accessible by the instances of that object.

Using Inheritance

We can use prototype to define Inheritance.

function Animal(){};

Animal.prototype.eat = function(){console.log(“eating…”);};

function Dog(){};

Dog.prototype = Animal.prototype;

new Dog().eat();

Setting the prototype of the Constructor of a Dog as the prototype of Animal makes that our Dogs to have the method eat.

Defining private members

Well, you may also want to create properties and methods that are not public. This is really easy.

Every variable in JavaScript has function scope

function a(){

var b = 1;

console.log(b);

}

a();

console.log(b);

This code will log 1 and then will log undefined. That’s why when we use the word var we are saying that the variable b exists only inside the function a.

Since our objects are functions, we can use the same idea:

function MyObject(){

var privateMethod = function(){console.log(“I’m private”);};

this.publicMethod = function(){console.log(privateMethod());};

}

new MyObject().publicMethod();

console.log(new MyObject().privateMethod).

This code will log I’m private and them undefined. And thats was what we expect.

First we call the public method. It has access to our private method inside the Object instance so it con log our message.

But, outside the constructor function, the variable privateMethod dos not exists, so our code log undefined.

Conclusion

You can have a lot of fun with JavaScript. So enjoy and play a lot :)

I just introduced the concept of OOP here, there is a lot to talk about this.

You can see some great JavaScript samples here.

That’s all. See you!