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实现公告文字左右滚动的实例代码
Oct 29 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
Dec 27 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
Jun 25 Javascript
jQuery超酷平面式时钟效果代码分享
Mar 30 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
Oct 13 Javascript
详解jQuery中的事件
Dec 14 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
Jul 28 Javascript
微信小程序如何获取用户手机号
Jan 26 Javascript
详解微信小程序与内嵌网页交互实现支付功能
Oct 22 Javascript
Vue自定义指令写法与个人理解
Feb 09 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
Aug 20 Javascript
js判断密码强度的方法
Mar 18 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 $_SERVER详解
2009/01/16 PHP
ThinkPHP3.1数据CURD操作快速入门
2014/06/19 PHP
叫你如何修改Nginx与PHP的文件上传大小限制
2014/09/10 PHP
PHP实现支持加盐的图片加密解密
2016/09/09 PHP
利用php生成验证码
2017/02/23 PHP
使用 JScript 创建 .exe 或 .dll 文件的方法
2011/07/13 Javascript
javascript中typeof的使用示例
2013/12/19 Javascript
js正则表达式中test,exec,match方法的区别说明
2014/01/29 Javascript
javascript学习笔记--数字格式类型
2014/05/22 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
2015/03/30 Javascript
基于javascript实现单选及多选的向右和向左移动实例
2015/07/25 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
2015/10/30 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
2016/11/21 Javascript
vue单页应用加百度统计代码(亲测有效)
2018/01/31 Javascript
浅谈React中的元素、组件、实例和节点
2018/02/27 Javascript
Angular父子组件通过服务传参的示例方法
2018/10/31 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
2020/11/11 Javascript
[46:55]Ti4 冒泡赛第二轮 LGD vs C9
2014/07/14 DOTA
Python中使用HTMLParser解析html实例
2015/02/08 Python
python魔法方法-属性访问控制详解
2016/07/25 Python
Python面向对象程序设计类的封装与继承用法示例
2019/04/12 Python
Python操作excel的方法总结(xlrd、xlwt、openpyxl)
2019/09/02 Python
Python2与Python3的区别点整理
2019/12/12 Python
详解用Pytest+Allure生成漂亮的HTML图形化测试报告
2020/03/31 Python
解决margin 外边距合并问题
2019/07/03 HTML / CSS
生物医学工程专业学生求职信范文分享
2013/12/14 职场文书
英语国培研修感言
2014/02/13 职场文书
幼儿园父亲节活动方案
2014/03/11 职场文书
标准毕业生自荐信
2014/06/24 职场文书
党员个人查摆剖析材料
2014/10/16 职场文书
新西兰:最新留学学习计划书写作指南
2019/07/15 职场文书
python opencv常用图形绘制方法(线段、矩形、圆形、椭圆、文本)
2021/04/12 Python
用基于python的appium爬取b站直播消费记录
2021/04/17 Python
Go语言带缓冲的通道实现
2021/04/26 Golang
能让Python提速超40倍的神器Cython详解
2021/06/24 Python
CentOS7 minimal 最小化安装网络设置过程
2022/12/24 Servers