浅析Javascript匿名函数与自执行函数

JavaScript中的匿名函数及其魔力

在JavaScript的世界里，函数是一种非常灵活的对象。其中，匿名函数，即没有函数名的函数，更是蕴含着许多奥秘和用途。今天，我们就来一下匿名函数的魅力。

函数的定义方式

JavaScript中，函数的定义大致可分为三种方式。

1. 常规方式：这是大多数人选择的方式，简单直观。

```javascript

function double(x){

return 2 x;

}

```

2. 使用Function构造函数：这种方式不太常用，因为它需要参数列表和函数体都作为字符串传递，不太方便。

```javascript

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

```

3. 创建匿名函数并赋值给变量：这是今天要重点介绍的方式。

```javascript

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

```

这里的`double`变量实际上指向了一个匿名函数。这种方式的灵活性非常高，允许我们随时改变函数的引用或行为。

匿名函数的创建与自执行

除了上述赋值方式外，我们还可以直接创建匿名函数并执行它。例如：

```javascript

(function(x, y){

alert(x + y);

})(2, 3); // 直接调用并传入参数

```

这里创建了一个匿名函数并立即执行，传入了参数`2`和`3`。这种自执行的匿名函数在JavaScript中非常常见，用于初始化配置、封装逻辑等。为什么它可以执行而`function(){...}();`却会报错呢？这涉及到JavaScript的预编译和执行过程。简单来说，带有括号表达式的会被立即求解并执行，而单独的函数声明则不会。

我们还可以使用其他操作符如`void`或`!`来使函数自执行，例如：

```javascript

!function(){

alert("另类的匿名函数自执行");

}();

```

匿名函数与闭包

闭包是JavaScript中非常强大的特性之一。简单来说，闭包就是函数的嵌套，内层函数可以访问外层函数的变量，即使外层函数已经执行完毕。匿名函数与闭包结合，可以创建出许多强大的代码逻辑。例如：

```javascript

function checkClosure(){

var str = 'rain-man';

setTimeout(

function(){ alert(str); } //这是一个匿名函数

, 2000);

}

checkClosure();

```

在这个例子中，checkClosure函数执行完毕后，str变量并未被释放，因为setTimeout内的匿名函数仍然存在对str的引用。这显示了闭包的强大功能，也体现了匿名函数的灵活应用。它们结合起来，能为我们带来许多意想不到的效果和便利。使用闭包优化代码并深入理解其机制

闭包是一种强大的工具，可以使我们在JavaScript中更好地管理和组织代码。让我们深入如何使用闭包来优化代码并理解其背后的原理。

看一个简单的例子，我们有`forTimeout`和`delay`两个函数。使用闭包可以使`delay`函数更易于阅读和维护。

原始的`delay`函数是这样写的：

```javascript

function delay(x, y, time) {

setTimeout('forTimeout(' + x + ',' + y + ')', time);

}

```

```javascript

function delay(x, y, time) {

setTimeout(function() {

forTimeout(x, y);

}, time);

}

```

这里利用了匿名函数来创建一个闭包，使得`forTimeout`的调用更加清晰，避免了字符串拼接的复杂性。

接下来，我们看到如何使用闭包创建命名空间并减少全局变量的使用。在这个例子中，我们创建了一个`oEvent`对象，并通过闭包添加了两个方法：`addEvent`和`removeEvent`。这两个方法都是局部变量，但可以通过全局变量`oEvent`来访问。这种结构增强了网页的安全性，减少了全局命名空间的污染。

我们还可以使用闭包来初始化变量和函数。例如，我们创建了一个名为`rainman`的变量，它通过一个立即执行的匿名函数初始化并返回结果。这是一种实用的技巧，可以使代码更简洁。

让我们一个关于闭包和循环的常见问题。当我们为DOM元素添加事件监听器时，如果在循环中直接使用变量`i`，可能会遇到意料之外的问题。这是因为当事件触发时，匿名函数会查找变量`i`，但由于作用域链的存在，它会找到循环结束后的`i`的最终值。为了解决这个问题，我们需要创建一个新的作用域来保存当前的`i`值。闭包为我们提供了这种能力。

在网页的文档中，我们获取所有的列表元素（li标签）。对于每一个列表元素，当鼠标滑过它时，我们希望通过弹窗显示它的索引。一种解决方法是为每一个列表元素绑定一个鼠标悬停事件，当事件触发时，弹窗显示对应的索引。但我们需要小心闭包的使用，以避免内存泄露。以下是代码的实现：

```javascript

var lists = document.getElementsByTagName('li');

for(var i = 0; i < lists.length; i++){

lists[i].onmouseover = (function(index) {

return function() {

alert(index);

};

})(i); //立即执行函数表达式，传递当前的索引值

}

```

另一种方法是在DOM元素上绑定一个自定义属性（例如`$$index`），用来记录每个元素的索引。当鼠标悬停在列表元素上时，通过该属性获取索引并弹窗显示。这种方法避免了闭包引起的内存泄露问题。以下是代码的实现：

```javascript

var lists = document.getElementsByTagName('li');

for(var i = 0; i < lists.length; i++){

lists[i].$$index = i; // 在DOM元素上绑定自定义属性记录索引

lists[i].onmouseover = function() {

alert(this.$$index); // 通过该属性获取索引并弹窗显示

};

}

```

关于内存泄露的解释：

使用闭包在某些情况下确实可能导致浏览器的内存泄露问题，甚至使浏览器崩溃。这是因为闭包可以保留函数内部的变量，即使函数执行完毕，这些变量也不会被垃圾回收机制清理掉。如果闭包持有大量的内存，并且没有被释放，随着时间的推移，可能会导致浏览器内存不足，出现挂起或崩溃的情况。在使用闭包时，我们需要特别注意避免不必要的内存占用和泄露。在上述的解决方法一中，我们通过立即执行函数表达式来确保每个事件处理函数都有自己独立的作用域，从而减少闭包引起的内存泄露风险。解决方法二则通过避免使用闭包来完全避免这个问题。