JS立即执行函数功能与用法分析


Posted in Javascript onJanuary 15, 2019

本文实例讲述了JS立即执行函数功能与用法。分享给大家供大家参考,具体如下:

相信大家经常会遇到下面这两种写法:

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

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

关于这样写是什么意思呢?有什么区别呢?

在此之前,我们需要了解几个概念:

函数声明函数表达式匿名函数

函数声明: function fnName() {...} ;

使用 function 关键字声明一个函数,再执行一个函数名,叫函数声明。

函数表达式: var fnName = function() { ... } ;

使用 function 关键字声明一个函数,但未给函数命名,最后将匿名函数赋予一个变量,叫函数表达式,这是最常见的函数表达式语法形式。

匿名函数: function() { ... } ;

使用 function 关键字声明一个函数,但未给函数命名,所以叫匿名函数,匿名函数属于函数表达式,匿名函数有很多作用,赋予一个变量则创建函数,赋予一个事件则成为事件处理程序或创建闭包等等。

函数声明和函数表达式不同之处在于

1、JavaScript 引擎在解析 JavaScript 代码时会“函数声明提升”当前执行环境(作用域)上的函数声明,而函数表达式必须等到 JavaScript 引擎执行到它所在行时,才会从上而下一行一行地解析函数表达式。

2、函数表达式后面可以加括号立即调用该函数,函数声明不可以,只能以 fnName() 形式调用。

知道了这些函数基本概念后,回头看看 (function(){ ... }()) (function() { ... })() 这两种立即执行函数的写法,最初我以为是一个括号包裹匿名函数,并在后面加个括号立即调用函数,当时不知道为什么要加括号,后来明白,要在函数体后面加括号就能立即调用,则这个函数必须是函数表达式,不能是函数声明。

(function(a) {
 console.log(a); //使用()运算符,打印出123
})(123);
(function(a) {
 console.log(a); //使用()运算符,打印出1234
}(1234));
!function(a) {
 console.log(a); //使用!运算符,打印出12345
}(12345);
+function(a) {
 console.log(a); //使用+运算符,打印出123456
}(123456);
-function(a) {
 console.log(a); //使用-运算符,打印出1234567
}(1234567);
var fn = function(a) {
 console.log(a); //使用=运算符,打印出12345678
}(12345678);

可以看到输出结果,在 function 前面加 ! 、+ 、- 甚至是逗号等都可以起到函数定以后立即执行的效果,而 () 、! 、+ 、- 、= 等运算符,都将函数声明转换成函数表达式,消除了 javascript 引擎识别函数表达式和函数声明的歧义,告诉 javascript 引擎这是一个函数表达式,不是函数声明,可以在后面加括号,并立即执行函数的代码。

加括号是最安全的做法,因为 ! 、+ 、- 等运算符还会和函数的返回值进行运算,有时造成不必要的麻烦。

不过这样的写法有什么用呢?

javascript 中没有私有作用域的概念,如果在多人开发的项目上,你在全局或局部作用域中声明了一些变量,可能会被其他人不小心用同名的变量给覆盖掉,根据 javascript 函数作用域链的特性,可以使用这种技术可以模仿一个私有作用域,用匿名函数作为一个“容器”,“容器”内部可以访问外部的变量,而外部环境不能访问“容器”内部的变量,所以 (function(){ ... })() 内部定义的变量不会和外部的变量发生冲突,俗称“匿名包裹器”或“命名空间”。

jQuery 使用的就是这种方法,将 jQuery 代码包裹在 (function(window,undefined){ ...jquery代码...})(window) 中,在全局作用域中调用 jQuery 代码时,可以达到保护 jQuery 内部变量的作用。

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 构造函数 面相对象学习必备知识
Jun 09 Javascript
IE无法设置短域名下Cookie
Sep 23 Javascript
CSS和JS标签style属性对照表(方便js开发的朋友)
Nov 11 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
Dec 21 Javascript
javascript dom追加内容实现示例
Sep 21 Javascript
JavaScript获取指定元素位置的方法
Apr 08 Javascript
Google 地图API Map()构造器详解
Aug 06 Javascript
微信小程序 JS动态修改样式的实现代码
Feb 10 Javascript
React中的refs的使用教程
Feb 13 Javascript
vue - vue.config.js中devServer配置方式
Oct 30 Javascript
js实现带搜索功能的下拉框
Jan 11 Javascript
vue动态渲染svg、添加点击事件的实现
Mar 13 Javascript
vue-cli 目录结构详细讲解总结
Jan 15 #Javascript
webpack file-loader和url-loader的区别
Jan 15 #Javascript
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 #jQuery
Element输入框带历史查询记录的实现示例
Jan 15 #Javascript
微信小程序实现多选删除列表数据功能示例
Jan 15 #Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
Jan 15 #Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
Jan 15 #Javascript
You might like
PHP Document 代码注释规范
2009/04/13 PHP
利用php实现一周之内自动登录存储机制(cookie、session、localStorage)
2016/10/31 PHP
php使用curl模拟浏览器表单上传文件或者图片的方法
2018/11/10 PHP
?牟┛途W扣了一??效果出?? target=
2007/05/27 Javascript
jQuery 核心函数以及jQuery对象
2010/03/23 Javascript
ExtJS DOM元素操作经验分享
2013/08/28 Javascript
jQuery中ajax的使用与缓存问题的解决方法
2013/12/19 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
js闭包实现按秒计数
2015/04/23 Javascript
jQuery实现固定在网页顶部的菜单效果代码
2015/09/02 Javascript
深入探讨javascript函数式编程
2015/10/11 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
2016/06/01 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
2016/09/01 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
2016/10/10 Javascript
Select2.js下拉框使用小结
2016/10/24 Javascript
js遮罩效果制作弹出注册界面效果
2017/01/25 Javascript
canvas绘图不清晰的解决方案
2017/02/28 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
2018/01/02 jQuery
JS实现的合并多个数组去重算法示例
2018/04/11 Javascript
Vue实现todolist删除功能
2018/06/26 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
2018/08/13 Javascript
[50:28]LGD女子学院第三期 DOTA2复仇之魂教学
2013/12/24 DOTA
python中返回矩阵的行列方法
2018/04/04 Python
Python进阶:生成器 懒人版本的迭代器详解
2019/06/29 Python
Python读取csv文件实例解析
2019/12/30 Python
python实现交并比IOU教程
2020/04/16 Python
python db类用法说明
2020/07/07 Python
序列化Python对象的方法
2020/08/01 Python
英国的领先快速时尚零售商:In The Style
2019/03/25 全球购物
道路建设实施方案
2014/03/18 职场文书
党员应该树立反腐倡廉的坚定意识思想汇报
2014/09/12 职场文书
批评与自我批评总结
2014/10/17 职场文书
民政局离婚协议书范本
2014/10/20 职场文书
志愿服务心得体会
2016/01/15 职场文书
pytorch MSELoss计算平均的实现方法
2021/05/12 Python
PyTorch 如何设置随机数种子使结果可复现
2021/05/12 Python