深入理解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实现仿百度瀑布流的方法
Feb 05 Javascript
Winform客户端向web地址传参接收参数的方法
May 17 Javascript
jQuery实现的模拟弹出窗口功能示例
Nov 24 Javascript
利用VUE框架,实现列表分页功能示例代码
Jan 12 Javascript
js实现贪吃蛇小游戏(容易理解)
Jan 22 Javascript
xmlplus组件设计系列之按钮(2)
Apr 26 Javascript
vue实现nav导航栏的方法
Dec 13 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
Nov 04 Javascript
JavaScript实现英语单词题库
Dec 24 Javascript
js生成1到100的随机数最简单的实现方法
Feb 07 Javascript
jQuery实现简易QQ聊天框
Feb 10 jQuery
webpack5 联邦模块介绍详解
Jul 08 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+SQL 注入攻击的技术实现以及预防办法
2011/01/27 PHP
一个PHP分页类的代码
2011/05/18 PHP
PHP IF ELSE简化/三元一次式的使用
2011/08/22 PHP
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
wordpress网站转移到本地运行测试的方法
2017/03/15 PHP
PHP应用跨时区功能的实现方法
2019/03/21 PHP
JavaScript 组件之旅(二)编码实现和算法
2009/10/28 Javascript
浏览器的JavaScript引擎的识别方法
2013/10/20 Javascript
使用ajax+jqtransform实现动态加载select
2014/12/01 Javascript
JavaScript来实现打开链接页面的简单实例
2016/06/02 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
2016/08/03 Javascript
JavaScript每天必学之数组和对象部分
2016/09/17 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
2016/11/07 Javascript
浅谈js函数的多种定义方法与区别
2016/11/29 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/06 Javascript
vue实现多条件和模糊搜索功能
2019/05/28 Javascript
微信小程序实现页面分享onShareAppMessage
2019/08/12 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
2019/09/10 Javascript
Vue+abp微信扫码登录的实现代码示例
2020/01/06 Javascript
javascript中导出与导入实现模块化管理教程
2020/12/03 Javascript
vue 通过base64实现图片下载功能
2020/12/19 Vue.js
Vite和Vue CLI的优劣
2021/01/30 Vue.js
[58:25]VP vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
常用python编程模板汇总
2016/02/12 Python
浅谈Python traceback的优雅处理
2018/08/31 Python
python简单区块链模拟详解
2019/07/03 Python
Python学习笔记之Break和Continue用法分析
2019/08/14 Python
Python调用graphviz绘制结构化图形网络示例
2019/11/22 Python
PyCharm无法识别PyQt5的2种解决方法,ModuleNotFoundError: No module named 'pyqt5'
2020/02/17 Python
Python异常处理机制结构实例解析
2020/07/23 Python
Python之多进程与多线程的使用
2021/02/23 Python
优秀老师事迹材料
2014/02/05 职场文书
2015年信访维稳工作总结
2015/04/07 职场文书
初中物理教学反思
2016/02/19 职场文书
创业计划书之家教中心
2019/09/25 职场文书
Nginx + consul + upsync 完成动态负载均衡的方法详解
2021/03/31 Servers