深入理解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弹簧振子超简洁版 完全符合能量守恒,胡克定理
Oct 25 Javascript
jquery实现手机发送验证码的倒计时代码
Feb 12 Javascript
浅析JavaScript基本类型与引用类型
May 28 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
Jun 05 Javascript
javascript实现五星评分功能
Nov 10 Javascript
基于javascript实现样式清新图片轮播特效
Mar 30 Javascript
jQuery遍历json的方法(推荐)
Jun 12 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
Jan 13 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
Oct 26 Javascript
浅析JS中回调函数及用法
Jul 25 Javascript
基于Vue 实现一个中规中矩loading组件
Apr 03 Javascript
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
对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
用libTemplate实现静态网页的生成
2006/10/09 PHP
PHP读取XML值的代码(推荐)
2011/01/01 PHP
基于initPHP的框架介绍
2013/04/18 PHP
PHP使用file_get_content设置头信息的方法
2016/02/14 PHP
PHP实现的解汉诺塔问题算法示例
2018/08/06 PHP
Laravel 前端资源配置教程
2019/10/18 PHP
PHP http请求超时问题解决方案
2020/11/13 PHP
如何实现动态删除javascript函数
2007/05/27 Javascript
JavaScript 脚本将当地时间转换成其它时区
2009/03/19 Javascript
JS 非图片动态loading效果实现代码
2010/04/09 Javascript
js捕获鼠标滚轮事件代码
2013/12/16 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
2014/04/12 Javascript
JavaScript设计模式之建造者模式介绍
2014/12/28 Javascript
浅谈javascript构造函数与实例化对象
2015/06/22 Javascript
JS实现的颜色实时渐变效果完整实例
2016/03/25 Javascript
基于AngularJS实现iOS8自带的计算器
2016/09/12 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
2016/12/31 Javascript
谈谈Vue.js——vue-resource全攻略
2017/01/16 Javascript
js实现百度搜索提示框
2017/02/05 Javascript
vue.js获得当前元素的文字信息方法
2018/03/09 Javascript
详解微信小程序-canvas绘制文字实现自动换行
2019/04/26 Javascript
VsCode与Node.js知识点详解
2019/09/05 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
2020/07/26 Javascript
Python简单实现控制电脑的方法
2018/01/22 Python
解决vscode python print 输出窗口中文乱码的问题
2018/12/03 Python
Python实现对字典分别按键(key)和值(value)进行排序的方法分析
2018/12/19 Python
Python 用__new__方法实现单例的操作
2020/12/11 Python
python opencv实现直线检测并测出倾斜角度(附源码+注释)
2020/12/31 Python
10分钟理解CSS3 Grid布局
2018/12/20 HTML / CSS
EJB需直接实现它的业务接口或Home接口吗,请简述理由
2016/11/23 面试题
村长贪污检举信
2014/04/04 职场文书
办理信用卡工作证明
2014/09/30 职场文书
2014年后勤工作总结范文
2014/12/16 职场文书
公司财务部岗位职责
2015/04/14 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
2016年大学生就业指导课心得体会
2015/10/09 职场文书