Notes on codes, projects and everything

Random Javascript Notes

I am starting to like programming in Javascript, especially after understanding more about how Javascript handles scopes. Surprisingly this take me like a year to figure out how scope is managed. The result of the findings is that I start doing a lot of experiments and discovered more interesting stuff through them.

It took me quite some time to accept the fact that each function is an object, therefore it is completely normal to write code that looks like


var some_function = function() {
this.public_var = 'hello world';
 
this.public_method = function() {
// do something
}
}
 
var foo = new some_function();
alert(foo.public_var); // alerts 'hello world'
this.public_method(); // the 'do something' method

Besides, in Javascript, you are allowed to use this magical syntax to automatically call a function after defining it.


// without arguments
(function() {
alert('hello world');
})();
 
// with arguments
(function($) {
$('some parameters'); // where $ = Some_Library_Function as passed below
})(Some_Library_Function);

Because of the fact that a function is an object, you can do some wonderful stuff like this:


(function() {
alert('hello world');
}).call(this); // hello world will be called

As I come from a more C-Like language background (hey, my first language was VC 6.0, what would you expect), I always wanted to find something equivalent in Javascript to define a class. Yes, Javascript is not a OO language in the sense that one can define a class like how it is done in PHP/Java or whatever C-like language. But I can do something like follows:


// it is always a good idea to surround code in a small block like this
(function() {
 
var Some_Class = function() {
var private_property;
 
this.public_property;
 
var private_method = function() {
// do something
}
 
this.public_method = function() {
// do something
}
 
// a cheat to emulate a constructor
(function() {
private_property = 'hello world';
private_method.call(this);
 
this.public_property = 'good day!';
this.public_method();
}).call(this);
}
 
})();

Yes, I am cheating all the way to make my ‘class’ to have a constructor. I can remove the block (function() { /* ... */ }).call(this); and everything should still work but I find it looking better if I put the initialization code inside the block.

You may notice I use a lot of obj.call() methods in the snippets above. I just found this as well as obj.apply() call can actually modify the scope of the this keyword. Back to the snippet above, I cannot refer to the property named public property in the private method as follows (without calling the private method using call/apply function):


var private_method = function() {
alert(this.public_property);
}
// somewhere in the code
private_method(); // this will throw exception as this.public_property is not recognized
private_method.call(this); // by prividing a scope, then the value of public_property will be displayed

For further readings, I would recommend a blog post by K.Scott Allen that discusses the Function.apply and Function.call methods.

Now, after finding a way to change the scope, one may be interested in finding a way to create a closure and has the state maintained. Hence, by collecting the things that I learned in these few months, I am having something as follows:


(function(Delegate) {
 
var some_callback = function() {
alert(private_string);
}
var Some_Class = function() {
var private_string = 'hello world';
 
(function() {
some_callback = Delegate(some_callback, this);
 
some_callback(); // should alert 'hello world'
}).call(this);
}
 
})(function(_method, _scope) {
return function() {
_method.apply(_scope, arguments);
}
});

Isn’t this magic? Of course, there are more interesting stuff left for me to find out like inheritance (I am starting to like composition instead of inheritance so this is not a major problem), possibility to define interface in javascript etc. Hopefully this post helps people to quickly get started in Javascript programming.

For further readings, I would suggest the follow up articles of the above linked posts by K. Scott Allen on the Delegate, as well as closure. I hope I can find some time posting an article on closure once I figure out how to describe the concept without confusing myself and everybody.

Related Posts Plugin for WordPress, Blogger...

leave your comment

name is required

email is required

have a blog?

This blog uses scripts to assist and automate comment moderation, and the author of this blog post does not hold responsibility in the content of posted comments. Please note that activities such as flaming, ungrounded accusations as well as spamming will not be entertained.

Pings

Click to change color scheme