Home > Web Front-end > JS Tutorial > How to write a JavaScript custom function

How to write a JavaScript custom function

青灯夜游
Release: 2023-01-07 11:42:02
Original
4999 people have browsed it

How to write js custom functions: 1. "function function name([args]){code}"; 2. "var function name=new Function(p1, p2, ..., pn, body );"; 3. "function ([args]){code}".

How to write a JavaScript custom function

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

There are three ways to customize functions in JavaScript, namely using the function statement, using the Function() constructor and defining function literals.

Declaring functions

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

function funName([args]) {
    statements
}
Copy after login

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() {}  //空函数
Copy after login

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

function () {}  //匿名空函数
Copy after login

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.

Function() constructor

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

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

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");  //通过构造函数来克隆函数结构
Copy after login

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;
}
Copy after login

Example 2

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

var f = new Function();  //定义空函数
Copy after login

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.

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 key words, parameters, and function bodies. The specific usage is as follows:

function ([args]) {
    statements
}
Copy after login

Example 1

The following code defines a function literal.

function (a, b) {  //函数直接量
    return a + b;
}
Copy after login

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;
};
Copy after login

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
Copy after login

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
Copy after login

【Related recommendations: javascript learning tutorial

The above is the detailed content of How to write a JavaScript custom function. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template