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获取input表单值的代码
Apr 19 Javascript
鼠标滚轮控制网页横向移动实现思路
Mar 22 Javascript
复制js对象方法(详解)
Jul 08 Javascript
jQuery知识点整理
Jan 30 Javascript
JS小数运算出现多为小数问题的解决方法
Jun 02 Javascript
浅谈js中的引用和复制(传值和传址)
Sep 18 Javascript
bootstrap table复杂操作代码
Nov 01 Javascript
微信小程序 数组中的push与concat的区别
Jan 05 Javascript
Bootstrap Table使用整理(四)之工具栏
Jun 09 Javascript
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
Js利用Canvas实现图片压缩功能
Sep 13 Javascript
layUI的验证码功能及校验实例
Oct 25 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
Yii框架引用插件和ckeditor中body与P标签去除的方法
2017/01/19 PHP
PHP实现的防止跨站和xss攻击代码【来自阿里云】
2018/01/29 PHP
PHP生成(支持多模板)二维码海报代码
2018/04/30 PHP
鼠标滑在标题上显示图片的JS代码
2013/11/19 Javascript
基于JS实现数字+字母+中文的混合排序方法
2016/06/06 Javascript
nodejs爬虫遇到的乱码问题汇总
2017/04/07 NodeJs
vue源码学习之Object.defineProperty对象属性监听
2018/05/30 Javascript
JS基于开关思想实现的数组去重功能【案例】
2019/02/18 Javascript
Vue组件系列开发之模态框
2019/04/18 Javascript
Node.js实现一个HTTP服务器的方法示例
2019/05/13 Javascript
[40:19]2018完美盛典CS.GO表演赛
2018/12/17 DOTA
SQLite3中文编码 Python的实现
2017/01/11 Python
python 中random模块的常用方法总结
2017/07/08 Python
python绘制铅球的运行轨迹代码分享
2017/11/14 Python
Python使用requests发送POST请求实例代码
2018/01/25 Python
使用DataFrame删除行和列的实例讲解
2018/04/08 Python
python中redis查看剩余过期时间及用正则通配符批量删除key的方法
2018/07/30 Python
Python中时间datetime的处理与转换用法总结
2019/02/18 Python
Django的models中on_delete参数详解
2019/07/16 Python
python3中eval函数用法使用简介
2019/08/02 Python
Python学习笔记之列表推导式实例分析
2019/08/13 Python
关于keras.layers.Conv1D的kernel_size参数使用介绍
2020/05/22 Python
python和php哪个容易学
2020/06/19 Python
Python tkinter之ComboBox(下拉框)的使用简介
2021/02/05 Python
matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())
2021/02/22 Python
在html5的Canvas上绘制椭圆的几种方法总结
2013/01/07 HTML / CSS
李维斯德国官方网上商店:Levi’s德国
2016/09/10 全球购物
小天鹅官方商城:LittleSwan
2017/06/16 全球购物
草莓网中国:StrawberryNet中国
2020/08/17 全球购物
会计专业推荐信
2013/10/29 职场文书
优秀老员工获奖感言
2014/02/15 职场文书
2014年公司庆元旦活动方案
2014/03/05 职场文书
测绘工程专业求职信
2014/07/15 职场文书
房地产置业顾问岗位职责
2015/04/11 职场文书
红色经典电影观后感
2015/06/18 职场文书
介绍信应该怎么开?
2019/04/03 职场文书