深入理解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 Split方法,indexOf方法、lastIndexOf 方法和substring 方法
Mar 21 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
May 21 Javascript
js获取当前路径的简单示例代码
Jan 08 Javascript
js关于精确计算和数值格式化以及直接引js文件
Jan 28 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
Sep 08 Javascript
js判断当前页面在移动设备还是在PC端中打开
Jan 06 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 Javascript
js阻止移动端页面滚动的两种方法
Jan 25 Javascript
Vue按需加载的具体实现
Dec 02 Javascript
qrcode生成二维码微信长按无法识别问题的解决
Apr 04 Javascript
antd配置config-overrides.js文件的操作
Oct 31 Javascript
vue-router路由懒加载及实现的3种方式
Feb 28 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
数字转英文
2006/12/06 PHP
IP138 IP地址查询小偷实现代码
2010/02/15 PHP
thinkphp模板赋值与替换实例简述
2014/11/24 PHP
PHP通过微信跳转的Code参数获取用户的openid(关键代码)
2016/07/06 PHP
cakephp2.X多表联合查询join及使用分页查询的方法
2017/02/23 PHP
PHP实现的简单sha1加密功能示例
2017/08/27 PHP
nodejs 实现模拟form表单上传文件
2014/07/14 NodeJs
JavaScript中的值类型详细介绍
2014/12/29 Javascript
JavaScript中用toString()方法返回时间为字符串
2015/06/12 Javascript
详解JavaScript的表达式与运算符
2015/11/30 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
2016/08/03 Javascript
jquery.form.js异步提交表单详解
2017/04/25 jQuery
详解js跨域请求的两种方式,支持post请求
2018/05/05 Javascript
vue项目首屏加载时间优化实战
2019/04/23 Javascript
使用vue-router在Vue页面之间传递数据的方法
2019/07/15 Javascript
浅析js实现网页截图的两种方式
2019/11/01 Javascript
[04:11]DOTA2上海特级锦标赛主赛事首日TOP10
2016/03/03 DOTA
[04:44]DOTA2 2017全国高校联赛视频回顾
2017/08/21 DOTA
[41:52]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第二场 2月22日
2021/03/11 DOTA
在Python的Django框架中用流响应生成CSV文件的教程
2015/05/02 Python
pytorch构建网络模型的4种方法
2018/04/13 Python
对Python生成汉字字库文字,以及转换为文字图片的实例详解
2019/01/29 Python
PyQt 实现使窗口中的元素跟随窗口大小的变化而变化
2019/06/18 Python
使用python批量修改XML文件中图像的depth值
2020/07/22 Python
用Python 执行cmd命令
2020/12/18 Python
Clarks英国官方网站:全球领军鞋履品牌
2016/11/26 全球购物
美国顶级防滑鞋:Shoes For Crews
2017/03/27 全球购物
设计师珠宝:Ylang 23
2018/05/11 全球购物
技校个人求职信范文
2014/01/25 职场文书
银行职员自我鉴定
2014/04/20 职场文书
2015个人简历自我评价语
2015/03/11 职场文书
警示教育片观后感
2015/06/17 职场文书
如何利用python和DOS获取wifi密码
2021/03/31 Python
JavaScript实现显示和隐藏图片
2021/04/29 Javascript
nginx常用配置conf的示例代码详解
2022/03/21 Servers
python和anaconda的区别
2022/05/06 Python