深入理解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中动态添加事件(绑定事件)的代码
Jan 09 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
Mar 24 Javascript
JavaScript动态检验密码强度的实现方法
Nov 09 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
Nov 24 Javascript
Angularjs 与 bower安装和使用详解
May 11 Javascript
jQuery正则验证注册页面经典实例
Jun 10 jQuery
收藏AngularJS中最重要的核心功能
Jul 09 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
Jan 02 Javascript
浅谈js获取ModelAndView值的问题
Mar 28 Javascript
详解vue-cli3多页应用改造
Jun 04 Javascript
利用JS代码自动删除稿件的普通弹幕功能
Sep 20 Javascript
js 闭包深入理解与实例分析
Mar 19 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一些公用函数的集合
2008/03/27 PHP
Yii框架在页面输出执行sql语句以方便调试的实现方法
2014/12/24 PHP
Windows下编译PHP5.4和xdebug全记录
2015/04/03 PHP
php中static和const关键字用法分析
2016/12/07 PHP
php输出图像的方法实例分析
2017/02/16 PHP
js 单引号 传递方法
2009/06/22 Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
2010/06/25 Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
2013/09/10 Javascript
JS实现动态增加和删除li标签行的实例代码
2016/10/16 Javascript
js正则表达式验证表单【完整版】
2017/03/06 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
2018/03/02 Javascript
AngularJS监听ng-repeat渲染完成的方法
2018/03/20 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
2018/08/20 Javascript
jquery实现的放大镜效果示例
2020/02/24 jQuery
[49:59]KG vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python中合并两个文本文件并按照姓名首字母排序的例子
2014/04/25 Python
Python使用tablib生成excel文件的简单实现方法
2016/03/16 Python
Python数据结构与算法之使用队列解决小猫钓鱼问题
2017/12/14 Python
python编写Logistic逻辑回归
2020/12/30 Python
分析Python读取文件时的路径问题
2018/02/11 Python
11个Python3字典内置方法大全与示例汇总
2019/05/13 Python
python识别图像并提取文字的实现方法
2019/06/28 Python
python标记语句块使用方法总结
2019/08/05 Python
将pytorch转成longtensor的简单方法
2020/02/18 Python
Python字符串split及rsplit方法原理详解
2020/06/29 Python
留学自荐信的技巧
2013/10/17 职场文书
会议邀请函范文
2014/01/09 职场文书
信息专业大学生自我评价分享
2014/01/17 职场文书
小区门卫值班制度
2014/01/24 职场文书
意向书范文
2014/03/31 职场文书
园艺师求职信
2014/04/27 职场文书
全国税务系统先进集体事迹材料
2014/05/19 职场文书
反对四风自我剖析材料
2014/10/07 职场文书
2014年稽查工作总结
2014/12/20 职场文书
2015年母亲节寄语
2015/03/23 职场文书
【DOTA2】总决赛血虐~ XTREME GAMING vs MAGMA - OGA DOTA PIT 2022 CN
2022/04/02 DOTA