hi~ I am
无言非影, very happy to share my learning journey here. Some notes compiled
about functional programming are all recorded in: Functional Programming Column
Article directory
First-class Function (The function is a first-class citizen/first-class function)
When a programming language's functions can be used like variables, the language is said to have them
头等函数.
- It has the following characteristics:
- Functions can be assigned to a variable;
- Functions can be passed as parameters to other functions;
- A function can be the return value of another function.
1. Assign the function to the variable
Even if your function has its own function name, you can still call it using this variable name.
// 将匿名函数赋值给变量
const fn = function() {
console.log("fn_bar");
}
fn(); // fn_bar
// 将有名称的函数赋值给变量
const fn2 = function name() {
console.log("fn2_bar");
}
fn2(); // fn2_bar
When a function wraps another function and the form is the same, we can think that these are two identical functions and can simplify them.
Example:
const SayHi = {
a: (v) => `${
v} a`,
b: (v) => `${
v} b`,
c: (v) => `${
v} c`,
};
// 优化前 =====================================
const Controller = {
a(v) {
return SayHi.a(v);
},
b(v) {
return SayHi.b(v);
},
c(v) {
return SayHi.c(v);
},
};
console.log(Controller.a("hi~")); // hi~ a
// 优化后 =====================================
const Controller = {
a: SayHi.a, // 这里是把一个方法赋值给另一个方法，不是方法的调用
b: SayHi.b,
c: SayHi.c,
};
console.log(Controller.a("hi~")); // hi~ a
2. Pass a function as a parameter
- In first-class functions - functions are treated as values or variables: In the following code snippet:
callback()functions are used assayHi()parameters of functions.
function callback() {
return "Hello, ";
}
function sayHi(callback, name) {
console.log(callback() + name);
}
// 传递 `callback` 作为 `sayHi` 函数的参数
sayHi(callback, "wuyanfeiying!"); // Hello, wuyanfeiying!
Supplement: callback function
- When we pass a function as a parameter to another function, we call this function
回调函数. The sayHi() function is a ***callback function***. - Callbacks are not directly related to synchronization and asynchronousness. Callbacks are just an implementation method. They can have either synchronous callbacks or asynchronous callbacks, as well as event processing callbacks and delayed function callbacks . These are used a lot in our work. Scenes.
3. Return a function
Functions can be treated as values . In the following example, sayHi()an anonymous function is returned and can be called in two ways:
- Method 1: Use a variable to receive
sayHi()the returned value first, and then call the returned function in it - Method 2: Use double brackets
()()to callsayHi()the returned function
function sayHi() {
// 返回一个匿名函数
return function () {
console.log("Hi~");
};
}
// 方式一：
const foo = sayHi();
foo(); // Hi~
// 方式二
sayHi()(); // Hi~
Supplement: anonymous function
function(){
// ...
}();
- This can be achieved through anonymous functions
闭包- A closure is a function that can access variables defined within the function scope. To create a closure, you often need to use an anonymous function.
- Simulate block-level scope and reduce global variables. After executing the anonymous function, the corresponding variables stored in the memory will be destroyed, thus saving memory.
Supplement: Higher-Order Function
- A function that returns another function is called a higher-order function.
- Writing a higher-order function means allowing the parameters of the function to receive other functions.
- Three common higher-order functions in JS:
map(),reduce(),filter()
summary
In short, there is nothing special about functions in JavaScript. Like any other data type in JS, we can assign functions to variables or store them in arrays. They can also be used as parameters and return values of another function. We can even new Function()Construct a new function while the program is running .