深入理解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 面试题随笔
Mar 31 Javascript
JavaScript 中的日期和时间及表示标准介绍
Aug 21 Javascript
jquery 显示*天*时*分*秒实现时间计时器
May 07 Javascript
28个常用JavaScript方法集锦
Jan 14 Javascript
Javascript获取表单名称(name)的方法
Apr 02 Javascript
js数组去重的5种算法实现
Nov 04 Javascript
JavaScript识别网页关键字并进行描红的方法
Nov 09 Javascript
ES6学习教程之模板字符串详解
Oct 09 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
Mar 01 Javascript
微信小程序实现图片上传放大预览删除代码
Jun 28 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
Oct 29 Javascript
三种方式清除vue路由跳转router-link的历史记录
Apr 10 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
PHP二维数组的去重问题解析
2011/07/17 PHP
PHP面向对象程序设计之接口用法
2014/08/20 PHP
Yii中实现处理前后台登录的新方法
2015/12/28 PHP
PHP的Laravel框架中使用AdminLTE模板来编写网站后台界面
2016/03/21 PHP
PHP bin2hex()函数基础实例讲解
2019/02/11 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
基于laravel belongsTo使用详解
2019/10/18 PHP
javascript Array数组对象的扩展函数代码
2010/05/22 Javascript
jQuery常见开发技巧详细整理
2013/01/02 Javascript
文本框文本自动补全效果示例分享
2014/01/19 Javascript
JS控制一个DIV层在指定时间内消失的方法
2014/02/17 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
2014/04/02 Javascript
22点关于jquery性能优化的建议
2014/05/28 Javascript
基于jquery实现左右按钮点击的图片切换效果
2021/01/27 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
js中通过getElementsByName访问name集合对象的方法
2016/10/31 Javascript
Vue.js实现价格计算器功能
2020/03/30 Javascript
20个最常见的jQuery面试问题及答案
2018/05/23 jQuery
vue 实现强制类型转换 数字类型转为字符串
2019/11/07 Javascript
python学习手册中的python多态示例代码
2014/01/21 Python
python单线程实现多个定时器示例
2014/03/30 Python
python代码 输入数字使其反向输出的方法
2018/12/22 Python
scrapy-redis源码分析之发送POST请求详解
2019/05/15 Python
PyQt5 如何让界面和逻辑分离的方法
2020/03/24 Python
python中导入 train_test_split提示错误的解决
2020/06/19 Python
python闭包与引用以及需要注意的陷阱
2020/09/18 Python
CSS3 3D酷炫立方体变换动画的实现
2019/03/26 HTML / CSS
html5拖拽应用记录及注意点
2020/05/27 HTML / CSS
美国在线鞋类零售商:LifeStride
2019/06/09 全球购物
Kipling澳洲官网:购买凯浦林包包
2020/12/17 全球购物
创业计划书撰写原则
2014/01/25 职场文书
《与朱元思书》的教学反思
2014/04/17 职场文书
车辆委托书范本
2014/10/05 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
初中毕业感言300字
2015/07/31 职场文书
Windows Server 修改远程桌面端口的实现
2022/06/25 Servers