深入理解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 相关文章推荐
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
Feb 03 Javascript
基于jquery实现等比缩放图片
Dec 03 Javascript
javascript实时显示北京时间的方法
Mar 12 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
Aug 04 Javascript
数组Array的一些方法(总结)
Feb 17 Javascript
Vue如何引入远程JS文件
Apr 20 Javascript
JS改变页面颜色源码分享
Feb 24 Javascript
node.js读取Excel数据(下载图片)的方法示例
Aug 02 Javascript
es6 symbol的实现方法示例
Apr 02 Javascript
JQuery表单元素取值赋值方法总结
May 12 jQuery
vue-amap根据地址回显地图并mark的操作
Nov 03 Javascript
如何实现vue的tree组件
Dec 03 Vue.js
对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 广告调用类代码(支持Flash调用)
2011/08/11 PHP
php中simplexml_load_string使用实例分享
2014/02/13 PHP
PHP制作图形验证码代码分享
2014/10/23 PHP
php查询操作实现投票功能
2016/05/09 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
Nginx下ThinkPHP5的配置方法详解
2017/08/01 PHP
tp5框架无刷新分页实现方法分析
2019/09/26 PHP
tp5修改(实现即点即改)
2019/10/18 PHP
用javascript实现给图片加链接
2007/08/15 Javascript
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
2010/06/21 Javascript
浅谈Javascript嵌套函数及闭包
2010/11/09 Javascript
js中键盘事件实例简析
2015/01/10 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
2015/02/13 Javascript
JavaScript实现瀑布流以及加载效果
2017/02/11 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
基于vue.js的分页插件详解
2017/11/27 Javascript
react-native封装插件swiper的使用方法
2018/03/20 Javascript
JS对日期操作封装代码实例
2019/11/08 Javascript
electron+vue实现div contenteditable截图功能
2020/01/07 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS VG
2014/05/25 DOTA
Python中用Ctrl+C终止多线程程序的问题解决
2013/03/30 Python
Python二叉搜索树与双向链表转换实现方法
2016/04/29 Python
详解Python中的分组函数groupby和itertools)
2018/07/11 Python
利用Python复制文件的9种方法总结
2019/09/02 Python
python图形用户接口实例详解
2019/12/16 Python
解决Tensorboard 不显示计算图graph的问题
2020/02/15 Python
HTML5之web workers_动力节点Java学院整理
2017/07/17 HTML / CSS
澳大利亚领先的在线机械五金、园艺和存储专家:Edisons
2018/03/24 全球购物
写一个函数返回1+2+3+…+n的值(假定结果不会超过长整型变量的范围)
2014/09/05 面试题
酒店中秋节活动方案
2014/01/31 职场文书
执行总经理岗位职责
2014/02/03 职场文书
乡镇交通安全实施方案
2014/03/29 职场文书
新闻学专业求职信
2014/07/28 职场文书
写给汽车4S店的创业计划书,拿来即用!
2019/08/09 职场文书
Python基础之数据结构详解
2021/04/28 Python
Pytorch GPU内存占用很高,但是利用率很低如何解决
2021/06/01 Python