For most people this goes back to Javascript 101 but it’s worth blogging, in my opinion. A lot of people truly have no idea how much power is available on the client side of web apps, and they actually think that Javascript is dying.
The true power of Javascript was not made known to me until I had my aha! moment. It was about two or three years ago, and I think I could sum up (profusely, with freeze-dried concentration) what triggered my realization when these two essential facts became clear:
Discovery #1:
var myFunc = function() { };
var myObj = new myFunc();
.. is to Javascript what this is to C# ..
public class MyClass
{
public MyClass() { }
}
MyClass myObj = new MyClass();
That is to say, Javascript functions are functions (of course) but also “classes” (object prototypes) and constructors all rolled into one. So, for example, to accomplish this in C# ..
class MyClass {
void DoSomething() {
MessageBox.Show("something");
}
}
...
MyClass myObj = new MyClass();
myObj.DoSomething();
.. you could do this in Javascript ..
function myFunc() { }
myFunc.prototype.doSomething = function() {
alert('something');
};
...
var myObj = new myFunc();
myObj.doSomething();
Or, you could assign the doSomething member function “at runtime” (dynamically appending the member to the object after the object has already been instantiated).
var myFunc = new function() {
this.doSomething = function() {
alert('something');
};
};
var myObj = new myFunc();
myObj.doSomething();
// or even
myObj.doSomethingElse = function() { alert('something else'); };
myObj.doSomethingElse();
Note that ‘this’ is used to reference the object instance that the function instance is. Incidentally, you can ensure “this” works when calling other objects’ functions by using function_name.call(object, params);.
That said, these things point out the dynamic nature of Javascript object members – you can append properties and functions to an object at runtime by using syntax like [object].doSomething = function() { }. It also shows that members on an object are akin to a string-keyed hashtable.
And that hashtable-like behavior brings about the second part of my “aha!” moment.
Discovery #2:
All user-defined objects, including functions, are ultimately string-keyed hashtables. That is not a limiting behavior but an extra feature because they are still real objects.
But JSON (Javascript object notation) objects are extraordinarily handy as alternatives to functions because of the expressive way you can declare them.
var myNewObject = {
member_A : "abc",
member_B : 123
};
.. is akin to C#’s ..
Dictionary<string, object> myNewObject = new Dictionary<string, object>();
myNewObject["member_A"] = "abc";
myNewObject["member_B"] = 123;
And it’s even more powerful when you consider that the members can be functions.
myNewObject = {
doSomething: function() {
alert('something');
}
};
myNewObject.doSomething(); // invoke
// or,
myNewObject = { };
myNewObject.doSomething = function() {
alert('something');
};
myNewObject.doSomething(); // invoke
.. can be implemented in C# 3.0 like so ..
delegate void SimpleMethod();
public static void RunSnippet()
{
var myNewObject = new Dictionary<string, object>();
myNewObject["doSomething"] = (SimpleMethod)(() =>
MessageBox.Show("something")
);
// ..
((SimpleMethod)myNewObject["doSomething"])(); // invoke
}
In fact, take a look at this old blog post I saw at Ajaxian.com: http://colinramsay.co.uk/diary/2008/04/02/javascript-generation-a-change-of-heart/
In return, comparing the two languages reveals the power of C# 3.0, as well. C# 4.0’s dynamic objects will be trying even harder to “be powerful like Javascript already was”.
*evil grin*
Subscribe