JavaScript OOP: A beginners guide


Well, there’s a lot of tutorials, writings, blog posts, etc in the web about this subject, but, I’m writing this in a way that I found better to understand what is really happening while you code.

We will code the most part of the examples directly in CoffeeScript, so, we will have much less code in this article. Don’t know or don’t like CoffeeScript? Don’t worry, I’ll link the pure JavaScript for you.

Getting started

OOP

In JS, a class is nothing more than a function, since functions (and everything in JS) are functions. So, basically, you open a function scope, and start code:

function Test() {
  Test.prototype.t = function() {
    alert('test');
  }
}

var o = new Test();
o.t();

What we just done? We created a scope (function Test) and then we add to the prototype of the scope (which is called Test) the function t.

Getting started with CoffeeScript

This same piece of code, in CoffeeScript:

class Test
  t: ->
    alert 'test'

o = new Test()
o.t()

side by side js and coffee

So, we just learn that prototyped methods can be accessed with an object instance. Let’s go to the next level.

Constructors

In JS, just like in Java and other languages, the constructor is a method with the name of the class and no return:

var Test = (function() {

  function Test(p) {
    this.p = p;
  }

  Test.prototype.t = function() {
    return alert("test " + this.p);
  };

  return Test;

})();

var o = new Test("this!");
o.t();

Notice: this time we had to wrap the function context inside an anonymous function that “calls itself”.

Now, the same example in CoffeeScript:

class Test
  constructor: (@p) ->

  t: ->
    alert "test #{@p}"

o = new Test("that!")
o.t()

side by side js and coffee

That’s pretty cool, but, what if we want a default value to the parameters at the constructor? If you code Ruby, just do it in the same way:

class Test
  constructor: (@p = "what?") ->

  t: ->
    alert "test #{@p}"

o = new Test()
o.t()

oo = new Test("this!")
oo.t()

side by side js and coffee

Scopes

Like every OOP language, you have scopes to play with. Most of languages has private, protected and public, but, JS has only public and private scopes (but you can always hack some code to archieve that.

What you can do and what you can’t

  • You can call a private funcion from a public one;
  • You can’t call a public function from a private one.

Which basically means that this:

class Test
  tt = ->
    alert 'tt'

  t: ->
    tt()

new Test().t()

side by side js and coffee

while this:

class Test

  ttt: ->
    alert 'ttt'

  tt = ->
    @ttt()

  t: ->
    tt()

new Test().t()

side by side js and coffee

don’t, like I just said above.

That’s it.

Inheritance

Yeah, JS also has inheritance support, even if it much like a hack.

Archieve that with CoffeeScript is really simple, pretty much like Java or other language:

class Test
  t: ->
    alert 'as'


class TT extends Test
  tt: ->
    @t()
  ttt: ->
    alert 'tttt'

t = new TT()
t.tt()
t.ttt()

side by side js and coffee

The example is self-explanatory. You can call super methods from your inherited class, and, obviously, add more methods.

Bye

Well, I wrote this to be simple. It’s pretty simple right now, but, if you have any question, suggestion, correction, completions (etc etc etc), please, use the comment box below and left your feedback.

I really hope it help you guys into the wild world of JS-OOP.


Your ad here.

Related Posts

A Repository Graveyard

Charting Repository Stars

GKE in production