JavaScript中立即执行函数实例详解
js立即执行函数可以让你函数在创建后立即执行js立即执行函数模式是一种语法可以让你函数在定义后立即被执行这种模式本质上就是函数表达式(命名或者匿名)在创建后立即执行
( function(){…} )()和( function (){…} () )是两种javascript立即执行函数常见写法最初我以为是一个括号包裹匿名函数再在后面加个括号调用函数最后达到函数定义后立即执行目后来发现加括号原因并非如此
通常我们声明一个函数有以下几种方式：
// 声明函数f1
function f1() {
console.log("f1");
}
// 通过()来调用此函数
f1();
//一个匿名函数函数表达式被赋值给变量f2:
var f2 = function() {
console.log("f2");
}
//通过()来调用此函数
f2();
//一个命名为f3函数函数表达式(这里函数名可以随意命名可以不必和变量f3重名)被赋值给变量f3:
var f3 = function f3() {
console.log("f3");
}
//通过()来调用此函数
f3();
如果你看过一些自定义控件话你会发现他们大多数都是沿用这种写法：
(function() {
```
// 这里开始写功能需求
})();
这是我们常说立即执行函数(IIFE)顾名思义也就是说这个函数是立即执行函数体不需要你额外去主动去调用一般情况下我们只对匿名函数使用IIFE这么做有两个目：
- 一是不必为函数命名避免了污染全局变量
- 二是IIFE内部形成了一个单独作用域可以封装一些外部无法读取私有变量
如果看到这两句话无法理解那么先从IIFE运行原理说起
因为IIFE通常用于匿名函数这里就用简单匿名函数作为栗子：
var f = function(){
console.log("f");
}
f();
我们发现这里f只是这个匿名函数一个引用变量那么既然f()能够调用这个函数我把f替换成函数本身可以么：
function(){
console.log("f");
}();
运行之后得到如下结果：
Uncaught SyntaxError: Unexpected token (
产生这个错误原因是Javascript引擎看到function关键字之后认为后面跟是函数声明语句不应该以圆括号结尾解决方法就是让引擎知道圆括号前面部分不是函数定义语句而是一个表达式可以对此进行运算这里区分一下函数声明和函数表达式：
1、函数声明(即我们通常使用function x(){}来声明一个函数)
function myFunction () { /* logic here */ }
2、函数表达式(类似以这种形式)
var myFunction = function () { /* logic here */ };
var myObj = {
myFunction: function () { /* logic here */ }
};
小学我们就学过用()括起来表达式会先执行就像下面这样：
1+(2+3) //这里先运行小括号里面内容没有意见撒
其实在javascript中小括号也有相似作用Javascript引擎看到function关键字会认为是函数声明语句那么如果Javascript引擎优先看到小括号会怎么样：
//用小括号把函数包裹起来
(function(){
console.log("f");
})();
函数成功执行了：
f //控制台输出
这种情况下Javascript引擎就会认为这是一个表达式而不是函数声明当然要让Javascript引擎认为这是一个表达式方法还有很多：
!function(){}();
+function(){}();
-function(){}();
~function(){}();
new function(){ /* code */ }
new function(){ /* code */ }() // 只有传递参数时才需要最后那个圆括号
……
回到前面题为什么说IIFE这种形式避免了污染全局变量如果你见过别人写jquery插件里面通常会有类似这样代码：
(function($){
```
//插件实现代码
})(jQuery);
这里jquery其实是该匿名函数参数联想一下我们调用匿名函数时候是用f()那么匿名带参数就是f(args)对吧这里把jquery作为参数传入该函数那么在函数内部使用形参$时候就不会影响到外部环境因为有些插件也会用到$这个限定符你在这个函数内部可以随意折腾
