(function(){...})()
(function(){...}())

这是两种js立即执行函数的常见写法。

基本概念:

函数声明:function fname(){...}; 使用function关键字声明一个函数,再指定一个函数名。

函数表达式:var fname=function(){...}; 使用function关键字声明一个函数,但未给函数命名,最后将匿名函数赋予给一个变量。

匿名函数:function(){}; 使用function关键字声明一个函数,但未给函数命名。(匿名函数也属于函数表达式。)

(匿名函数作用很多,赋予一个变量则创建函数,赋予一个事件则成为事件处理程序等。。)

关于函数声明和函数表达式的区别:

1:函数声明的Function declaration Hoisting(换成人话就是函数声明提升),函数表达式不具备这点,它需要被js代码解析到当前这行时才可以调用。

2:函数表达式后边加 ()立即调用该函数,函数声明不可以,它只能以fname()调用。

例子:

 fName();
function fName(){...}//正确,函数声明提升,所以 fName()可以写在函数声明之前。 fName();
var fName=function(){...}//错误,函数表达式不具备函数声明提升。 var fName=function(){...}();//正确,函数表达式后边加()立即调用函数。 function fName(){...}();//错误,函数声明必须用fName()调用。
//这行代码被解析为两部分: 1函数声明 function fName(){...}, 2分组表达式(),这表达式有误,因为括号内没有表达式, function (){...}();//匿名函数不可以这么调用,因为function(){...}被当做了声明,声明不可以直接()调用。

顺便说下立即调用IIFE(Immediately Invoked Function Expression):

(function(){...})() 和 (function(){...}()) 是没区别的!

传统的定义函数为:

 function foo(){...} //这是定义,Declaration,只是让解释器知道其存在,不会运行

 foo(); //这是语句,解释器遇到语句会运行它

为什么要IIFE呢? 1:传统的方法啰嗦。 2:传统的方法污染全局命名空间

于是 我们这么写  function foo(){...}();  这样写行么。。不行,为啥,因为function foo(){...}这部分只是声明,对解释器来说,像是你写了串字符串“function foo(){...}”,它需要的是解析函数,可以用比如eval()来执行它才可以。所以把()直接放声明后边是不行的,错误语法!

然而,我们距离成功相当接近,只需要把函数声明变成函数表达式就可以了。方法非常多,最常见的方法是用一对() 包裹起来。 (function foo(){...})();

这就等价于

 var foo= function(){...};
foo();

当然 还有很多别的方法可以把声明变成表达式:

  !function foo(){...}();
+function foo(){...}();
void function() {...}();

需要全局对象的时候,可以这么传, 举例:

 void function(global){
console.log("a's value is: "+global.aa); //可以获取全局对象中aa的值
}(this)
 var aa=10;
(function(a){
console.log("hello world"+a);
})(aa);

JS中 (function(){...})()立即执行函数的更多相关文章

  1. 【repost】js中(function(){…})()立即执行函数写法理解

    摘要: javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解. ...

  2. js中(function(){…})()立即执行函数写法理解

    文章摘自https://my.oschina.net/u/2331760/blog/468672?p={{currentPage+1}} 摘要: javascript和其他编程语言相比比较随意,所以j ...

  3. js中(function(){…})()立即执行函数写法理解(转载oschina)

    ( function(){…} )()和( function (){…} () )是两种javascript立即执行函数的常见写法,最初我以为是一个括号包裹匿名函数,再在后面加个括号调用函数,最后达到 ...

  4. IIFE-js中(function(){…})()立即执行函数写法理解

    介绍IIFE IIFE的性能 使用IIFE的好处 IIFE最佳实践 jQuery优化 在Bootstrap源码(具体请看<Bootstrap源码解析>)和其他jQuery插件经常看到如下的 ...

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

    javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解. ( f ...

  6. JS中的自执行函数

    本来规划的是2013年,狠狠的将JS学习下,谁知计划赶不上变化,计划泡汤了.13年的我对JS来说可以说是属于跟风,对它的理解和认识也仅仅是皮毛而已,也是因为要完成<ArcGIS API for ...

  7. JS中的立即执行函数

    JS 立即执行函数可以让函数在创建后立即执行,这种模式本质上就是函数表达式(命名的或者匿名的),在创建后立即执行. 1.立即执行函数的写法 立即执行函数通常有下面两种写法: //第一种写法 (func ...

  8. js中的延迟执行和定时执行

    在js中,延迟执行函数有两种,setTimeout和setInterval,用法如下: function testFunction(){Console.log('hovertree.com');} s ...

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

    投稿:junjie 字体:[增加 减小] 类型:转载 时间:2014-06-12 我要评论 这篇文章主要介绍了深入理解javascript中的立即执行函数,立即执行函数也叫立即调用函数,通常它的写法是 ...

随机推荐

  1. 【题解】L 国的战斗续之多路出击 [P2129]

    [题解]L 国的战斗续之多路出击 [P2129] 传送门: \(L\) 国的战斗续之多路出击 \([P2129]\) [题目描述] 给出 \(n\) 个坐标,\(m\) 个指令,指令处理顺序应是从后往 ...

  2. ThinkPad L460 拆机加ngff ssd与内存

    ThinkPad L460 拆机加ngff ssd与内存 参考链接:http://blog.sina.com.cn/s/blog_82793ae60102wgtp.html 原有配置:i5 6200U ...

  3. 【JVM】jstat命令详解---JVM的统计监测工具

    java进程的PID获取命令: https://www.cnblogs.com/sxdcgaq8080/p/10734752.html ================================ ...

  4. C# 调用打印机打印文件

    C# 调用打印机打印文件,通常情况下,例如Word.Excel.PDF等可以使用一些对应的组件进行打印,另一个通用的方式是直接启用一个打印的进程进行打印.示例代码如下: using System.Di ...

  5. 2019 多点Dmalljava面试笔试题 (含面试题解析)

      本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.多点Dmall等公司offer,岗位是Java后端开发,因为发展原因最终选择去了多点Dmall,入职一年时间了 ...

  6. 开发技术--pandas模块

    开发|pandas模块 整了一篇关于pandas模块的使用文章,方便检查自己的学习质量.自从使用了pandas之后,真的是被它的功能所震撼~~~ 前言 目前所有的文章思想格式都是:知识+情感. 知识: ...

  7. Vue 动态控制页面中按钮是否显示和样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. MySQL——基本概念

    1.数据库:是一个长期存储在计算机内的.有组织的.有共享的.统一管理的数据集合.它是一个按数据结构来存储的和管理数据的计算机软件系统,即数据库包含两层含义:保管数据的“仓库”,以及数据管理的方法和技术 ...

  9. angular6 导出Excel文件

    1.安装file-saver.@types/file-saver和xlsx npm install file-saver --save npm install @types/file-saver -- ...

  10. alpine基础镜像使用

    关于Alpine的相关知识,可以参考下边的链接 https://yeasy.gitbooks.io/docker_practice/content/cases/os/alpine.html 一. al ...