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 相关文章推荐
不一样的文字闪烁 轮番闪烁
Nov 11 Javascript
Jquery submit()无法提交问题
Apr 21 Javascript
window.opener用法和用途实例介绍
Aug 19 Javascript
图片Slider 带左右按钮的js示例
Aug 30 Javascript
JavaScript中的pow()方法使用详解
Jun 15 Javascript
jquery特效 点击展示与隐藏全文
Dec 09 Javascript
Node.js实现JS文件合并小工具
Feb 02 Javascript
浅析jQuery Ajax通用js封装
Jun 22 Javascript
vue debug 二种方法
Sep 16 Javascript
详解JavaScript中的坐标和距离
May 27 Javascript
基于jQuery实现可编辑的表格
Dec 11 jQuery
Element Cascader 级联选择器的使用示例
Jul 27 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
终于听上了直流胆调频
2021/03/02 无线电
php从右向左/从左向右截取字符串的实现方法
2011/11/28 PHP
在项目中寻找代码的坏命名
2012/07/14 PHP
php实现小程序支付完整版
2018/10/09 PHP
PHP调用QQ互联接口实现QQ登录网站功能示例
2019/10/24 PHP
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
2012/10/12 Javascript
整理Javascript流程控制语句学习笔记
2015/11/29 Javascript
JS结合bootstrap实现基本的增删改查功能
2016/07/22 Javascript
jquery文字填写自动高度的实现方法
2016/11/07 Javascript
React学习笔记之高阶组件应用
2018/06/02 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
2018/08/25 Javascript
JS 事件机制完整示例分析
2020/01/15 Javascript
vuex中store存储store.commit和store.dispatch的用法
2020/07/24 Javascript
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
Python找出9个连续的空闲端口
2016/02/01 Python
python编程实现希尔排序
2017/04/13 Python
Python实现希尔排序算法的原理与用法实例分析
2017/11/23 Python
python字典快速保存于读取的方法
2018/03/23 Python
pandas数值计算与排序方法
2018/04/12 Python
Python协程操作之gevent(yield阻塞,greenlet),协程实现多任务(有规律的交替协作执行)用法详解
2019/10/14 Python
Python实现实时数据采集新型冠状病毒数据实例
2020/02/04 Python
PyInstaller将Python文件打包为exe后如何反编译(破解源码)以及防止反编译
2020/04/15 Python
Python爬虫爬取百度搜索内容代码实例
2020/06/05 Python
为什么python比较流行
2020/06/19 Python
获取CSDN文章内容并转换为markdown文本的python
2020/09/06 Python
canvas实现飞机打怪兽射击小游戏的示例代码
2018/07/09 HTML / CSS
html5 音乐播放器 audio 标签使用概述
2013/07/15 HTML / CSS
香港永安旅游网:Wing On Travel
2017/04/10 全球购物
Moss Bros官网:英国排名第一的西装店
2020/02/26 全球购物
文明寝室申报材料
2014/05/12 职场文书
基层工作经验证明样本
2014/11/16 职场文书
2014年共青团工作总结
2014/12/10 职场文书
党员转正大会主持词
2015/07/02 职场文书
2016春季校长开学典礼致辞
2015/11/26 职场文书
pytorch中的model.eval()和BN层的使用
2021/05/22 Python
「月刊Action」2022年5月号封面公开
2022/03/21 日漫