JScript Functions

  • Article

My favorite IE tip/trick of the day has to do with function pointers and anonymous functions.

 

In Jscript, there are two keywords for creating functions. One is “function” with a lower case “f”, and one is “Function” with an upper case “F”. “function” is a keyword that allows you to describe a function in-line. The “function” keyword creates a named function (even if you don’t specify a name) and returns a pointer to that function. In most cases, you simply ignore the return value:

 

function Foo()

{

   window.alert(“Hi!”);

}

 

is an example of this usage. However, I can also say:

 

var myFuncPtr = Foo;

myFuncPtr();

 

To call my function as well. Or, I can do:

 

var myFunc = function test(s)

{

   window.alert(s);

}

 

To create a named function called “test” and create a variable called myFunc which holds a pointer to that function. I can then say:

 

myFunc(‘Hello’);

 

To print ‘Hello’ out to the screen.

 

I can also say:

 

var x = function()

{

   window.alert('hello');

}

 

And have a pointer to a function with no name. In similar pointlessness, I can do:

 

function()

{

   window.alert('hello');

}

 

Which is perfectly valid but it does absolutely nothing!

 

There’s also “Function” with a capitol F which is basically a built-in Jscript function that returns a reference to a new anonymous function. An anonymous function is simply a function that does not have a name and walks the lands doing good deeds for strangers in need, while searching for its true identity. Since it has no name, it must be called through a function pointer.

 

For example:

 

var items = {};

items[0] = new Function("window.alert('A');");

items[1] = new Function("window.alert('B');");

items[2] = new Function("window.alert('C');");

items[1]();

 

This allows me to create an array of anonymous functions that do different things, then call one of them through a pointer to that function.

 

In Jscript, functions are objects just like any object object. These objects can have names, can be part of arrays, can be passed to other functions, etc. The only difference is there’s special syntax (the parenthesis at the end) which directs the runtime to call the function rather than return a pointer to it.

 

So how about IE event handlers? Many people take IE’s eventing model for granted, it just works. But taking it apart is somewhat of an educational experience.

 

Let’s take this simple chunk of HTML for example:

 

<div id="myDiv" onclick="window.alert('foo');">Click Here</div>

It’s simple enough, but what is IE building in memory? There’s a <div> object with an ID property which is a string, and there’s an onclick property with some script. How does this script get compiled? It’s an anonymous function, right?. No! It’s a function that’s called “anonymous” (how @#!$’ing confusing is that?!?!). IE news up the function in its own compilation scope and returns it through a dispatch pointer.

 

The onclick property of our div object above is a pointer to a function (If you’re a COM guy I believe it’s technically an IConnectionPoint but who cares?)

 

You don’t believe me? Let’s run this little piece of code:

 

window.alert(myDiv.onclick);

Which will print out:

 

function anonymous()

{

window.alert(‘foo’);

}

 

Interesting, eh? If we want to call our function through our function pointer, we can simply do:

 

myDiv.onclick();

 

Which will run the code and display “foo”.

 

Ok so this is all silly and confusing, and for the people who actually understand all this, they are 1) the people who read this whole article and learned nothing they didn’t already know or 2) the people who are gonna leave me comments saying how something I said wasn’t quite accurate. Well, sorry I’m an Office developer and knowing how the scripting engines work is just a part time hobby. Thanks for reading, and hopefully you can use function pointers and anonymous functions to change the world for the better (the cure cancer anonymous function maybe?)

 

Mike