深入理解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 相关文章推荐
jQuery焦点图切换特效代码分享
Sep 15 Javascript
jQuery使用$.ajax提交表单完整实例
Dec 11 Javascript
快速掌握Node.js环境的安装与运行方法
Feb 16 Javascript
Vue 单文件中的数据传递示例
Mar 21 Javascript
Vue keep-alive实践总结(推荐)
Aug 31 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
May 03 Javascript
JavaScript面向对象继承原理与实现方法分析
Aug 09 Javascript
Vue作用域插槽slot-scope实例代码
Sep 05 Javascript
Vue.js 父子组件通信的十种方式
Oct 30 Javascript
vue之debounce属性被移除及处理详解
Nov 13 Javascript
js实现鼠标拖拽div左右滑动
Jan 15 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
Jul 22 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+Ajax实现唯一校验实现代码[简单应用]
2011/11/29 PHP
php根据日期显示所在星座的方法
2015/07/13 PHP
php实现mysql数据库连接操作及用户管理
2015/11/08 PHP
Zend Framework动作助手Redirector用法实例详解
2016/03/05 PHP
浅谈PHP中关于foreach使用引用变量的坑
2016/11/14 PHP
php 文件下载 出现下载文件内容乱码损坏的解决方法(推荐)
2016/11/16 PHP
JQuery 操作select标签实现代码
2010/05/14 Javascript
jQuery源码分析-04 选择器-Sizzle-工作原理分析
2011/11/14 Javascript
基于jQuery的弹出框插件
2012/03/18 Javascript
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
Angular2监听页面大小变化的解决方法
2017/10/09 Javascript
关于JavaScript语句后面的分号问题
2017/12/07 Javascript
JS简单判断是否在微信浏览器打开的方法示例
2019/01/08 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
Python发送Email方法实例
2014/08/21 Python
python3利用smtplib通过qq邮箱发送邮件方法示例
2017/12/03 Python
Python3.x爬虫下载网页图片的实例讲解
2018/05/22 Python
Win10下python 2.7.13 安装配置方法图文教程
2018/09/18 Python
对python实现二维函数高次拟合的示例详解
2018/12/29 Python
Python Selenium 之关闭窗口close与quit的方法
2019/02/13 Python
Python PyQt5整理介绍
2020/04/01 Python
Django中Aggregation聚合的基本使用方法
2020/07/09 Python
HTML5 自动聚焦(autofocus)属性使用介绍
2013/08/07 HTML / CSS
加拿大领先的牛仔零售商:Bluenotes
2018/01/22 全球购物
一套软件测试笔试题
2014/07/25 面试题
某公司面试题
2012/03/05 面试题
会计实习期自我鉴定
2013/10/06 职场文书
2014年银行个人工作总结
2014/12/05 职场文书
被委托人身份证明
2015/08/07 职场文书
实验心得体会范文
2016/01/25 职场文书
初中美术教学反思
2016/02/17 职场文书
js实现上传图片到服务器
2021/04/11 Javascript
tp5使用layui实现多个图片上传(带附件选择)的方法实例
2021/11/17 PHP
 Python 中 logging 模块使用详情
2022/03/03 Python
什么是clearfix (一文搞清楚css清除浮动clearfix)
2023/05/21 HTML / CSS