Blog
Javascript Object oriented programming
*JavaScript is a prototype-based language which contains no class statement. Instead JavaScript uses functions as classes. Defining a class is as easy as defining a function.
*An object constructor/object constructor function is a function that’s used to define a new object. In this function, we declare the initial properties/methods of the new object, and usually assign them a pre-defined value.
*To create an instance of an object, we use the keyword “new”, followed by an object constructor. We can either use JavaScript’s built-in constructors to create a native object, or we can build our own constructors to create a user-defined object.
*Every object method has a variable – this – which refers to the current instance of that object from which the method is called. Example
function Computer(name) {
this.name=name;
this.getName=function() {
return this.name;
}
}
var computer1 = new Computer("Desktop-1");
alert(computer1.getName());//alerts Desktop-1
var computer2 = new Computer("Desktop-2");
alert(computer2.getName());//alerts Desktop-2References
Javascript Closures
A closure is a special kind of object that combines two things: a function, and the environment in which that function was created. The environment consists of any local variables that were in-scope at the time that the closure was created.
https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Closures
Javascript Module Pattern
Module Pattern - It stays out of the global namespace, provides publicly addressable API methods, and supports protected or “private” data and methods along the way.
var myFunc = (function() {
var privateProperty = 10;
return {
print: function() {
console.log(privateProperty);
},
assign: function(a) {
privateProperty = a;
}
}
})();
myFunc.print(); //10
myFunc.assign(100);
myFunc.print(); //100The private variables can only be accessed from within the anonymous function itself or
from within a member of the returned object. This is through the power of closuers.
References
javascript void(0) for HTML link
To create a HTML link which does nothing when user clicks it, use like below
When the user clicks the link, void(0) evaluates to undefined, which has no effect in JavaScript.
References -
https://developer.mozilla.org/en/JavaScript/Guide/Expressions_and_Operators#void
Here is a stackoverflow.com link, which answers why void(0) is better than using
for this requirement
http://stackoverflow.com/questions/134845/href-for-javascript-links-or-javascriptvoid0
Referencing variables in setTimeout function - Javascript Closures
Requirement
- Reference For loop variable i in setTimeout function
Wrong way
for(var i = 1 ; i <= 10; i++) {
console.log('i in for :: ' + i);
setTimeout(function() {
console.log(' i in timeout :: ' + i);
}, 2000);
}Ouput
i in for :: 1
i in for :: 2
i in for :: 3
i in for :: 4
i in for :: 5
i in for :: 6
i in for :: 7
i in for :: 8
i in for :: 9
i in for :: 10
i in timeout :: 11
i in timeout :: 11
i in timeout :: 11
i in timeout :: 11
i in timeout :: 11
i in timeout :: 11
i in timeout :: 11
i in timeout :: 11
i in timeout :: 11
i in timeout :: 11Right way using Closures
for(var i = 1 ; i <= 10; i++) {
console.log('i in for :: ' + i);
setTimeout(function(j) {
return function() {
console.log(' j in timeout :: ' + j);
}
}(i), 2000);
}Ouput
i in for :: 1
i in for :: 2
i in for :: 3
i in for :: 4
i in for :: 5
i in for :: 6
i in for :: 7
i in for :: 8
i in for :: 9
i in for :: 10
j in timeout :: 1
j in timeout :: 2
j in timeout :: 3
j in timeout :: 4
j in timeout :: 5
j in timeout :: 6
j in timeout :: 7
j in timeout :: 8
j in timeout :: 9
j in timeout :: 10