深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域


Posted in Javascript onAugust 28, 2018

匿名函数:没有实际名字的函数。

匿名函数的作用:

1、通过匿名函数可以实现闭包,关于闭包在后面的文章中会重点讲解。在这里简单介绍一下:闭包是可以访问在函数作用域内定义的变量的函数。若要创建一个闭包,往往都需要用到匿名函数。
2、模拟块级作用域,减少全局变量。执行完匿名函数,存储在内存中相对应的变量会被销毁,从而节省内存。再者,在大型多人开发的项目中,使用块级作用域,会大大降低命名冲突的问题,从而避免产生灾难性的后果。自此开发者再也不必担心搞乱全局作用域了。

本章节重点给大家介绍JavaScript 中的匿名函数((function() {})();)与变量的作用域,具体内容如下所示:

以前都是直接用前端框架Bootstrap,突然想看看Javascript,发现javascript是个非常有趣的东西,这里把刚碰到的一个小问题的理解做下笔录(废话不多说,上代码)。

/**
 * Example 1
 */
var localvar = "local var";
console.log(localvar);//local var
/**
 * Example 2
 */
console.log(x === undefined); // true
var x = 3;
/**
 * Example 3
 */
var myvar = "my value";
//Test01
//will return a value of undefined
(function() {
 console.log(myvar); // undefined
 var myvar = "local value";
 console.log(myvar); // local value
})();
console.log(myvar);//my value
//Test02
(function myFunction(){
 console.log(myvar);//my value
})();
//Test03
var test = new function(){
 console.log(myvar);//my value
};

解释如下:

(1).JavaScript 变量的特别之处是,你可以引用稍后声明的变量而不会引发异常。这一概念称为变量声明提升(hoisting);

(2).JavaScript 变量感觉上是被“提升”或移到了函数或语句的顶部。然而提升后的变量将返回 undefined 值。

(3).在使用或引用某个变量之后进行声明和初始化操作,这个被提升的引用仍将得到 undefined 值。

(4).这里Example 3中Test01是这次问题的关键,Test01和Test02是很相似的(至少我看着很相似)。但是最后输出结果不能用(1)、(2)、(3)来解释

经过查看官方API文档发现,在匿名函数(function() {})();的使用中形成了闭包(重点,不清楚的可以查阅闭包的概念,闭包概念还是好理解的);

由于闭包的存在,全局变量自然无法访问(闭包的一个重要原因就是为了避免访问全局变量),故Test01 function中第一句输出结果为undefined。

总结原因:匿名函数(function() {})();是一个特殊的闭包写法。

总结

以上所述是小编给大家介绍的JavaScript 中的匿名函数((function() {})();)与变量的作用域,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
extjs grid设置某列背景颜色和字体颜色的实现方法
Sep 06 Javascript
基于js与flash实现的网站flv视频播放插件代码
Oct 14 Javascript
纯javascript模仿微信打飞机小游戏
Aug 20 Javascript
js实现超酷的照片墙展示效果图附源码下载
Oct 08 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
Dec 29 Javascript
JQuery遍历元素的父辈和祖先的方法
Sep 18 Javascript
js实现简单的手风琴效果
Feb 27 Javascript
Vue中定义全局变量与常量的各种方式详解
Aug 23 Javascript
使用puppeteer破解极验的滑动验证码
Feb 24 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
Jul 16 Javascript
openlayers实现地图测距测面
Sep 25 Javascript
对vue事件的延迟执行实例讲解
Aug 28 #Javascript
快速解决vue在ios端下点击响应延时的问题
Aug 27 #Javascript
微信小程序按钮去除边框线分享页面功能
Aug 27 #Javascript
Vue2 监听属性改变watch的实例代码
Aug 27 #Javascript
Vue 实现展开折叠效果的示例代码
Aug 27 #Javascript
vue.js响应式原理解析与实现
Jun 22 #Javascript
JavaScript Canvas实现验证码
Aug 02 #Javascript
You might like
php中让上传的文件大小在上传前就受限制的两种解决方法
2013/06/24 PHP
php防止站外远程提交表单的方法
2014/10/20 PHP
php插入含有特殊符号数据的处理方法
2016/11/24 PHP
在textarea文本域中显示HTML代码的方法
2007/03/06 Javascript
prototype Element学习笔记(篇一)
2008/10/26 Javascript
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
jQuery 遍历json数组的实现代码
2020/09/22 Javascript
jQuery asp.net 用json格式返回自定义对象
2010/04/07 Javascript
关于火狐(firefox)及ie下event获取的两种方法
2012/12/27 Javascript
js采用map取到id集合组并且实现点击一行选中一行
2013/12/16 Javascript
Backbone.js中的集合详解
2015/01/14 Javascript
原生js的数组除重复简单实例
2016/05/24 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
2016/08/19 Javascript
jQuery监听文件上传实现进度条效果的方法
2016/10/16 Javascript
尝试自己动手用react来写一个分页组件(小结)
2018/02/09 Javascript
vue.js2.0点击获取自己的属性和jquery方法
2018/02/23 jQuery
JS中‘hello’与new String(‘hello’)引出的问题详解
2018/08/14 Javascript
layui table 参数设置方法
2018/08/14 Javascript
Vue自定义toast组件的实例代码
2018/08/15 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
2018/09/14 Javascript
微信小程序实现选择地址省市区三级联动
2020/06/21 Javascript
Vue 构造选项 - 进阶使用说明
2020/08/14 Javascript
[33:28]完美世界DOTA2联赛PWL S3 PXG vs GXR 第三场 12.19
2020/12/24 DOTA
Python将xml和xsl转换为html的方法
2015/03/10 Python
Python简单计算数组元素平均值的方法示例
2017/12/26 Python
Python3.4实现远程控制电脑开关机
2018/02/22 Python
Python基于os.environ从windows获取环境变量
2020/06/09 Python
聊聊python中的循环遍历
2020/09/07 Python
4款Python 类型检查工具,你选择哪个呢?
2020/10/30 Python
Jupyter notebook命令和编辑模式常用快捷键汇总
2020/11/17 Python
日本一家专门经营各种箱包的大型网站:Traveler Store
2016/08/03 全球购物
英国领先的游戏零售商:GAME
2019/09/24 全球购物
高中美术教学反思
2014/01/19 职场文书
应用心理学专业求职信
2014/08/04 职场文书
民事撤诉申请书范本
2015/05/18 职场文书
试用期转正工作总结2015
2015/05/28 职场文书