A brief analysis of Javascript anonymous functions and self-executing functions_javascript skills

Function is the most flexible object in JavaScript. Here we only explain the use of its anonymous functions. Anonymous function: It is a function without a function name.

The definition of function can be roughly divided into three ways:

The first type: This is also the most common type

function double(x){ 
return 2 * x; 
}

Second method: This method uses the Function constructor and treats both the parameter list and the function body as strings. This is very inconvenient and is not recommended.

var double = new Function('x', 'return 2 * x;');

Third type:

var double = function(x) { return 2* x; }

Note that the function on the right side of "=" is an anonymous function. After creating the function, the function is assigned to the variable square.

Creation of anonymous functions

The first method is to define the square function as mentioned above, which is also one of the most commonly used methods.

The second way:

(function(x, y){ 
alert(x + y); 
})(2, 3);

An anonymous function is created here (inside the first bracket), and the second bracket is used to call the anonymous function and pass in the parameters. Parentheses are expressions, and expressions have return values, so you can add a pair of parentheses after them to execute them.

Self-executing anonymous function

1. What is a self-executing anonymous function?

It refers to a function that looks like this: (function {// code})();

2. Questions

Why (function {// code})(); can be executed, but function {// code}(); reports an error?

3. Analysis

(1). First of all, we need to understand the difference between the two:
(function {// code}) is an expression, function {// code} is a function declaration.
(2). Secondly, the characteristics of js "precompilation":
In the "pre-compilation" phase of js, function declarations will be interpreted, but expressions will be ignored.
(3). When js executes function() {//code}();, since function() {//code} has been interpreted in the "pre-compilation" stage, js will skip function(){/ /code}, trying to execute ();, so an error will be reported;
When js executes (function {// code})();, since (function {// code}) is an expression, js will solve it to get the return value. Since the return value is a function, it encounters ();, it will be executed.

In addition, the method of converting a function into an expression does not necessarily rely on the grouping operator (). We can also use the void operator, ~ operator, ! operator...

For example:

!function(){ 
alert("另类的匿名函数自执行"); 
}();

Anonymous functions and closures

The English word for closure is closure, which is a very important part of knowledge in JavaScript, because using closures can greatly reduce the amount of our code, make our code look clearer, etc. In short, it is very powerful.

The meaning of closure: To put it bluntly, closure is the nesting of functions. The inner function can use all the variables of the outer function, even if the outer function has been executed (this involves JavaScript scope chain).

function checkClosure(){ 
var str = 'rain-man'; 
setTimeout( 
function(){ alert(str); } //这是一个匿名函数 
, 2000); 
} 
checkClosure();

This example looks very simple. There are still many knowledge points after careful analysis of its execution process: the execution of the checkClosure function is instantaneous (maybe it only takes 0.00001 milliseconds), and a variable str is created in the function body of checkClosure. , str is not released after checkClosure is executed, because the anonymous function in setTimeout has a reference to str. After 2 seconds, the anonymous function in the function body is executed, and str is released.

Use closures to optimize code:

function forTimeout(x, y){ 
alert(x + y); 
} 
function delay(x , y , time){ 
setTimeout('forTimeout(' + x + ',' + y + ')' , time); 
} 
/** 
* 上面的delay函数十分难以阅读，也不容易编写，但如果使用闭包就可以让代码更加清晰 
* function delay(x , y , time){ 
* setTimeout( 
* function(){ 
* forTimeout(x , y) 
* } 
* , time); 
* } 
*/

The biggest use of anonymous functions is to create closures (which is one of the features of the JavaScript language), and can also build namespaces to reduce the use of global variables.

var oEvent = {}; 
(function(){ 
var addEvent = function(){ /*代码的实现省略了*/ }; 
function removeEvent(){} 

oEvent.addEvent = addEvent; 
oEvent.removeEvent = removeEvent; 
})();

In this code, the functions addEvent and removeEvent are local variables, but we can use it through the global variable oEvent, which greatly reduces the use of global variables and enhances the security of the web page.

We want to use this code:

oEvent.addEvent(document.getElementById('box') , 'click' , function(){});
var rainman = (function(x , y){ 
return x + y; 
})(2 , 3); 
/** 
* 也可以写成下面的形式，因为第一个括号只是帮助我们阅读，但是不推荐使用下面这种书写格式。 
* var rainman = function(x , y){ 
* return x + y; 
* }(2 , 3);

Here we create a variable rainman and initialize it to 5 by directly calling the anonymous function. This little trick is sometimes very practical.

var outer = null; 
(function(){ 
var one = 1; 
function inner (){ 
one += 1; 
alert(one); 
} 
outer = inner; 
})(); 
outer(); //2 
outer(); //3 
outer(); //4

The variable one in this code is a local variable (because it is defined within a function), so it is not accessible from the outside. But here we created the inner function, which can access the variable one; and the global variable outer refers to inner, so calling outer three times will pop up the incremental result.

Attention

1 Closure allows the inner function to reference the variable in the parent function, but the variable is the final value

/** 
* <body> 
* <ul> 
* <li>one</li> 
* <li>two</li> 
* <li>three</li> 
* <li>one</li> 
* </ul> 
*/ 
var lists = document.getElementsByTagName('li'); 
for(var i = 0 , len = lists.length ; i < len ; i++){ 
lists[ i ].onmouseover = function(){ 
alert(i); 
}; 
}

你会发现当鼠标移过每一个25edfb22a4f469ecb59f1190150159c6元素时，总是弹出4，而不是我们期待的元素下标。这是为什么呢？注意事项里已经讲了（最终值）。显然这种解释过于简单，当mouseover事件调用监听函数时，首先在匿名函数（ function(){ alert(i); }）内部查找是否定义了 i，结果是没有定义；因此它会向上查找，查找结果是已经定义了，并且i的值是4（循环后的i值）；所以，最终每次弹出的都是4。

解决方法一：

var lists = document.getElementsByTagName('li'); 
for(var i = 0 , len = lists.length ; i < len ; i++){ 
(function(index){ 
lists[ index ].onmouseover = function(){ 
alert(index); 
}; 
})(i); 
}

解决方法二：

var lists = document.getElementsByTagName('li'); 
for(var i = 0, len = lists.length; i < len; i++){ 
lists[ i ].$$index = i; //通过在Dom元素上绑定$$index属性记录下标 
lists[ i ].onmouseover = function(){ 
alert(this.$$index); 
}; 
}

解决方法三：

function eventListener(list, index){ 
list.onmouseover = function(){ 
alert(index); 
}; 
} 
var lists = document.getElementsByTagName('li'); 
for(var i = 0 , len = lists.length ; i < len ; i++){ 
eventListener(lists[ i ] , i); 
}

2 内存泄露

使用闭包十分容易造成浏览器的内存泄露，严重情况下会是浏览器挂死