Learn Advanced JavaScript Programming

Table of Contents

All functions in JavaScript are objects, so a function reference is actually an object reference. Suppose you want to use a function in one window as a method in a constructor function located in a different window. You should specify the full function reference, using the following format:

this.methodName = windowReference.functionName

A function reference, as opposed to a function call, is not a command—the JavaScript interpreter cannot execute it. You should treat a function like any other object in JavaScript: Assign it to a variable, hand it to a function, and so forth. Here’s an example:

function myAlert(msg) {
 alert("*** " + msg + " ***")
}

function test(func) {
 func("Hello!")
}

test(myAlert)

In this script segment we invoke the test() function with the function myAlert (a reference) as an argument. We then refer to the function myAlert as func, because the parameter is named func. Since func is equivalent to myAlert, we can call it in the same fashion we would call the myAlert() function.

Compiling Code as a Function

The Function object specifies a string of JavaScript code to be compiled as a function. The general syntax is:

var functionTarget = new Function ([arg1, arg2, …, argn],
 functionBody)

functionTarget is the name of a variable or a property of an existing object. It can also be a browser object followed by an event handler such as window.onerror.

arg1, arg2, …, argn are string arguments to be used by the function as formal parameter names.

functionBody is a string specifying the JavaScript code to be compiled as the function body.

The Function object is not implemented in Netscape Navigator 2.0x and Microsoft Internet Explorer 3.0x. An instance of the Function object is evaluated each time it is used. This is much less efficient than declaring a function and invoking it within your code, because declared functions are compiled. Declared functions are evaluated as the page loads, and are stored in memory as machine code. Instances of the Function object are stored in memory as objects (consisting of strings), and are converted to machine code for each execution.

Specifying the Function’s Body

The function body, functionBody, is a string consisting of JavaScript statements. You could use, for example, the following string:

"document.bgColor='antiquewhite'"

Things become more complicated when you want to create an instance with a body of several statements. The string should then include all statements separated by semicolons. Although you will rarely use this feature, we show you how to write the function according to your personal preferences and have a distinct script convert it to valid, one-line JavaScript code.

Take a look at the following function:

function getCookie(name) {
 var prefix = name + "="
 var cookieStartIndex = document.cookie.indexOf(prefix)
 if (cookieStartIndex == –1)
  return null
 var cookieEndIndex = document.cookie.indexOf(";",
  cookieStartIndex + prefix.length)
 if (cookieEndIndex == –1)
  cookieEndIndex = document.cookie.length
 return unescape(document.cookie.substring(cookieStartIndex +
  prefix.length, cookieEndIndex))
}

Example 28-1 prints the body of this function on one line, including semicolons where needed.

<HTML>
<HEAD>
<TITLE>Function body string</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--

function getCookie(name) {
 var prefix = name + "="
 var cookieStartIndex = document.cookie.indexOf(prefix)
 if (cookieStartIndex == –1)
  return null
 var cookieEndIndex = document.cookie.indexOf(";",
  cookieStartIndex + prefix.length)
 if (cookieEndIndex == –1)
  cookieEndIndex = document.cookie.length
 return unescape(document.cookie.substring(cookieStartIndex +
  prefix.length, cookieEndIndex))
}

// print function body
document.write(getCookie)

// -->
</SCRIPT>
</BODY>
</HTML>

Example 28-1 (ex28-1.htm). You can print a function reference to see its one-line equivalent.

The technique demonstrated in Example 28-1 works onlyD under Netscape Navigator. Its output is as follows:

function getCookie(name) { var prefix = name + "=";
var cookieStartIndex =document.cookie.indexOf(prefix);
if (cookieStartIndex == –1) { return null;
}
var cookieEndIndex = document.cookie.indexOf(";",
 cookieStartIndex + prefix.length);
if(cookieEndIndex == –1) {
cookieEndIndex = document.cookie.length;
}
return unescape(document.cookie.substring (cookieStartIndex +
 prefix.length, cookieEndIndex));
}

You should extract the function’s body from this long string. This script does not work properly under MSIE 3.0x, because it does not display the entire function body. Instead, the script’s output is:

function getCookie() { [native code] }

Using the Function Object with a Variable

The following statement assigns a function to a variable:

var setBGColorBeige = new Function("document.bgColor = 'beige'")

Since it serves as a function, it is a good practice to include a verb form in the variable’s name. You can call the variable as if it were a regular function:

setBGColorBeige()

Assigning a function to a variable is similar to declaring a function, with some differences, as expressed in Table 28-1.

Table 28-1. The differences between declaring a function and assigning a function to a variable.


Assigning a function to a variable	Declaring a function function
functionName = new Function("…")	functionName() {…}

`functionName` is a variable for which the current value is a reference to the function created with `new Function()`.	`functionName` is the name of a function, not a variable.
The function’s body is evaluated each time you call the function.	The function’s body is evaluated only once—when the browser parses the script.
The function’s parameters and body are specified as strings.	The function’s parameters and body are plain code, not an explicit data type.

Table of Contents