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 相关文章推荐
js 对象是否存在判断
Jul 15 Javascript
JavaScript实现拼音排序的方法
Nov 20 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
Aug 19 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
Jun 20 Javascript
Jquery中扩展方法extend使用技巧
Aug 24 Javascript
Node.js的Express框架使用上手指南
Mar 12 Javascript
Jquery遍历select option和添加移除option的实现方法
Aug 26 Javascript
详谈js中window.location.search的用法和作用
Feb 13 Javascript
简单谈谈axios中的get,post方法
Jun 25 Javascript
详解vue-cli 脚手架项目-package.json
Jul 04 Javascript
angular 未登录状态拦截路由跳转的方法
Oct 09 Javascript
antd Upload 文件上传的示例代码
Dec 14 Javascript
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
一个捕获函数输出的函数
2007/02/14 PHP
PHP分页显示制作详细讲解
2008/11/19 PHP
PHP实现查询两个数组中不同元素的方法
2016/02/23 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
laravel 解决groupBy时出现的错误 isn't in Group By问题
2019/10/17 PHP
用javascript实现自定义标签
2007/05/08 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
2011/08/20 Javascript
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
angular.element方法汇总
2015/01/07 Javascript
jQuery原型属性和原型方法详解
2015/07/07 Javascript
js图片轮播手动切换效果
2015/11/10 Javascript
JQuery 传送中文乱码问题的简单解决办法
2016/05/24 Javascript
js输出数据精确到小数点后n位代码
2016/07/02 Javascript
Node+OCR实现图像文字识别功能
2018/11/26 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
2020/01/11 jQuery
vue将data恢复到初始状态 && 重新渲染组件实例
2020/09/04 Javascript
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
Python BeautifulSoup中文乱码问题的2种解决方法
2014/04/22 Python
Python内置模块turtle绘图详解
2017/12/09 Python
python中pylint使用方法(pylint代码检查)
2018/04/06 Python
Python 类,property属性(简化属性的操作),@property,property()用法示例
2019/10/12 Python
Python各种扩展名区别点整理
2020/02/27 Python
Python %r和%s区别代码实例解析
2020/04/03 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
HTML5 拖放功能实现代码
2016/07/14 HTML / CSS
Carrs Silver官网:英国著名的银器品牌
2020/08/29 全球购物
毕业生自荐信的主要内容
2013/10/29 职场文书
办公室内勤岗位职责范本
2013/12/09 职场文书
学校万圣节活动方案
2014/02/13 职场文书
领导班子群众路线与四风问题对照检查材料思想汇报
2014/10/11 职场文书
2014最新预备党员思想汇报范文:中国梦,我的梦
2014/10/25 职场文书
2014年医院科室工作总结
2014/12/20 职场文书
2015年领导干部廉洁自律工作总结
2015/05/26 职场文书
Python基础之教你怎么在M1系统上使用pandas
2021/05/08 Python
Python爬虫之用Xpath获取关键标签实现自动评论盖楼抽奖(二)
2021/06/07 Python
Spring Boot实现文件上传下载
2022/08/14 Java/Android