深入理解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 相关文章推荐
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
Jan 29 Javascript
很好用的js日历算法详细代码
Mar 07 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
Apr 18 Javascript
利用JS进行图片的切换即特效展示图片
Dec 03 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
Mar 08 Javascript
jQuery获取当前点击的对象元素(实现代码)
May 19 Javascript
第一次接触神奇的Bootstrap表单
Jul 27 Javascript
jQuery中ajax错误调试分析
Dec 01 Javascript
bootstrap模态框垂直居中效果
Dec 03 Javascript
JavaScript获取URL参数的方法之一
Mar 24 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
Dec 13 Javascript
通过实例解析js简易模块加载器
Jun 17 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
火狐下table中创建form导致两个table之间出现空白
2013/09/02 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
2015/02/03 Javascript
基于React.js实现原生js拖拽效果引发的思考
2016/03/30 Javascript
Javascript字符串拼接小技巧(推荐)
2016/06/02 Javascript
使用jquery如何获取时间
2016/10/13 Javascript
JS定时器用法分析【时钟与菜单中的应用】
2016/12/21 Javascript
Vue组件开发初探
2017/02/14 Javascript
js中开关变量使用实例
2017/02/24 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
2018/09/13 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
2019/12/02 Javascript
JavaScript实现公告栏上下滚动效果
2020/03/13 Javascript
JavaScript实现世界各地时间显示
2020/09/07 Javascript
[43:47]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第一局
2016/03/05 DOTA
详解Python验证码识别
2016/01/25 Python
python实现简单点对点(p2p)聊天
2017/09/13 Python
Python实现霍夫圆和椭圆变换代码详解
2018/01/12 Python
python爬虫框架scrapy实现模拟登录操作示例
2018/08/02 Python
Python从使用线程到使用async/await的深入讲解
2018/09/16 Python
python实现反转部分单向链表
2018/09/27 Python
Python绘制频率分布直方图的示例
2019/07/08 Python
pytorch索引查找 index_select的例子
2019/08/18 Python
Python实现打印实心和空心菱形
2019/11/23 Python
python datetime处理时间小结
2020/04/16 Python
python同时遍历两个list用法说明
2020/05/02 Python
Python常用base64 md5 aes des crc32加密解密方法汇总
2020/11/06 Python
Blue Nile台湾:钻石珠宝商,订婚首饰、结婚戒指和精品首饰
2017/11/24 全球购物
英国在线自行车店:Merlin Cycles
2018/08/20 全球购物
车间班长岗位职责
2013/11/30 职场文书
领导检查欢迎词
2014/01/14 职场文书
党的作风建设心得体会
2014/10/22 职场文书
暂住证证明
2015/06/19 职场文书
2019年励志签名:致拼搏路上的自己
2019/10/11 职场文书
基于PostgreSQL/openGauss 的分布式数据库解决方案
2021/12/06 PostgreSQL
Nginx防盗链与服务优化配置的全过程
2022/01/18 Servers
SpringBoot2零基础到精通之异常处理与web原生组件注入
2022/03/22 Java/Android