es6函数中的作用域实例分析


Posted in Javascript onApril 18, 2020

本文实例讲述了es6函数中的作用域。分享给大家供大家参考,具体如下:

一旦设置了参数的默认值,函数进行声明初始化时,参数会形成一个单独的作用域(context)。等到初始化结束,这个作用域就会消失。这种语法行为,在不设置参数默认值,是不会出现的。

var x = 1;

function f(x, y = x) {
 console.log(y);
}

f(2) // 2

上面的代码中,参数y的默认值等于变量x。调用函数f时,参数形成一个单独的作用域。在这个作用域里面,默认值变量x指向第一个参数x,而不是全局变量x,所以输出是2。

再看下面的例子。

let x = 1;

function f(y = x) {
 let x = 2; 
 console.log(y)
}

上面代码中,函数f调用时,参数y = x形成一个单独的作用域,这个作用域里面,变量x本身没有定义,所以指向外层的全局变量x。函数调用时,函数体内部的局部变量x影响不到默认值变量x。

如果此时,全局变量x不存在,就会报错。

function f(y = x) {
 let x = 2;
 console.log(y)
}

f() // ReferenceError: x is not defined

下面这样写,也会报错。

var x = 1;

function foo(x = x) {
 // ...
}

foo() // ReferenceError: x is not defined

上面代码中,参数x = x形成一个单独作用域,实际执行的是 let x = x,由于暂时性死区的原因,这行代码会报错"x未定义"。

如果参数的默认值是一个函数,该函数的作用域也遵守这个规则。请看下面的例子。

let foo = 'outer'

function bar(func = () => foo) {
 let foo = 'inner';
 console.log(func())
}

bar() // outer

上面代码中,函数bar的参数func的默认值是一个匿名函数,返回值是变量foo。函数参数形成的单独的作用域里面,并没有定义变量foo,所以foo指向外层的全局变量foo,因此输出outer。

如果写成下面这样,就会报错。

function bar (func = () => foo) {
 let foo = 'inner'
 console.log(func())
}

bar() // ReferenceError: foo is not defined

上面代码中,匿名函数里面的foo指向函数外层,但是函数外层并没有声明变量foo,所以报错了。

下面是一个更复杂的例子。

var x = 1;
function foo(x, y = function() {x = 2;}) {
 var x = 3;
 y()
 console.log(x)
}

foo() // 3
x // 1

上面代码中,函数foo的参数形成一个单独作用域。这个作用域里面,首先声明了变量x,然后声明了变量y,y的默认值是一个匿名函数。这个匿名函数内部的变量x, 指向同一个作用域的第一个参数x。函数foo内部又声明了一个内部变量。该变量与第一个参数x由于不是同一个作用域,所以不是同一个变量,因此执行y后,内部变量x和外部全局变量x的值都没变。

如果将var x = 3的var 去除,函数foo的内部变量x就指向第一个参数,与匿名函数内部的x是一致的,所以最后输出的就是2,而外层的全局变量x依然不受影响。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jQuery获取地址栏参数插件(模仿C#)
Oct 26 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
Aug 22 Javascript
JavaScript实现简单获取当前网页网址的方法
Nov 09 Javascript
JS操作JSON方法总结(推荐)
Jun 14 Javascript
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
JavaScript面向对象继承原理与实现方法分析
Aug 09 Javascript
tsconfig.json配置详解
May 17 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
Jul 19 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
Aug 15 Javascript
js实现打字小游戏
Dec 17 Javascript
openlayers4.6.5实现距离量测和面积量测
Sep 25 Javascript
vue中三级导航的菜单权限控制
Mar 31 Vue.js
es6函数之rest参数用法实例分析
Apr 18 #Javascript
vue实现短信验证码输入框
Apr 17 #Javascript
JS监听组合按键思路及实现过程
Apr 17 #Javascript
javascript canvas检测小球碰撞
Apr 17 #Javascript
Vue实现浏览器打印功能的代码
Apr 17 #Javascript
基于JavaScript获取url参数2种方法
Apr 17 #Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
Apr 17 #Javascript
You might like
收藏的一个php小偷的核心程序
2007/04/09 PHP
PHP中ini_set和ini_get函数的用法小结
2014/02/18 PHP
thinkphp学习笔记之多表查询
2014/07/28 PHP
laravel中的错误与日志用法详解
2016/07/26 PHP
破解Session cookie的方法
2006/07/28 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
2013/07/31 Javascript
如何让DIV可编辑、可拖动示例代码
2013/09/18 Javascript
jQuery模拟黑客帝国矩阵效果实例
2015/06/28 Javascript
EasyUI布局 高度自适应
2016/06/04 Javascript
全面解析Bootstrap表单样式的使用
2016/09/09 Javascript
javascript动画系列之模拟滚动条
2016/12/13 Javascript
react native带索引的城市列表组件的实例代码
2017/08/08 Javascript
Vue $emit $refs子父组件间方法的调用实例
2018/09/12 Javascript
JavaScript指定断点操作实例教程
2018/09/18 Javascript
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
2019/11/07 jQuery
vue-router之解决addRoutes使用遇到的坑
2020/07/19 Javascript
JavaScript实现雪花飘落效果
2020/12/27 Javascript
[54:29]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第二场
2018/04/09 DOTA
浅谈django开发者模式中的autoreload是如何实现的
2017/08/18 Python
Python利用递归实现文件的复制方法
2018/10/27 Python
Python3爬虫教程之利用Python实现发送天气预报邮件
2018/12/16 Python
Python3 Post登录并且保存cookie登录其他页面的方法
2018/12/28 Python
python使用 zip 同时迭代多个序列示例
2019/07/06 Python
Python3.6+selenium2.53.6自动化测试_读取excel文件的方法
2019/09/06 Python
python中scrapy处理项目数据的实例分析
2020/11/22 Python
约瑟夫·特纳男装:Joseph Turner
2017/10/10 全球购物
美国高级工作服品牌:Carhartt
2018/01/25 全球购物
美国宠物用品网站:Value Pet Supplies
2018/03/17 全球购物
新东方旗下远程教育网站:新东方在线
2020/03/19 全球购物
新颖的化妆品活动方案
2014/08/21 职场文书
2014年党员干部四风问题自我剖析材料
2014/09/29 职场文书
给下属加薪申请报告
2015/05/15 职场文书
离婚案件被告代理词
2015/05/23 职场文书
男人帮观后感
2015/06/18 职场文书
世界上超棒的8种逻辑思维
2019/08/06 职场文书