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

A function is a set of code blocks that perform specific tasks (have specific functions) and can be reused. In addition to using built-in functions, we can also create our own functions (custom functions) and then call this function where needed. This not only avoids writing repeated code, but also facilitates the later maintenance of the code.

1: Several ways to declare functions

There are three ways to declare custom functions in JavaScript, namely using function statement, use the Function() constructor, and define function literals.

1. Function statement

In JavaScript, you can use the function statement to declare a function. 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, and 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. 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

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

function funName() {}  //空函数

If using an anonymous function, the function name can be omitted.

function () {}  //匿名空函数

The var statement and the 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 creates a context for each function, defines a variable object, and registers 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 a function. 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, body represents the function structure statement of the created function, between the body statements Separate with semicolons.

Example 1

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

var f = new Function ("a", "b", "return a+b");  //通过构造函数来克隆函数结构

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

function f(a, b) {  //使用function语句定义函数结构
    return a + b;
}

Example 2

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

var f = new 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 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) {  //函数直接量
    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 a 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

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

//把函数作为一个值直接赋值给变量 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));  //返回值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(  //把函数作为一个操作数进行调用
    (function (a,b) {
        return a + b;
    })(1, 2));  //返回数值3

4. Arrow function

The arrow function is the abbreviation of the function in es6, the arrow function It does not have its own this. Its this is determined when it is defined, and its value is the this of the previous layer.

//箭头函数
const sayName = ()=>{
    console.log("箭头函数")
}

二：调用函数

一旦定义好了一个函数，我们就可以在当前文档的任意位置来调用它。调用函数非常简单，只需要函数名后面加上一个括号即可，例如 alert()、write()。注意，如果在定义函数时函数名后面的括号中指定了参数，那么在调用函数时也需要在括号中提供对应的参数。

示例代码如下：

function sayHello(name){
    document.write("Hello " + name);
}
// 调用 sayHello() 函数
sayHello('PHP中文网');

提示：JavaScript 对于大小写敏感，所以在定义函数时 function 关键字一定要使用小写，而且调用函数时必须使用与声明时相同的大小写来调用函数。

【相关推荐：javascript学习教程】

The above is the detailed content of In-depth analysis of the declaration and call of JS custom functions. For more information, please follow other related articles on the PHP Chinese website!