JavaScript OOP Tutorial for Dummies

In this free HTML JavaScript tutorial, the dummies will have some simple, short concepts about JavaScript OOP programming, OOP in JavaScript such as: how to define a JavaScript class, how to set Publich methods, how to set Private variables, how to set static methods, ... through some simple HTML JavaScript example codes.

Read more JavaScript OOP tutorials below:

- OOP in JavaScript: Some Basics
- Simple Concepts about Types and Objects in JavaScript OOP
- JavaScript OOP - Scopes and Contexts
- OOP JavaScript: Public and Private Methods
- Basic OOP Concepts in Javascript

Sampled by ©

This post will cover the following topics:

  • Javascript is not a toy!
  • How to define a class
  • How to set Publich methods
  • How to set Private variables
  • How to set static methods

JavaScript for Dummies?

Programming languages are like football teams - it doesn't matter which you like, you will support it and protect its interest no matter what. Back in the days when i was young, I remember the same old discussion between two development teams where i used to work - C++ vs. Delphi. I guess its an endless discussion where the people and the languages change but the content basically stay the same.
What's weird is that when i talk to fellow developers about JavaScript i get a weird feeling that everybody looks at it as more of a toy rather than a powerful client side development tool. The major critic that i get is this is a very simple functional language, that cannot match to the object oriented concept that drive most languages. One friend even told me that this is a language for bored teenagers.
I agree - JavaScript is an easy to learn language, but that doesn't mean that it's a simple one. I see it as a positive thing that you can quickly achieve your goals without needing to know all the language capabilities, and you can learn very fast how to really use the language capabilities to accomplish things even better or faster.
I decided to show how you can shape JavaScript to be used as an Object Oriented language. I don't think that you must code JavaScript always in object oriented style, but you should have this ability and choose when you think it's the best solution to implement.

In this post i will focus on the basics of Object Oriented programming - public, private and static declarations.

Defining a Class

In Javascript everything is an object, even functions. In order to define a new class we should just define a new function like so:

1.function Player(url){}

No in order to create an instance of this class we can write the following:

1.var player1 = new Player("");

This line of code will create a new instance of the function object and return the reference to it. Not to confuse, but if the function return a value it won't be placed in player1. for example, let's say you have a function like so:

1.function f1(){ return 100;}
2.var a = f1();
3.var b = new f1();

The difference between the two is that a will be assigned with 100 while b will be assigned with the reference to a new f1 function object.

Public Methods

As in any object oriented language, the first thing you would like to do is define some public methods for your class. In Javascritp we will use the prototype keyword to setup new methods for this class. You can do this like so:

01.function Player(url){
04.Player.prototype.start = function(){
05.// some stuff here...
07.Player.prototype.stop = function(){
08.// some stufff here...

For those of you who prefer to create classes encapsulated in one declaration you can also write the same code as so:

01.function Player(url){
04.Player.prototype = {
05.    start: function(){
06.        // some stuff here...
07.    } ,
08.    stop: function(){
09.        // some stuff here...
10.    }

These two declarations achieve the same result. This is part of the reasons that i love javascript so much - it can be so simple and so complicated at the same time.
Now you can use the class methods as so:

1.var player1 = new Player("");

Public Variables

In order to set public variables we will use the this keyword that allow us to preserve state for our object.

1.function Player(url){
2.    this.url = url;

Now we have a public variable that can be accessed using the class properties as so:

1.var player1 = new Player("");

Usually it is bad practice to allow access to the class inner variables, and such variables needs to be set private.

Private Variables

In order to create private variables we would simple declare them in the constructor as so:

1.function Player(url){
2.    var m_url = url;

Now the variable m_url is not accessible to anyone. Well that doesn't make sense, right? We want to allow our public methods to access the data.
We solve this using closure. A closure is a protected variable space, created by using nested functions. In order to better understand it we first need to understand how JavaScript function declaration works. Function declaration in Javascritp is based on two main concepts: lexically scoped and function-level scope. Lexically means that function run in the scope they are defined in and not in the scope they are executed in, as other language usually do. Function-level means, like most languages, that a variable declared in function is not accessible outside that function. Using these concepts we can now declare our private variables that will be accessible to our public methods:

01.function Player(url){
02.    var m_url = url;
03.    this.start = function(){
04.        //now i can access m_url
05.    };
06.    this.stop = function(){
07.        //now i can access m_url
08.    }

The difference between this code and the previous ones, is that the public methods were declared using the prototype while now they are declared using the this keyword. The main difference is in the way the JavaScript engine execute this code. When declaring functions using the prototype, the Javascript engine creates only one instance of the function in memory and dynamically assigns the this according to the calling object. On the other hand, when declaring a method inside the object constructor, as we did in the last example, the JavaScript engine will create a copy of that function in memory for every instance that you create from the Player class. Usually this shouldn't be a big factor, but its important to know the difference.

Static Methods & Variables

Using closures and the prototype characteristic i mentioned above you can also create static methods like so:

01.function Player(url){
02.    var m_url = url;
03.    this.start = function(){
04.        //now i can access m_url
05.    };
06.    this.stop = function(){
07.        //now i can access m_url
08.    }
09.    var static_int = 0;
10.    Player.prototype.getStatic = function(){ return static_int;};
11.    Player.prototype.setStatic = function(v){ static_int = v; };
14.var p1 = new Player();
15.var p2 = new Player();
17.alert( p2.getStatic() ); //will print 100.

I hope this example shows the power of JavaScript once you understand how to shape it to whatever you need. I the next post I will show how to implement interfaces and inheritance in Javascript.

Translate this page to English Translate this page to French Translate this page to Vietnamese

Recent articles
How to open a car sharing service
Vue developer as a vital part of every software team
Vue.js developers: hire them, use them and get ahead of the competition
3 Reasons Why Java is so Popular
Migrate to Angular: why and how you should do it
The Possible Working Methods of Python Ideology
JavaScript Research Paper: 6 Writing Tips to Craft a Masterpiece
Learning How to Make Use of New Marketing Trends
5 Important Elements of an E-commerce Website
How To Create A Successful Prototype For Your PCB

Top view articles
Adding JavaScript to WordPress Effectively with JavaScript Localization feature
Top 10 Beautiful Christmas Countdown Timers
65 Free JavaScript Photo Gallery Solutions
16 Free Code Syntax Highlighters by Javascript For Better Programming
Best Free Linux Web Programming Editors
Top 10 Best JavaScript eBooks that Beginners should Learn
Top 50 Most Addictive and Popular Facebook mini games
More 30 Excellent JavaScript/AJAX based Photo Galleries to Boost your Sites
Top 10 Free Web Chat box Plug-ins and Add-ons
The Ultimate JavaScript Tutorial in Web Design

Free JavaScript Tutorials & Articles