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
- Demo
- Enlarge
- Reload
- New window
Generate your business videos by AI with voice or just text
Your first FREE AI Video App! Automate Your First AI Video. Create Your Professional Video In 5 Minutes By AI No Equipment Or Video Editing Skill Requred. Effortless Video Production For Content Marketers.
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(
"http://youtube.com/..."
);
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){
02.
}
03.
04.
Player.prototype.start =
function
(){
05.
//...do some stuff here...
06.
}
07.
Player.prototype.stop =
function
(){
08.
//...do some stufff here...
09.
}
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){
02.
}
03.
04.
Player.prototype = {
05.
start:
function
(){
06.
//...do some stuff here...
07.
} ,
08.
stop:
function
(){
09.
//...do some stuff here...
10.
}
11.
};
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:
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;
3.
}
Now we have a public variable that can be accessed using the class properties as so:
1.
var
player1 =
new
Player(
"http://youtube.com/..."
);
2.
player1.url =
"http://youtube.com/differenturl"
;
3.
player1.start();
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;
3.
}
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.
}
09.
}
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; };
12.
}
13.
14.
var
p1 =
new
Player();
15.
var
p2 =
new
Player();
16.
p1.setStatic(100);
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.
- Sent (0)
- New