深入理解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判定是否原生方法
Jul 22 Javascript
容易造成JavaScript内存泄露几个方面
Sep 04 Javascript
JS上传图片前实现图片预览效果的方法
Mar 02 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
Feb 19 Javascript
微信小程序 action-sheet底部菜单详解
Oct 27 Javascript
jQuery 插件封装的方法
Nov 16 Javascript
ES6中的rest参数与扩展运算符详解
Jul 18 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
Jul 20 Javascript
vue+axios实现文件下载及vue中使用axios的实例
Sep 21 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
Jan 16 Javascript
JavaScript进制转换实现方法解析
Jan 18 Javascript
浅谈JavaScript作用域
Dec 06 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
MySql中正则表达式的使用方法描述
2008/07/30 PHP
[原创]PHPCMS遭遇会员投稿审核无效的解决方法
2017/01/11 PHP
js 禁用浏览器的后退功能的简单方法
2008/12/10 Javascript
javascript管中窥豹 形参与实参浅析
2011/12/17 Javascript
基于jQuery的倒计时实现代码
2012/05/30 Javascript
jQuery图片轮播的具体实现
2013/09/11 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
2013/09/30 Javascript
JS动态添加Table的TR,TD实现方法
2015/01/28 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
2016/02/17 Javascript
jQuery toggle 代替方法
2016/03/22 Javascript
Javascript 闭包详解及实例代码
2016/11/30 Javascript
nodejs redis 发布订阅机制封装实现方法及实例代码
2016/12/15 NodeJs
浅析BootStrap中Modal(模态框)使用心得
2016/12/24 Javascript
JS实现购物车特效
2017/02/02 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
JS实现浏览器打印、打印预览示例
2017/02/28 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
微信小程序调用摄像头隐藏式拍照功能
2018/08/22 Javascript
详解Python使用simplejson模块解析JSON的方法
2016/03/24 Python
Python单例模式实例详解
2017/03/01 Python
Python实现两个list对应元素相减操作示例
2017/06/09 Python
python实现数据库跨服务器迁移
2018/04/12 Python
python协程之动态添加任务的方法
2019/02/19 Python
python实现网页录音效果
2020/10/26 Python
python报错TypeError: ‘NoneType‘ object is not subscriptable的解决方法
2020/11/05 Python
波兰在线香水店:Perfumy.pl
2019/08/12 全球购物
大学毕业自我评价
2014/02/02 职场文书
保研推荐信
2014/05/09 职场文书
酒店节能减排方案
2014/05/26 职场文书
2014年安置帮教工作总结
2014/12/11 职场文书
辞职信怎么写
2015/02/27 职场文书
2016教师校本研修心得体会
2016/01/08 职场文书
2016年暑期社会实践活动总结报告
2016/04/06 职场文书
如何用PHP实现多线程编程
2021/05/26 PHP
Java elasticsearch安装以及部署教程
2021/06/28 Java/Android
如何利用golang运用mysql数据库
2022/03/13 Golang