The Power of Public Media

Published: 6 years ago

Thoughts on Javascript: Classes and Functions

(short on time? TL;DR)

Let’s get started with some basics.

Objects:

Everything in Javascript is an object. This makes sense to most programmers, since most of the time that’s true in other languages. What you don’t realize yet, is that everything is an object*. Even functions, even classes. Let me illustrate this for you.

*Yes I recognize that other languages may do the same, but it’s rare for most programmers to have to treat functions and classes truly as objects, whereas understanding this concept will help programmers greatly with Javascript.

Let’s say you have some HTML page with the following Javascript.


function showAlert(){
alert("ALERT!!!");
}

showAlert();

If you run this in your web browser of choice and setup some break points. You can see our function ‘showAlert’ in the global namespace. If you expand it, you can see what our function is getting from being a function object. There’s a bunch of properties that you probably didn’t even know existed like prototype, name, and length. This shows how functions are objects.

Now that you know that, you can think of functions as no different than objects. Like objects, they can be created and deleted. They can live in the global space, or be scoped to other objects. They can manipulate other objects, or just have simple functionality within. Knowing this, we can now make classes.

Classes, like functions, are objects. There’s a really good post about how to make classes in Javascript here (http://www.phpied.com/3-ways-to-define-a-javascript-class/). This post gives some good basic understanding of classes as a whole, but I want to introduce another idea. Javascript wants to support object oriented programming because that makes life easier in the programming world and allows us to not have to rewrite stuff as much. That’s where prototype comes in. If you’re going to be using prototype*, your code should look something like this.

*prototype isn’t the only way to create objects with inheritance in Javascript. As with every language, there is a best way for the current situation. Prototype is useful when you want to encourage Javascript to look and feel like other object oriented languages like Java, or C#. It’s a way to have your code look more traditional.

var NewClass = function(){
this.privateVariableOne = 5;
this.privateVariableTwo = this.privateVariableOne + 10;
}

Now, at this point it seems like we just have a function. But remember! This function is an object, and therefor can be a class. All we have to do is add more functions onto it via prototype.

NewClass.prototype.incrementVariableOne = function(){
this.privateVariableOne++;
}

NewClass.prototype.showInformation = function(){
alert("Variable One: " + this.privateVariableOne + "\nVariable Two: " + this.privateVariableTwo);
}

At this point, our object (function) NewClass, has 2 methods on it. Now we can just start using our new class like so:

var testClass = new NewClass();
testClass.showInformation();
testClass.incrementVariableOne();
testClass.showInformation();

As you can see, we don’t need to use prototype when we call our methods. This is native functionality that Javascript offers. More on prototype information here (http://ejohn.org/apps/learn/#64)

Where the real power of all of this information comes in handy is now, you can put this NewClass code into a separate javascript file instead of directly into the body. Let’s pretend we put it into NewClass.js right next to our index.html file. Our NewClass.js should look like

var NewClass = function(){
this.privateVariableOne = 5;
this.privateVariableTwo = this.privateVariableOne + 10;
}

NewClass.prototype.incrementVariableOne = function(){
this.privateVariableOne++;
}

NewClass.prototype.showInformation = function(){
alert("Variable One: " + this.privateVariableOne + "\nVariable Two: " + this.privateVariableTwo);
}

Back in our index.html we can import our script with
<script type="text/javascript" src="NewClass.js"><script/>

Now in our body we can run our tests again with
var testClass = new NewClass();
testClass.showInformation();
testClass.incrementVariableOne();
testClass.showInformation();

You’ll notice that everything works, and your code looks much cleaner. Almost like real object oriented code! The reason this works is because NewClass (function/object) lives in the global namespace. If you put a break point in our code, you’ll be able to expand global and see it. This means that we can more or less create a NewClass object wherever we want.

Hopefully this has helped you understand class construction in javascript, and how object oriented class construction can help you keep your code clean, organized, and reusable.


TL;DR

 

This series of posts are for programmers who are new to Javascript.

Functions and Classes are objects. Trust me.

One way to write classes in Javascript is to use prototype.

Here is an example:

var NewClass = function(){
this.privateVariableOne = 5;
this.privateVariableTwo = this.privateVariableOne + 10;
}

NewClass.prototype.incrementVariableOne = function(){
this.privateVariableOne++;
}
NewClass.prototype.showInformation = function(){
alert("Variable One: " + this.privateVariableOne + "\nVariable Two: " + this.privateVariableTwo);
}

Put this code in a separate file adjacent to your index.html page, and now you have a NewClass class that you can invoke whenever you want.

Here is an example using the new class in the body of your index.html

var testClass = new NewClass();
testClass.showInformation();
testClass.incrementVariableOne();
testClass.showInformation();

Using this method will help keep your code clean, organized, and reusable.

Have a Comment?

Some HTML is OK