JavaScript中立即执行函数实例详解转载作者：李牧羊

javascript和其他编程语言相比比较随意，所以javascript代码中充满各种奇葩的写法，有时雾里看花，当然，能理解各型各色的写法也是对javascript语言特性更进一步的深入理解。这篇文章主要给大家介绍了关于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作为参数传入该函数，那么在函数内部使用形参$的时候就不会影响到外部环境，因为有些插件也会用到$这个限定符，你在这个函数内部可以随意折腾。

JavaScript中立即执行函数实例详解转载作者：李牧羊相关推荐

bootstraptable 加载完成回调函数_牛皮了！头一次见有大佬把「JavaScript中的回调函数」详解得如此清晰明了...
前言 callback,大家都知道是回调函数的意思.但是你对这个概念应该是模模糊糊.比如Ajax,你只知道去调用返回函数,如果对callback没有理解清楚,估计你在学习Node.js后会崩溃,因为c ...
JavaScript中window.open用法实例详解
本文较为详细的分析了JavaScript中window.open用法.分享给大家供大家参考.具体如下: 复制代码代码如下: <script LANGUAGE="javascript& ...
C语言math.h中的常用函数实例详解
1.绝对值 2.取整和取余 3.三角函数 4.反三角函数 5.双曲三角函数 6.指数和对数 7.标准化浮点数 8.多项式 9.数学错误计算处理 1.绝对值函数原型: int abs(int x); ...
python format函数实例_python中强大的format函数实例详解
python中format函数用于字符串的格式化自python2.6开始,新增了一种格式化字符串的函数str.format(),此函数可以快速处理各种字符串. 语法它通过{}和:来代替%. 请看下 ...
c语言二级指针有什么作用,C语言中二级指针的实例详解
C语言中二级指针的实例详解 C语言中二级指针的实例详解用图说明示例代码: #include int main(int argc, const char * argv[]) { // int a = ...
php 递归中的全局变量,PHP中递归的实现实例详解
递归的定义递归(http:/en.wikipedia.org/wiki/Recursive)是一种函数调用自身(直接或间接)的一种机制,这种强大的思想可以把某些复杂的概念变得极为简单.在计算机科学之 ...
python迭代器创建序列_Python 中迭代器与生成器实例详解
Python 中迭代器与生成器实例详解本文通过针对不同应用场景及其解决方案的方式,总结了Python中迭代器与生成器的一些相关知识,具体如下: 1.手动遍历迭代器应用场景:想遍历一个可迭代对象中的 ...
php中this的使用技巧,JavaScript中this关键字使用方法详解
JavaScript中this关键字使用方法详解在面向对象编程语言中,对于this关键字我们是非常熟悉的.比如C++.C#和Java等都提供了这个关键字,虽然在开始学习的时候觉得比较难,但只要理解了 ...
ios 扇形按钮_IOS 开发中画扇形图实例详解
IOS 开发中画扇形图实例详解昨天在做项目中,遇到一个需要显示扇形图的功能,网上搜了一下,发现code4app里面也没有找到我想要的那种类似的效果,没办法了,只能自己学习一下如何画了. 首先我们需要 ...

JavaScript中立即执行函数实例详解转载作者：李牧羊

JavaScript中立即执行函数实例详解转载作者：李牧羊相关推荐

最新文章

热门文章

JavaScript中立即执行函数实例详解 转载 作者：李牧羊

JavaScript中立即执行函数实例详解 转载 作者：李牧羊相关推荐

最新文章

热门文章

JavaScript中立即执行函数实例详解转载作者：李牧羊

JavaScript中立即执行函数实例详解转载作者：李牧羊相关推荐