Recently, I am learning JavaScript functions. Functions are first-class objects in JavaScript. If you want to learn JavaScript well, you must have a deep understanding of functions. I have compiled the learning process into an article, one is to deepen my understanding of my functions, and the other is to provide readers with ways to learn to avoid detours. There is a lot of content, but it is all my summary of functions.
1. Function parameters
1.1: What are the parameters
1.2: Omitting parameters
1.3: Parameter default value
1.4: Parameter transfer method
1.5: Parameters with the same name
1.6: arguments object
2. Closure
2.1: Closure definition
2.2: Immediately invoked function expression
1. Function parameters
1.1: What are the parameters
When defining a function, sometimes additional data is needed to be passed to the function, and different external data will get different results. This kind of external data is called parameters.
function keith(a){
return a+a;
}
(keith(3)); //6
In the above code, the keith function is passed the parameter a and the a+a expression is returned.
1.2: Omitting parameters
Function parameters are not required, and the javascript specification allows omitting the actual parameters passed when called.
function keith(a, b, c) {
return a;
}
(keith(1, 2, 3)); //1
(keith(1)); //1
(keith()); // 'undefined'
In the above code, the keith function defines three parameters, but no matter how many parameters are passed during the call, JavaScript will not report an error. The default value of the omitted parameter becomes undefined. Those who understand the function definition and function scope know that the length property of the function will return the number of parameters. It should be noted that the length attribute has nothing to do with the number of actual parameters, but only returns the number of formal parameters.
(Actual parameters: parameters passed when calling. Formal parameters: parameters passed when defining.)
But there is no way to omit the elements that are only at the front and retain the elements that are at the back. If you must omit the front element, only the undefined display is displayed.
function keith(a, b) {
return a;
}
(keith(, 1)); //SyntaxError: expected expression, got ','
(keith(undefined, 2)); //'undefined'
In the above code, if the first parameter is omitted, the browser will report an error. If undefined is passed to the first parameter, an error will not be reported.
1.3: Default value
In JavaScript, the default value of function parameters is undefined. However, it is useful in some cases to set different default values. The general strategy is to test whether the parameter value is undefined in the body of the function. If so, a value is assigned, and if not, the value passed by the actual parameter is returned.
function keith(a, b) {
(typeof b !== 'undefined') ? b = b: b = 1;
return a * b;
}
(keith(15)); //15
(keith(15, 2)) //30
In the above code, a judgment is made. When no b parameter is passed in when called, the default is 1.
Starting from ECMAScript 6, default parameters are defined. Using default parameters, checking in the function body is no longer necessary.
function keith(a, b = 1) {
return a * b;
}
(keith(15)); //15
(keith(15, 2)) //30
1.4: Parameter transfer method
There are two ways to pass function parameters, one is value transmission and the other is address transmission.
When a function parameter is a primitive data type (string, numeric, boolean), the parameter is passed as value. In other words, modifying parameter values in the function body will not affect the outside of the function.
var a = 1;
function keith(num) {
num = 5;
}
keith(a);
(a); //1
In the above code, the global variable a is a value of the original type, and the way to pass it into the function keith is to pass the value. Therefore, inside the function, the value of a is a copy of the original value, and no matter how it is modified, it will not affect the original value.
However, if the function parameter is a value of compound type (array, object, other functions), the method of passing is pass by reference. In other words, the address of the original value is passed in, so modifying the parameters inside the function will affect the original value.
var arr = [2, 5];
function keith(Arr) {
Arr[0] = 3;
}
keith(arr);
(arr[0]); //3
In the above code, the function keith is passed into the address of the parameter object arr. Therefore, modifying the first value of arr inside the function will affect the original value.
Note that if the function is modified internally, it is not a property of the parameter object, but replaces the entire parameter, the original value will not be affected.
var arr = [2, 3, 5];
function keith(Arr) {
Arr = [1, 2, 3];
}
keith(arr);
(arr); // [2,3,5]
In the above code, inside the function keith, the parameter object arr is replaced by the entire value. This will not affect the original value. This is because there is an assignment relationship between the formal parameter (Arr) and the actual parameter arr.
1.5: Parameters with the same name
If there is a parameter with the same name, the value that appears last. If the value of the last parameter is not provided, the value becomes undefined.
function keith(a, a) {
return a;
}
(keith(1, 3)); //3
(keith(1)); //undefined
If you want to access the first parameter in the parameter with the same name, use the arguments object.
function keith(a, a) {
return arguments[0];
}
(keith(2));//2
1.6 arguments object
A special variable arguments can be accessed in each function in JavaScript. This variable maintains a list of all parameters passed into this function.
The arguments object contains all parameters of the function runtime, arguments[0] is the first parameter, arguments[1] is the second parameter, and so on. This object can only be used inside the function body.
You can access the length property of the arguments object to determine how many parameters are included when calling the function.
function keith(a, b, c) {
(arguments[0]); //1
(arguments[2]); //3
(); //4
}
keith(1, 2, 3, 4);
The relationship between arguments object and array
The arguments object is not an array (Array). Although syntactically it has array-related attribute length, it does not inherit from , in fact it is an array object of class. Therefore, it is not possible to use standard array methods such as push, pop or slice for arguments variables. But you can use the length attribute in the array.
The arguments object is usually converted into an array using the following method.
var arr = (arguments);
2. Closure
2.1: Closure definition
To understand closures, you need to first understand the difference between global scope and local scope. The function can access global variables defined under the global scope inside, but the function cannot access local variables defined within the function (local scope) outside.
var a = 1;
function keith() {
return a;
var b = 2;
}
(keith()); //1
(b); //ReferenceError: b is not defined
In the above code, the global variable a can be accessed inside the function keith. However, the local variable b cannot be accessed outside the function.
If you need to get local variables inside the function, you can only define another function inside the function.
function keith(){
var a=1;
function rascal(){
return a;
}
return rascal;
}
var result=keith();
(result()); //1
function keith(){
var a=1;
return function(){
return a;
};
}
var result=keith();
(result()) //1
In the above code, the two writing methods are the same, the only difference is whether the internal function is an anonymous function. The function rascal is inside the function keith, and all local variables inside the keith are visible to the rascal. But the other way around is not possible. Local variables inside rascal are invisible to keith. This is the "chain scope" structure unique to JavaScript language. The child objects will look upwards level by level to level for all parent objects variables. Therefore, all variables of the parent object are visible to the child object, otherwise it is not true. The return value of the function keith is the function rascal. Since rascal can read the internal variables of keith, you can obtain the internal variables of keith outside.
A closure is a function rascal, that is, a function that can read variables inside other functions. Since in JavaScript language, only subfunctions inside functions can read internal variables, closures can be simply understood as "functions defined inside a function". The biggest feature of closure is that it can "remember" the environment in which it was born. For example, rascal remembers the environment in which it was born, so you can get the internal variables of keith from rascal.
The closure can make its birth environment exist. See the following example, the closure makes the internal variable remember the calculation results of the last call.
function keith(num) {
return function() {
return num++;
};
}
var result = keith(2);
(result()) //2
(result()) //3
(result()) //4
In the above code, the parameter num is actually equivalent to a local variable defined inside the function keith. Through closure, the state of num is retained, and each call is calculated based on the previous call. From this we can see that the closure result makes the internal environment of the function keith always exist.
Through the above examples, let’s summarize the characteristics of closures:
1: Define another function inside one function, and return the internal function or execute the internal function immediately.
2: Internal functions can read local variables defined by external functions
3: Make local variables always save in memory. That is, the closure can make its birth environment exist.
Another use of closures is to encapsulate private properties and private methods of objects.
function Keith(name) {
var age;
function setAge(n) {
age = n;
}
function getAge() {
return age;
}
return {
name: name,
setAge: setAge,
getAge: getAge
};
}
var person = Keith('keith');
(21);
(); // 'keith'
(()); //21
2.2: Function expression called immediately (IIFE)
Typically, only such "executed function expressions" are used for anonymous functions. Its purpose is two: one is that it does not have to name the function, which avoids polluting global variables; the other is that a separate scope is formed inside IIFE, which can encapsulate some private variables that cannot be read outside.
Closure in loop
A common error occurs when using closures in a loop, assuming we need to call the loop sequence number in each loop
for(var i=0;i<10;i++){
setTimeout(function(){
(i); //10
}, 1000)
}
In the above code, it will not meet our expectations and output the numbers 0-9. Instead, the number will be output 100 times.
When an anonymous function is called, the anonymous function maintains a reference to the global variable i, which means that the result of the execution during the i loop is remembered. At this time, the for loop ends and the value of i is modified to 10.
To get the desired effect and avoid reference errors, we should use IIFE to create a copy of the global variable i in each loop.
for(var i = 0; i < 10; i++) {
(function(e) {
setTimeout(function() {
(e); //1,2,3,....,10
}, 1000);
})(i);
}
The external anonymous function will be executed immediately and i will be used as its parameter. At this time, the e variable in the function will have a copy of i. When the anonymous function passed to setTimeout is executed, it has a reference to e, and this value will not be changed by the loop.
The above is all the content of this article. I hope that the content of this article will help you study or work. I also hope to support me more!