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 相关文章推荐
js Event对象的5种坐标
Sep 12 Javascript
php与js的区别是什么
Aug 05 Javascript
JavaScript 垃圾回收机制分析
Oct 10 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Apr 01 Javascript
JavaScript获取网页表单action属性的方法
Apr 02 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
Sep 28 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
May 25 Javascript
Angular2从搭建环境到开发步骤详解
Oct 17 Javascript
iview table render集成switch开关的实例
Mar 14 Javascript
vue项目上传Github预览的实现示例
Nov 06 Javascript
解决vue单页面修改样式无法覆盖问题
Aug 05 Javascript
vue项目从node8.x升级到12.x后的问题解决
Oct 25 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中array_merge和array相加的区别分析
2013/06/17 PHP
一漂亮的PHP图片验证码实例
2014/03/21 PHP
php lcg_value与mt_rand生成0~1随机小数的效果对比分析
2017/04/05 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
IE DOM实现存在的部分问题及解决方法
2009/07/25 Javascript
Javascript string 扩展库代码
2010/04/09 Javascript
jQuery.extend 函数的详细用法
2012/06/27 Javascript
一个简单的全屏图片上下打开显示网页效果示例
2014/07/08 Javascript
JavaScript判断是否为数组的3种方法及效率比较
2015/04/01 Javascript
js获取当前日期时间及其它操作汇总
2015/04/17 Javascript
js代码验证手机号码和电话号码是否合法
2015/07/30 Javascript
js贪吃蛇游戏实现思路和源码
2016/04/14 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
2016/06/13 Javascript
JS动态添加选项案例分析
2016/10/17 Javascript
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
Vue多种方法实现表头和首列固定的示例代码
2018/02/02 Javascript
vue进行图片的预加载watch用法实例讲解
2018/02/07 Javascript
JavaScript字符和ASCII实现互相转换
2020/06/03 Javascript
python实现排序算法
2014/02/14 Python
利用Python如何生成随机密码
2016/04/20 Python
HTML中使用python屏蔽一些基本功能的方法
2017/07/07 Python
Python解决八皇后问题示例
2018/04/22 Python
python多个模块py文件的数据共享实例
2019/01/11 Python
浅谈Python 钉钉报警必备知识系统讲解
2020/08/17 Python
携程旅行网:中国领先的在线旅行服务公司
2017/02/17 全球购物
英国当代时尚和街头服饰店:18montrose
2018/12/15 全球购物
英国户外装备商店:Ultimate Outdoors
2019/05/07 全球购物
Oasis服装官网:时尚女装在线
2020/07/09 全球购物
急诊科护士自我鉴定
2013/10/14 职场文书
学习雷锋活动总结
2014/04/29 职场文书
多媒体编辑专业毕业生求职信
2014/06/13 职场文书
2014年校长工作总结
2014/12/11 职场文书
申报材料格式
2014/12/30 职场文书
唐山大地震的观后感
2015/06/05 职场文书
Pycharm 如何设置HTML文件自动补全代码或标签
2021/05/21 Python
利用Python脚本写端口扫描器socket,python-nmap
2022/07/23 Python