立即执行函数

立即执行函数

什么是立即执行函数？

立即执行函数，更为确切的表达是立即调用函数表达式。

立即调用函数表达式（英文，immediately-invoked function expression，缩写IIFE），是一种利用JavaScript函数生成新作用域的编程方法。它返回的不是函数本身，而是函数执行的结果。

立即执行函数的作用是什么？

1. 让函数内声明的变量绕过了变量提示的规则；
2. 避免了全局变量污染;
3. 禁止访问函数内声明变量的情况下，允许外部对函数的调用。

不同的写法

1. 将函数表达式字面量至于圆括号之内，然后使用圆括号调用函数，这种方式最常用，最常见。

(function () {
	// 这里的语句将获得新的作用域
})();

2. 将函数表达式和圆括弧使用另一个圆括弧否包围起来

(function () {
  // 这里的语句将获得新的作用域
}())；

3. 一种更为简单的写法，在函数前面带上一个一元操作符

!function sayHello (msg) {
  console.log(msg);
}('来了，老弟')
~function sayHello (msg) {
  console.log(msg);
}('来了，老弟')
+function sayHello (msg) {
  console.log(msg);
}('来了，老弟')
-function sayHello (msg) {
  console.log(msg);
}('来了，老弟')

这种写法虽然简单，但是不易阅读，不推荐。

下面这种写法是错误的

function sayHello (msg) {
  console.log(msg)
}('来了，老弟');

// 以上这种写法等同于
function sayHello (msg) {
  console.log(msg)
};
('来了，老弟');
// 函数声明和圆括号完全分开，会报错

总结一下，抓住这两点：

1. 当圆括号出现在匿名函数的末尾来调用函数时，它会默认将函数当成函数声明。
2. 当圆括号包裹函数时，它会默认将函数作为表达式去解析，而不是函数声明。

如果将参数传递给立即执行函数

(function (a, b) {
  // a == '来了'
  // b == '老弟'
})('来了', '老弟')

经典案例

1. 利用IIFE创建真正的私用函数和变量

// 'counter' 函数返回一个具有属性的对象，这里的属性就是get set函数
var counter = (function () {
	var i = 0;
  return {
    get: function () {
      return i;
    },
    set: function () {
      i = val;
    },
    increment: function () {
      return ++i;
    }
  }
})();
// 这些调用使用了刚才counter得到的属性
counter.get(); // 0
counter.set(3);
counter.increment(); // 4
counter.increment(); // 5

直接访问counter.i，会得到undefined，并不是counter的属性。直接访问i会报错，因为i并没有在全局作用域中定义。