JavaScript OOP Basics (Full Tutorial)
Today I want to explain the JavaScript OOP basics (The basics of Object Oriented JavaScript).
JavaScript OOP, but looks functional language, but in the real environment and point of view, it is pure OOP language.
Why JavaScript is an OOP Language?
 |
JavaScript OOP Basics |
Let's take a look at usual function
function testFunc(){
alert('The Test');
}
Seems like the normal function isn't it?
Nope, it is the method.
In JavaScript, all functions and variables are wired up to context, in above example assume we use it without any class context, but function still method of the object.
Which object is the context if we defined the function outside any context?
We defined the function in the scope of "window", the basic JavaScript object in the page.
So the function is accessible also through:
var it_is_variable = 'Test It';
function testFunc(){
alert('The Test');
}
// call function
window.testFunc();
// alerts "The Test"
// same with variables
alert(window.it_is_variable);
// alerts "Test It"
Function's variables also accessible in an OOP manner, such as:
function jstest(){
test_var = 'test';
alert(self.test_var);
}
How to create a JavaScript Object?
var obj = {};
Here we created a blank javascript object by using curly braces.
Adding functionality to an object in JavaScript
Lets create a few properties and methods.
var obj = {}; // the previous code
obj.propertyA = 'test_property'; // adding property
// adding method
obj.getProperty = function(){
alert(this.propertyA);
}
obj.getProperty(); // alerts the propertyA of class obj
Let's create real environment object.
var car = {
// properties as object
dimentions : {
len : 462,
width : 190,
height : 110,
weight : 1250
},
// properties
tank : 40,
color : 'red',
maxSpeed : 220,
horsePowers : 125,
_handBrake : true,
_power : false,
// Methods
init : function(){
if(!this._power)
this.startEngine();
return this._power;
},
startEngine : function(){
if(true === this._power)
return true;
if(true === this._handBrake)
this.handBreakSwitch();
this.checkFuel();
this.powerSwitch();
},
refill : function(){
this.tank = 40;
},
handBreakSwitch : function(){
this._handBreak = (this._handBreak === false ? true : false);
},
checkFuel : function(){
if(this.tank < 5)
this.refill();
return true;
},
checkEngine : function(){
if(true === this._power)
return true;
else
this.startEngine();
},
powerSwitch : function(){
this._power = (this._power === false ? true : false);
},
paint : function(color){
this.color = color;
},
drive : function(distance,velocity){
this.checkEngine();
return (parseInt(distance) / parseInt( this.calcSpeed(velocity) ) ).toFixed(3) + 'sec';
},
calcSpeed : function(speed){
return (speed*1000)/(60*60);
}
};
// Lets initialize the car
car.init();
// Unfortunately the dimensions of the car and horsepowers are not used in current
// example as far as starting speed (velocity), I won't spend much time on example ;-)
//using car.drive(1230,90) in alert
alert('Time spent to pass distance is ' + car.drive(1230,90));
// Alerts "Time spent to pass distance is 49.200s"
// so we traveled 1230 meters with speed 90km/h in 49.2sec.
car.paint('blue');
alert('Car painted with ' + car.color + ' color.');
Overriding in effect
Typical overriding is as simple as
var car = {
init : function(){
alert('test');
}
};
// alerts 'test'
car.init();
car.init = function(){
alert('override in effect');
};
// Alerts "Override in effect"
car.init();
Javascript class constructor
The class constructor in javascript defines as a function it will also enable you to access prototype, but... prototypes, inheritance, and closures in next articles.
function car(){
this.init = function(){
alert('test');
}
}
// initializes class with constructor
var car = new car;
// alerts 'test'
car.init();
Have fun playing JavaScript's funny oop:)
){kind=link}
0 Comments