In-depth analysis of the declaration and call of JS custom functions

1: Several ways to declare functions

There are three ways to declare custom functions in JavaScript, namely using function statements, using Function() constructors and defining function literals.

1. Function statement

In JavaScript, you can use the function statement to declare functions. The specific usage is as follows:

function funName([args]) {
    statements
}

funName is the function name, which like the variable name must be a legal JavaScript identifier. Following the function name is a list of parameters enclosed in parentheses and separated by commas. Parameters are optional and there is no limit on the number.

As identifiers, parameters are only accessed within the function body; parameters are private members of the function scope. When calling a function, pass a value to the function, then use parameters to obtain the externally passed value, and intervene in the running of the function within the function body.

After the parentheses is a brace, and the statement contained in the brace is the main content of the function body structure. In the function body, curly braces are essential. Without curly braces, JavaScript will throw a syntax error.

example

function statement must contain the function name, parentheses, and braces, and other code can be omitted, so the simplest function body is an empty function.

function funName() {} //Empty function

If you use an anonymous function, you can omit the function name.

function () {} //Anonymous empty function

var statement and function statement are both declaration statements, and the variables and functions they declare are parsed when JavaScript is precompiled, also known as variable promotion and function promotion. During the pre-compilation period, the JavaScript engine will create a context for each function, define a variable object, and register all formal parameters, private variables, and nested functions in the function as attributes on the variable object.

2. Function() constructor

Use the Function() constructor to quickly generate functions. The specific usage is as follows:

var funName = new Function(p1, p2, ..., pn, body);

The parameter types of Function() are all strings. p1~pn represents the parameter name list of the created function, and body represents the created function. Function structure statements of a function, separated by semicolons between body statements.

Example 1

can omit all parameters and only pass a string to represent the function body.

var f = new Function ("a", "b", "return a+b"); //Clone the function structure through the constructor.

In the above code, f is the name of the created function. The same function is defined, and functions with the same structure can be designed using the function statement.

function f(a, b) { //Use function statement to define function structure return a + b;
}

Example 2

uses the Function() constructor to create an empty function structure without specifying any parameters.

var f = new Function(); //Define an empty function.

Use the Function() constructor to dynamically create functions. It does not limit users to the function body pre-declared by the function statement. Using the Function() constructor allows the function to be used as an expression rather than as a structure, so it is more flexible to use. The disadvantage is that the Function() constructor is compiled during execution, the execution efficiency is very low, and its use is generally not recommended.

3. Anonymous function (function literal)

Function literal is also called an anonymous function, that is, the function has no function name and only contains the function keyword, parameters and function body. The specific usage is as follows:

function ([args]) {
    statements
}

Example 1

The following code defines a function literal.

function (a, b) { //Function literal return a + b;
}

In the above code, function literals are basically the same as using function statements to define function structures, and their structures are fixed. However, the function literal does not specify the function name, but directly uses the keyword function to represent the structure of the function. This kind of function is also called an anonymous function.

Example 2

An anonymous function is an expression, that is, a function expression, not a statement of a function structure. Next, assign the anonymous function as a value to the variable f.

//Assign the function as a value directly to the variable f
var f = function (a, b) {
    return a + b;
};

When the function structure is assigned to a variable as a value, the variable can be called as a function, and the variable points to the anonymous function.

console.log(f(1,2)); //return value 3

Example 3

Anonymous functions serve as values ​​and can participate in more complex expression operations. For the above example, you can use the following code to complete the integrated operation of function definition and call.

console.log( //Call the function as an operand (function (a,b) {
        return a + b;
    })(1, 2)); //Return value 3

Two: Calling the function

Once a function is defined, we can call it anywhere in the current document. Calling a function is very simple, just add a bracket after the function name, such as alert(), write(). Note that if parameters are specified in parentheses after the function name when defining the function, then the corresponding parameters need to be provided in parentheses when calling the function.

The sample code is as follows:

function sayHello(name){
    document.write("Hello " + name);
}
//Call sayHello() function sayHello('PHP Chinese website');

Tip: JavaScript is case-sensitive, so the function keyword must be lowercase when defining a function, and the function must be called in the same case as when it was declared.

The above is an in-depth analysis of the declaration and call of JS custom functions. For more information, please pay attention to other related articles on the PHP Chinese website!