In-depth understanding of JavaScript function parameters and closures

I have been learning JavaScript functions recently. Functions are the first-class objects of JavaScript. If you want to learn JavaScript well, you must have a deep understanding of functions. I organize the learning process into articles, firstly, to deepen my understanding of my own functions, and secondly, to provide readers with a way to learn and avoid detours. There is a lot of content, but it is the author's summary of functions.

1. Function parameters

　1.1: What are parameters

　1.2: Omission of parameters

　1.3: Parameter default values

　1.4: Parameter passing method

　1.5: Parameters with the same name

　1.6: arguments object

2. Closure

　2.1: Closure definition

　2.2: Immediately invoked function expression (IIFE, Immediately invoked function expression)

1. Function parameters

　1.1: What are the parameters

When defining a function, sometimes Additional data needs to be passed to the function. Different external data will produce different results. This external data is called parameters.

function keith(a){
return a+a;
}
console.log(keith(3)); //6

In the above code, the parameter a is passed to the keith function and the a+a expression is returned.

1.2: Omission of parameters

Function parameters are not required. The JavaScript specification allows the actual parameters passed when calling to be omitted.

function keith(a, b, c) {
return a;
}
console.log(keith(1, 2, 3)); //1
console.log(keith(1)); //1
console.log(keith()); // 'undefined'

In the above code, the keith function defines three parameters, but no matter how many parameters are passed when calling, JavaScript will not report an error. The default value of omitted parameters becomes undefined. Anyone who understands function definitions and function scope knows that the length attribute of a function returns 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 only the first elements and retain the later elements. If the front element must be omitted, only undefined will be displayed.

function keith(a, b) {
return a;
}
console.log(keith(, 1)); //SyntaxError: expected expression, got ','
console.log(keith(undefined, 2)); //'undefined'

In the above code, if the first parameter is omitted, the browser will report an error. If undefined is passed as the first parameter, no error will be reported.

1.3: Default value

In JavaScript, the default value of function parameters is undefined. However, there are situations where it is useful to set different default values. The general strategy is to test in the body of the function whether the parameter value is undefined, assign a value if so, and if not, return the value of the actual parameter passed.

function keith(a, b) {
(typeof b !== 'undefined') ? b = b: b = 1;
return a * b;
}
console.log(keith(15)); //15
console.log(keith(15, 2)) //30

In the above code, a judgment was made. When the b parameter is not passed in when calling, the default is 1.

Starting from ECMAScript 6, default parameters are defined. With default parameters, checks in the function body are no longer needed.

function keith(a, b = 1) {
return a * b;
}
console.log(keith(15)); //15
console.log(keith(15, 2)) //30

1.4: Parameter passing method

There are two ways to pass function parameters, one is passing by value and the other is passing by address.

When the function parameter is a primitive data type (string, numerical value, Boolean value), the parameter passing method is by value. In other words, modifying parameter values ​​within the function body will not affect the outside of the function.

var a = 1;
function keith(num) {
num = 5;
}
keith(a);
console.log(a); //1

In the above code, the global variable a is a primitive type value, and the way to pass it into the function keith is by 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 composite type value (array, object, other function), the transfer method is pass by reference. In other words, what is passed into the function is the address of the original value, so modifying the parameters inside the function will affect the original value.

var arr = [2, 5];
function keith(Arr) {
Arr[0] = 3;
}
keith(arr);
console.log(arr[0]); //3

In the above code, what is passed into the function keith is 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 what is modified inside the function is not a certain attribute 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);
console.log(arr); // [2,3,5]

In the above code, inside the function keith, the parameter object arr is completely replaced with another value. The original value will not be affected at this time. 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 will be taken. If the value of the last parameter is not provided, the value will become undefined.

function keith(a, a) {
return a;
}
console.log(keith(1, 3)); //3
console.log(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];
}
console.log(keith(2));　　//2

1.6 arguments object

Every function in JavaScript can access a special variable arguments. This variable maintains the list of all parameters passed to this function.

arguments object contains all parameters when the function is run. 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 attribute of the arguments object to determine how many parameters are taken when calling the function.

function keith(a, b, c) {
console.log(arguments[0]); //1
console.log(arguments[2]); //3
console.log(arguments.length); //4
}
keith(1, 2, 3, 4);

The relationship between argument objects and arrays

arguments 对象不是一个数组（Array）。 尽管在语法上它有数组相关的属性 length，但它不从 Array.prototype 继承，实际上它是一个类数组对象。因此，无法对 arguments 变量使用标准的数组方法，比如 push, pop 或者 slice。但是可以使用数组中的length属性。

通常使用如下方法把arguments对象转换为数组。

var arr = Array.prototype.slice.call(arguments);

2.闭包

2.1：闭包定义

要理解闭包，需要先理解全局作用域和局部作用域的区别。函数内部可以访问全局作用域下定义的全局变量，而函数外部却无法访问到函数内部定义(局部作用域)的局部变量。

var a = 1;
function keith() {
 return a;
 var b = 2;
 }
 console.log(keith()); //1
 console.log(b); //ReferenceError: b is not defined

上面代码中，全局变量a可以在函数keith内部访问。可是局部变量b却无法在函数外部访问。

如果需要得到函数内部的局部变量，只有通过在函数的内部，再定义一个函数。

function keith(){
var a=1;
function rascal(){
return a;
}
return rascal;
}
var result=keith();
console.log(result()); //1
function keith(){
var a=1;
return function(){
return a;
};
}
var result=keith();
console.log(result()) //1

上面代码中，两种写法相同，唯一的区别是内部函数是否是匿名函数。函数rascal就在函数keith内部，这时keith内部的所有局部变量，对rascal都是可见的。但是反过来就不行，rascal内部的局部变量，对keith就是不可见的。这就是JavaScript语言特有的”链式作用域”结构（chain scope），子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。函数keith的返回值就是函数rascal，由于rascal可以读取keith的内部变量，所以就可以在外部获得keith的内部变量了。

闭包就是函数rascal，即能够读取其他函数内部变量的函数。由于在JavaScript语言中，只有函数内部的子函数才能读取内部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。闭包最大的特点，就是它可以“记住”诞生的环境，比如rascal记住了它诞生的环境keith，所以从rascal可以得到keith的内部变量。

闭包可以使得它诞生环境一直存在。看下面一个例子，闭包使得内部变量记住上一次调用时的运算结果。

function keith(num) {
return function() {
return num++;
};
}
var result = keith(2);
console.log(result()) //2
console.log(result()) //3
console.log(result()) //4

上面代码中，参数num其实就相当于函数keith内部定义的局部变量。通过闭包，num的状态被保留了，每一次调用都是在上一次调用的基础上进行计算。从中可以看到，闭包result使得函数keith的内部环境，一直存在。

通过以上的例子，总结一下闭包的特点：

1：在一个函数内部定义另外一个函数，并且返回内部函数或者立即执行内部函数。

2：内部函数可以读取外部函数定义的局部变量

3：让局部变量始终保存在内存中。也就是说，闭包可以使得它诞生环境一直存在。

闭包的另一个用处，是封装对象的私有属性和私有方法。

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');
person.setAge(21);
console.log(person.name); // 'keith'
console.log(person.getAge()); //21

   

2.2：立即调用的函数表达式（IIFE）

通常情况下，只对匿名函数使用这种“立即执行的函数表达式”。它的目的有两个：一是不必为函数命名，避免了污染全局变量；二是IIFE内部形成了一个单独的作用域，可以封装一些外部无法读取的私有变量。

循环中的闭包

一个常见的错误出现在循环中使用闭包，假设我们需要在每次循环中调用循环序号

for(var i=0;i<10;i++){
setTimeout(function(){
console.log(i); //10
}, 1000)
}

上面代码中，不会符合我们的预期，输出数字0-9。而是会输出数字10十次。

当匿名函数被调用的时候，匿名函数保持着对全局变量 i 的引用，也就是说会记住i循环时执行的结果。此时for循环结束，i 的值被修改成了10。

为了得到想要的效果，避免引用错误，我们应该使用IIFE来在每次循环中创建全局变量 i 的拷贝。

for(var i = 0; i < 10; i++) {
 (function(e) {
 setTimeout(function() {
 console.log(e); //1,2,3,....,10
 }, 1000);
 })(i);
 }

外部的匿名函数会立即执行，并把 i 作为它的参数，此时函数内 e 变量就拥有了 i 的一个拷贝。当传递给 setTimeout 的匿名函数执行时，它就拥有了对 e 的引用，而这个值是不会被循环改变的。