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 相关文章推荐
JQuery为页面Dom元素绑定事件及解除绑定方法
Apr 23 Javascript
javascript学习笔记(八)正则表达式
Oct 08 Javascript
javascript实现根据时间段显示问候语的方法
Jun 18 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
Mar 17 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
Feb 27 Javascript
兼容浏览器的js事件绑定函数(详解)
May 09 Javascript
jQuery Validate 校验多个相同name的方法
May 18 jQuery
Vue.js实现按钮的动态绑定效果及实现代码
Aug 21 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
Nov 24 Javascript
35个最好用的Vue开源库(史上最全)
Jan 03 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
Jun 05 Javascript
js 实现watch监听数据变化的代码
Oct 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
短波问题解答
2021/02/28 无线电
php绘图之加载外部图片的方法
2015/01/24 PHP
PHP中header用法小结
2016/05/23 PHP
php usort 使用用户自定义的比较函数对二维数组中的值进行排序
2017/05/02 PHP
php cli模式下获取参数的方法
2017/05/05 PHP
Javascript模块模式分析
2008/05/16 Javascript
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
2010/06/19 Javascript
基于jquery实现漂亮的动态信息提示效果
2011/08/02 Javascript
解析window.open的使用方法总结
2013/06/19 Javascript
jquery选择器、属性设置用法经验总结
2013/09/08 Javascript
JS增加行复制行删除行的实现代码
2013/11/09 Javascript
js中的preventDefault与stopPropagation详解
2014/01/29 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
node.js版本管理工具n无效的原理和解决方法
2016/11/24 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
2016/12/31 Javascript
使用JS 插件qrcode.js生成二维码功能
2017/02/20 Javascript
图解Javascript——作用域、作用域链、闭包
2017/03/21 Javascript
node跨域请求方法小结
2017/08/25 Javascript
node基于puppeteer模拟登录抓取页面的实现
2018/05/09 Javascript
Eclipse + Python 的安装与配置流程
2013/03/05 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
Python处理菜单消息操作示例【基于win32ui模块】
2018/05/09 Python
Tensorflow使用tfrecord输入数据格式
2018/06/19 Python
Python 读取有公式cell的结果内容实例方法
2020/02/17 Python
Python发送邮件封装实现过程详解
2020/05/09 Python
Django项目在pycharm新建的步骤方法
2021/03/02 Python
分享CSS3制作卡片式图片的方法
2016/07/08 HTML / CSS
马来西亚最热门的在线时尚商店:FashionValet
2018/11/11 全球购物
女性时尚在线:IVRose
2019/02/23 全球购物
几个Linux面试题笔试题
2012/12/01 面试题
大学中国梦演讲稿
2014/04/23 职场文书
2015年青年志愿者工作总结
2015/05/20 职场文书
MySQL中使用or、in与union all在查询命令下的效率对比
2021/05/26 MySQL
Python代码风格与编程习惯重要吗?
2021/06/03 Python
一些让Python代码简洁的实用技巧总结
2021/08/23 Python
德生TECSUN S-2000使用手册文字版
2022/05/10 无线电