ECMAScript Function Object (Class)

ECMAScript functions are actually fully-fledged objects.

Function object (class)

What may be most interesting about ECMAScript is that functions are actually fully-fledged objects.

The Function class can represent any function defined by the developer.

The syntax for creating a function directly with the Function class is as follows:

var function_name = new function()arg1, arg2, ... , argN, function_body)

In the above form, each arg They are all parameters, and the last parameter is the function body (the code to be executed). These parameters must be strings.

Remember this function?

function sayHi(sName, sMessage) {
  alert("Hello " + sName + sMessage);
}

It can also be defined like this:

var sayHi 
= 
new Function("sName", "sMessage", "alert("Hello " + sName + sMessage)");

Although it is somewhat difficult to write in this form due to the nature of strings, it helps to understand that functions are just reference types, and they behave the same as functions created explicitly with the Function class.

Please see the following example:

function doAdd(iNum) {
  alert(iNum + 20);
}
function doAdd(iNum) {
  alert(iNum + 10);
}
doAdd(10);	//Output "20"

As you know, the second function overrides the first function, so doAdd(10) outputs "20" instead of "30".

If you rewrite the code block in the following form, the concept becomes clear:

var doAdd = new Function("iNum", "alert(iNum + 20)");
var doAdd = new Function("iNum", "alert(iNum + 10)");
doAdd(10);

Please observe this code snippet. It is clear that the value of doAdd has been changed to a pointer to a different object. The function name is just a reference value pointing to the function object, behaving like other objects. You can even make two variables point to the same function:

var doAdd = new Function("iNum", "alert(iNum + 10)");
var alsodoAdd = doAdd;
doAdd(10);	//Output "20"
alsodoAdd(10);	//Output "20"

Here, the variable doAdd is defined as a function, and alsodoAdd is declared as a pointer to the same function. Both variables can execute the function's code and produce the same result - "20". Therefore, if the function name is just a variable pointing to the function, can you pass the function as an argument to another function? The answer is yes!

function callAnotherFunc(fnFunction, vArgument) {
  fnFunction(vArgument);
}
var doAdd = new Function("iNum", "alert(iNum + 10)");
callAnotherFunc(doAdd, 10);	//outputs "20"

In the above example, callAnotherFunc() has two parameters - the function to be called and the parameters passed to the function. This code passes doAdd() to the callAnotherFunc() function, with the parameter 10, and outputs "20".

Note:Although the Function constructor can be used to create functions, it is best not to use it because defining functions with it is much slower than with traditional methods. However, all functions should be considered instances of the Function class.

The length property of the Function object

As mentioned before, functions are reference types, so they also have properties and methods.

The length property defined by ECMAScript declares the number of parameters expected by the function. For example:

function doAdd(iNum) {
  alert(iNum + 10);
}
function sayHi() {
  alert("Hi");
}
alert(doAdd.length);	//outputs "1"
alert(sayHi.length);	//outputs "0"

The function doAdd() defines one parameter, so its length is 1; sayHi() does not define any parameters, so its length is 0.

Remember, regardless of how many parameters are defined, ECMAScript can accept an arbitrary number of parameters (up to 25), which was explained in the 'Overview of Functions' chapter. The length property is just a convenient way to view the expected number of parameters by default.

Methods of the Function Object

The Function object also has the valueOf() and toString() methods shared with all objects. Both methods return the source code of the function, which is particularly useful during debugging. For example:

function doAdd(iNum) {
  alert(iNum + 10);
}
document.write(doAdd.toString());

The following code outputs the text of the doAdd() function.Try It Yourself!