深入理解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 相关文章推荐
Extjs中DisplayField的日期或者数字格式化扩展
Sep 03 Javascript
Javascript实现返回上一页面并刷新的小例子
Dec 11 Javascript
document节点对象的获取方式示例介绍
Dec 24 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
Feb 13 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
Oct 10 Javascript
JavaScript中的acos()方法使用详解
Jun 14 Javascript
JavaScript中日期的相关操作方法总结
Oct 24 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
Jul 14 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
Dec 16 Javascript
浅谈使用React.setState需要注意的三点
Dec 18 Javascript
JavaScript简单实现的仿微博留言功能示例
Jan 17 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
Mar 07 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
phpMyAdmin下载、安装和使用入门教程
2007/05/31 PHP
Zend Studio 实用快捷键一览表(精心整理)
2013/08/10 PHP
PHP中执行MYSQL事务解决数据写入不完整等情况
2014/01/07 PHP
php中hashtable实现示例分享
2014/02/13 PHP
php自定义函数实现二维数组排序功能
2016/07/20 PHP
封装的jquery翻页滚动(示例代码)
2013/11/18 Javascript
初识Node.js
2014/09/03 Javascript
javascript实现俄罗斯方块游戏的思路和方法
2015/04/27 Javascript
jquery实现多屏多图焦点图切换特效的方法
2015/05/04 Javascript
JavaScript模拟实现键盘打字效果
2015/06/29 Javascript
原生js和jquery分别实现横向导航菜单效果
2016/05/13 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
2016/05/28 Javascript
基于node.js实现微信支付退款功能
2017/12/19 Javascript
详解webpack4之splitchunksPlugin代码包分拆
2018/12/04 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
2019/05/16 Javascript
JS对日期操作封装代码实例
2019/11/08 Javascript
解决Layui数据表格显示无数据提示的问题
2019/11/14 Javascript
Vuex的API文档说明详解
2020/02/05 Javascript
[03:49]DOTA2 2015国际邀请赛中国区预选赛第二日现场百态
2015/05/27 DOTA
django上传图片并生成缩略图方法示例
2017/12/11 Python
Python实现批量读取图片并存入mongodb数据库的方法示例
2018/04/02 Python
Numpy数据类型转换astype,dtype的方法
2018/06/09 Python
python 为什么说eval要慎用
2019/03/26 Python
python-tkinter之按钮的使用,开关方法
2019/06/11 Python
Kears+Opencv实现简单人脸识别
2019/08/28 Python
Python3使用腾讯云文字识别(腾讯OCR)提取图片中的文字内容实例详解
2020/02/18 Python
python PIL模块的基本使用
2020/09/29 Python
Html5实现用户注册自动校验功能实例代码
2016/05/24 HTML / CSS
canvas 阴影和图形变换的示例代码
2018/01/02 HTML / CSS
伯利陶器:Burleigh Pottery
2018/01/03 全球购物
店面销售职位的职责
2014/03/09 职场文书
3.12植树节活动总结2014
2014/03/13 职场文书
投资公司董事长岗位职责
2015/04/16 职场文书
老人院义工活动感想
2015/08/07 职场文书
致创业的您:这类人不适合餐饮创业
2019/08/19 职场文书
CSS使用Flex和Grid布局实现3D骰子
2022/08/05 HTML / CSS