1, Function basis and types
(1) Concept of function
- The process of encapsulating a fixed function or program segment is the process of defining a function and realizing a fixed function or program. An entry and exit are required in this package.
- The entry is the parameter and the exit is the return.
(2) Concept of high cohesion and low coupling
High cohesion: a developed function, which we call a module, has strong code correlation, that is, its internal code is closely related. If its correlation is strong, the independence of this module (function) will be strong. We hope that a module can complete a task independently, and the completion of this task is good or bad, It has something to do with high cohesion.
Low coupling: coupling refers to the repeated code in each code block. We hope to abstract (extract) the repeated code. After extraction, it will become an independent function body (module) to complete a specific function.
Decoupling: it is to abstract the repeated code in the code block, and the function can be well decoupled.
The purpose of high cohesion and low coupling is to make a functional body (code block and module) have strong functionality and high independence. That is to say, where to put it, when I want to use it, I can extract it directly, and then call it.
Single responsibility system of modules: in the process of programming, we often hope that a functional code is a single responsibility system, that is, just do a good job of the modules it is responsible for, and try to avoid relying on other modules.
High cohesion and low coupling are actually for the single responsibility system of modules
(3) Naming rules for functions
- Cannot start with a number
- You can start with the letter _$
- Can contain numbers
- Small hump nomenclature review word myWonderfulTest
(4) Method of defining function
1. Function declaration
function test(parameter) {
Execution statement of function;
}
// A function called test is declared with the keyword function
2. Anonymous function expression (function literal)
var test = function test1() { // test1 can not write → anonymous function
var a = 1,
b = 2;
console.log(a, b);
test1() // Recursion → the function can be called internally
}
// Declare a variable of test and assign the test1 function to this variable
test();
test1() // The function cannot be called outside the error reporting function
console.log(test.name) // test1
(5) Components of functions
Function keyword, function name, parameter (optional), return value (optional), return (required, added by the system)
2, Formal and argument
(1) Formal parameter (placeholder → formally placeholder, formal parameter)
function test(a, b) { // A is equivalent to var a, and the arguments can assign values to a and B
var a, b; // Arguments cannot assign values to a, b
console.log(a + b);
}
(2) Argument (actual parameter)
test(aa, bb);
Summary:
- A formal parameter is a variable declared inside a function
- An argument is to assign a value to a formal parameter when a function is called
- Arguments and formal parameters correspond to each other one by one
3, Problem of shape argument
(1) There are 3 formal parameters and 2 actual parameters. Will an error be reported?
function test(a, b, c) {
console.log(a, b, c); // c == undefined
}
test(1, 2)
Answer: no error
(2) There are 2 formal parameters and 3 actual parameters. Will an error be reported?
function test(a, b) {
console.log(a, b);
}
test(1, 2, 3)
Answer: no error. The number of formal and actual parameters of a function can vary
(3) Can you know which arguments are inside the function?
function test(a, b) {
console.log(arguments);
}
test(1, 2, 3) // Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
A: you can view it through arguments
(4) Traverse the argument list
function test(a, b) {
for (var i = 0; i < arguments.length; i++) {
console.log(arguments[i])
}
}
test(1, 2, 3) // 1 2 3
(5) When a function is called, its arguments are accumulated
function getSum() {
var sum = 0;
for (var i = 0; i < arguments.length; i++) {
sum += arguments[i]
}
console.log(sum);
}
getSum(1, 2, 3, 4)
(6) Did you print 1 or 3?
function test(a, b) {
a = 3;
console.log(arguments[0])
}
test(1, 2); // 3
Answer: print 3. You can change the value of an argument inside a function
(7) Print out what?
function test(a, b) {
b = 3;
console.log(b) // 3
console.log(arguments[1]) // undefined
}
test(1);
A: print undefined. Only when the actual parameter and formal parameter correspond to each other one by one can the mapping relationship exist. Otherwise, if you have a formal parameter and assign a value to it, but there is no corresponding argument, this mapping relationship does not exist, so you print undefined.
(8) Are a and arguments[0] variables?
function test(a, b) {
a = 3;
console.log(arguments[0])
}
test(1, 2);
A: not a variable
- a is stored in stack memory, and arguments[0] is stored in heap memory
- Although they are not a variable, they have a mapping relationship within the system
- No matter how your argument is assigned, your formal parameter will change, provided that there is a corresponding relationship between the argument and the formal parameter;
4, return
(1) Return will be added internally. The default return value is undefined
function test() {
console.log('I'm going to start')
console.log('When I'm done, I end this function');
// return the system will add
}
test();
(1) return can also be added manually
function test(name) {
if (!name) {
return 'You didn't fill in your name';
}
return name;
}
console.log(test())
(3) return usage
- Terminate function execution
- You can return a corresponding value
5, return question
(1) Does the function terminate the execution of the function in the process of returning the value?
function test(name) {
if (!name) {
return 'You didn't fill in your name'; // The execution of the program ends here
}
return name;
}
console.log(test()) // You didn't fill in your name
A: the statements before return will be executed, and the statements after return will not be executed.
(2) Write the above program with 𞓜 operation
function test(name) {
return name || 'You didn't fill in your name';
}
console.log(test()) // If defined, it will be filled in later. If not, it will go back
6, Variable type problem
(1) Can you print out a?
a = 1;
function test() {
var b = 2;
console.log(a)
}
test()
A: Yes, because a is a global variable
(2) b can you print it out?
a = 1;
function test() {
var b = 2;
console.log(a)
}
test() // 1
console.log(b) // An error is reported because b is not defined
A: No, because variables inside functions cannot be accessed globally
(3) b can you print it out?
a = 1;
function test1() {
var b = 2;
console.log(a);
function test2() {
var c = 3;
console.log(b)
}
test2();
}
test1(); // 1 2
A: Yes, because global variables and superior local variables can be accessed in the function body
(4) c can you print it out?
// global variable
a = 1;
function test1() {
// Local variable [scope]
var b = 2;
console.log(a);
function test2() {
// local variable
var c = 3;
console.log(b)
}
test2();
console.log(c)
}
test1(); // 1.2 error reporting
A: No, because the function body can only access global variables and superior local variables, but cannot access subordinate sentence variables.
(5) a how much does it print out?
a = 1;
function test1() {
var b = 2;
a = 4;
function test2() {
var c = 3;
a = 3; // a → undefined → 1 → 4 → 3
}
test2();
}
test1()
console.log(a); // 3
(6) b how much does it print out?
// GO = {
// a: 1,
// test1: function test1(){...}
// }
a = 1;
function test1() {
// AO = {
// b : 2 → 5,
// test2 : function test2(){...}
// }
var b = 2;
function test2() {
// AO = {
// c : 3
// }
var c = 3;
b = 5;
console.log(b);
}
test2();
}
test1() // 5
Note: Although b here implies a global variable, it will find the AO of the upper level layer by layer to see if there is b in it. If there is, it will be assigned to it. If not, it will be given to GO
(7) Can it run successfully?
function test1() {
var a = 1;
console.log(b);
}
function test2() {
var b = 2;
console.log(a);
}
test1(); // Reference error: B is not defined at test1
test2();
Each function has its own independent scope (scope: the declared variables and the accessible scope of the function. With this scope, the usable scope of the function is defined, and the usable scope is the scope)