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立即执行某个函数：插件中function()()再思考
JavaScript中的立即执行函数

javascript中的立即执行函数(代码片段)

通常我们声明一个函数有以下几种方式：//声明函数f1functionf1()console.log("f1");//通过()来调用此函数f1();//一个匿名函数的函数表达式，被赋值给变量f2:varf2=function()console.log("f2");//通过()来调用此函数f2();//一个... 查看详情

javascript闭包立即执行函数(代码片段)

JavaScript闭包文章目录JavaScript闭包一、为什么要闭包二、让某些变量得以常驻内存1.原理2.Why立即执行函数?三、让外部得以访问函数内变量四、立即执行函数总结#前言-什么是闭包函数闭包函数是声明在另一个函数内的函数,是被... 查看详情

javascript中的立即执行函数(function(){…})()

javascript中的立即执行函数(function(){…})() 深入理解javascript中的立即执行函数,立即执行函数也叫立即调用函数,通常它的写法是用(function(){…})()包住业务代码,使用jquery时比较常见。(function(){…})()和(function(){…}(... 查看详情

深入理解javascript中的立即执行函数(function(){…})()

这篇文章主要介绍了深入理解javascript中的立即执行函数,立即执行函数也叫立即调用函数,通常它的写法是用(function(){…})()包住业务代码,使用jquery时比较常见,需要的朋友可以参考下http://www.jb51.net/article/50967.htm javascript和其他... 查看详情

javascript学习-46.立即执行函数(代码片段)

前言立即执行函数有以下作用创建一个独立作用域，这个作用域里面的变量，外部访问不到，避免变量污染。闭包和私有数据使用语法有两种写法//第一种：用括号把整个函数定义和括号调用包裹起来(function()//函... 查看详情

web前端-javascript中的函数（创建，参数，返回值，方法，函数作用域，立即执行函数）(代码片段)

...装函数的返回值立即执行函数方法函数作用域补充：JavaScript中的作用域相关概念简介函数（Function）函数也是一个对象函数中可以封装一些功能(代码),在需要时可以执行这些功能(代码)。函数中可以保存一些代码，... 查看详情

javascript立即执行函数的两种写法(代码片段)

(function(str)console.log(str+'欢迎你~');)('行步至春深');(function(str)console.log(str+'欢迎你~');('行路易知难'));可以看到，每种写法都比平常多出两个小括号，其中一个可以看作是调用，里面装参 查看详情

立即执行的匿名函数(代码片段)

...nction语句来定义一个函数4.Function对象 　Function对象是JavaScript里面的固 查看详情

工作中，如何衡量一个人的javascript编码水平？(代码片段)

1、立即执行函数立即执行函数，即ImmediatelyInvokedFunctionExpression(IIFE)，正如它的名字，就是创建函数的同时立即执行。它没有绑定任何事件，也无需等待任何异步操作：(function()//代码)();function()…是一个匿名函数，包围它的一... 查看详情

javascript函数详解(代码片段)

一、函数的一些基础概念：1.js中的函数使用function来声明。2.关于return：2.1 函数在执行到return语句后悔立即停止并退出，return后面的代码永远不会得到执行；2.2 函数不必指定是否返回值，只要return语句后跟要返回的值即... 查看详情

javascript自动执行函数（立即调用函数）

开头：各种原因总结一下javascript中的自动执行函数（立即调用函数）的一些方法，正文如下  在Javascript中，任何function在执行的时候都会创建一个执行上下文，因为function声明变量和function有可能只在该function内部，这个... 查看详情

js立即执行函数

javascript和其他编程语言相比比较随意，所以javascript代码中充满各种奇葩的写法，有时雾里看花，当然，能理解各型各色的写法也是对javascript语言特性更进一步的深入理解。(function(){…})()和(function(){…}())是两种javascript立即执行... 查看详情

Javascript - 存储为变量时立即执行的函数？

】Javascript-存储为变量时立即执行的函数？【英文标题】：Javascript-FunctionBeingExecutedImmediatelywhenStoredasVariable?【发布时间】：2015-09-2507:03:33【问题描述】：第一次发帖。编程新手。在Javascript中，当我声明一个新变量并将这个新声... 查看详情

javascript立即执行函数表达式（iife）

...e*/})();Q:为什么这样写，函数就嗯那个立即执行？A:因为在javascript里，括号内部不能包含语句，当解析器对代码进行解释的时候，先碰到了()，然后碰到function关键字就会自动将()里面的代码识别为函数表达式而不是函数声明。eg：... 查看详情

javascript立即执行函数

在项目中看到这么一段代码!function(){//dosomething}();之前知道一点立即执行的概念，但是看见感叹号！（非）就有点懵了，这是要干啥。继续往下看。 待续   参考地址：https://segmentfault.com/a/1190000003985390https://segmentfau... 查看详情

前端小小白的学习之路javascript中的十个难点，你有必要知道。

1.立即执行函数立即执行函数，即ImmediatelyInvokedFunctionExpression(IIFE)，正如它的名字，就是创建函数的同时立即执行。它没有绑定任何事件，也无需等待任何异步操作：(function(){//代码//...})();function(){…}是一个匿名函数，包围... 查看详情

立即执行函数(代码片段)

...数表达式： varfnName=function()... ； （后加括号立即调用并返回值给变量）使用 function  查看详情

（转）扫盲--javascript的立即执行函数

看过jQuery源码的人应该知道，jQuery开篇用的就是立即执行函数。立即执行函数常用于第三方库，好处在于隔离作用域，任何一个第三方库都会存在大量的变量和函数，为了避免变量污染（命名冲突），开发者们想到的解决办法就... 查看详情