暂时性死区以及函数作用域

news2024/12/30 3:01:53

暂时性死区

暂时性死区也就是变量声明到声明完成的区块,这个区块是一个封闭的作用域,直到声明完成。
如果在变量声明之前使用该变量,那么该变量是不可用的,也就被称为暂时性死区。

  • var 没有暂时性死区,因为var存在变量提升
  • let、const有块级作用域,没有变量提升,存在暂时性死区
console.log(a); // 报错 Cannot access 'a' before initialization
let a = '东方不败' 
console.log(b); // 报错 Cannot access 'b' before initialization
const b = '东方不败'
console.log(c);   // undefined 因为var存在变量提升
var c = '东方求败'  

ES6规定,如果代码块中存在letconst命令声明的变量,这个区块对这些变量从一开始就形成了封闭作用域,直到声明语句完成,这些变量才能被访问(获取或设置),否则会报错ReferenceError。这在语法上称为“暂时性死区”(英temporal dead zone,简 TDZ),既代码块开始到变量生命语句完成之前的区域。


函数作用域

案例一
一旦设置了参数的默认值,函数进行生命初始化时,参数就会形成一个单独的作用域,等初始化结束,这个作用域就会消失,这种语法在不设置参数默认值时不会出现。

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

上面这个例子中,函数参数这里(x,y = x),这个区域就是单独的作用域,y默认的x变量指向第一个参数x,而不是全局变量x,这里调用f函数,向x传递数值2y = x 那么 y = 2,打印结果为2

案例二

let x2 = 1
function f2(y2 = x2){
         let x2 = 2
         console.log(y2);
     }
f2()  // 1

调用f2函数,由于未给f2函数任何参数,并且 y2 = x2 形成一个单独的作用域,在这个作用域里x2并未定义,所以x2指向的是外层全局变量x2y2 = x2 也就是y2 = 1,在这里,函数内部的x2并未起到任何作用。

函数执行的时候会先执行参数,再执行函数体。

// 报错
function f2(y2 = x2){
         let x2 = 2
         console.log(y2);
     }
f2()  // 报错

上面的例子中,如果去掉全局变量x2则会报错,因为变量为声明,给y2赋值了一个未生命的变量,报错。

var xx = 1
function fxx(xx = xx){
    console.log(xx);
    }
fxx()

上面这个写法也会报错,由于函数的参数存在单独的作用域,在这个参数作用域内,执行结果为 let xx = xx,给xx赋值一个未声明的变量xx报错。(暂时性死区)


如果函数的默认参数是函数,该函数的作用域也要遵循这个规则。

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

这个例子中,函数的参数是func默认值是一个匿名函数,返回值为变量foo,由于函数参数这里形成一个单独的作用域,在这个作用域里面并没有定义变量foo,所以foo会指向外层全局变量foo。如果去掉全局变量foo='out'报错,赋值了一个未声明的变量。


应用
可以利用这个特性写一个参数默认值错误抛出,如果参数并未传参则抛出一个错误。

function throwErr(){
    throw new Error('参数不得省略')
    }
    
function omits(mustfn = throwErr()){
    return mustfn
    }
omits(); // 未传参抛出错误 : 参数不得省略

调用omits函数未传参数,该函数就会默认调用throwErr()函数并抛出错误。

如果将参数默认值设置为 undefined 则表示该参数是可以省略的。


rest参数

arguments
arguments可以获得函数的参数值以及函数信息(name、length)等

    function au(arr){
        console.log('arguments:',arguments);
    }
    au(2,1,4,3)

在这里插入图片描述

可以通过数组方法对函数参数进行操作,例如排序。
arguments对象不是数组,而是一个类似数组的对象,为了使用数组的方法,必须使用Array.from先将其转为数组。

function au(arr){
     // 通过数组方法对函数参数进行排序
     return Array.from(arguments).sort();
   }
console.log(au(2,1,4,3))  // [1,2,3,4]

在这里插入图片描述


rest参数
ES6提供了rest参数,语法:(...变量名),其实就是剩余运算符,通过rest参数就可以很容易的对函数参数进行操作,并且rest的参数是一个真正的数组。

// resy参数(剩余运算符)
function residue(...val){
      console.log(val);  // [1,2,3]
    }
residue(1,2,3)

rest参数(剩余运算符)只能放到最后一位,否则报错

// function residue2(...val,b){}  // 剩余运算符不是最后一位,报错
function residue3(c,...val){
  console.log(c,val);  // 1 [2,3,4,5] 
 }
residue3(1,2,3,4,5)

上面arguments完成的参数排序,使用rest可以很轻松的做到,并且语义更强,更方便阅读。

let au2 = (...val) => val.sort()
console.log(au2(2,1,4,3));  // [1, 2, 3, 4]

严格模式

ES5开始,函数内部可以设定为严格模式: function s(){ 'use strict'// 严格模式 }

// es5严格模式
function s(){
   'use strict'   // 严格模式
   // 代码.....
}

ES6做了修改,规定只要函数参数使用了默认值、解构赋值、扩展运算符,那么函数内部就不能显示设定为严格模式,否则报错。

// es6严格模式  报错,因为设置了函数默认值
function s2(a,b = a){
   'use strict'
   // 代码.....
}
// 报错,使用了解构赋值
const s3 = function({a,b}){
    'use strict'
}
// 报错,使用了剩余运算符
const s4 = (...a) => {
    'use strict'
}

es6这样设置的原因是,函数内部的严格模式应该同样适用于函数体和函数参数,但是,函数执行的时候会先执行参数,再执行函数体,这样就有一些不严谨的情况,只有函数体中才能知道参数是否应该以严格模式执行,但是函数的参数确是先执行,所以es6修改了函数参数关于严格模式的行为。

function s5(val = 070){
    'use strict'
    return val
}
s5()  // 报错

这一段,函数的默认值是八进制070,严格模式下不能使用前缀0表示八进制,所以报错。
实际上是因为函数设置了默认参数的原因,函数先执行参数,再进函数体,由于es6限制,报错。


有两种方法可以规避这种限制
第一种:设置全局严格模式

'use strict'
function s6(val = 100){
  console.log(val);
}
s6()  // 100

第二种方法:把函数嵌套在一个无参数的立即执行函数里

const s7 = () => {
     'use strict'
     let a;
     return (function(val = 200){ return val })()
}
console.log(s7());

匿名函数的调用方法:在上述例子(function(val = 200){return val})()中,将整个return的函数用()套起来,尾部加一个()调用即可,()在函数中代表调用。


案例源码:https://gitee.com/wang_fan_w/es6-science-institute

如果觉得这篇文章对你有帮助,欢迎点亮一下star哟

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/113314.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Python编程 递归函数

作者简介:一名在校计算机学生、每天分享Python的学习经验、和学习笔记。 座右铭:低头赶路,敬事如仪 个人主页:网络豆的主页​​​​​​ 目录 前言 一.函数执行注意点 二.递归函数 1.递归的介绍 2.例子 前言 本章将会讲解…

新版H5微信网页JS-SDK自定义分享功能实现

1.先用 微信官方文档demo,下载下来去改就行, 概述 | 微信开放文档 2.(后端)填写上认证后的,公众号appid,appsecret。 3.(前端代码) 配置好需要的接口(调试打开debug&a…

自研框架(Webx)整合Zuul网关工作总结

写在前面,最近被分配了一个技术任务,简单描述为自研框架(类比Spring)整合一个微服务网关,并且能用就行。 有人可能会问,想用微服务网关,不是直接引入zuul或者gateway相关的依赖,然后…

【Pandas入门教程】如何合并多个表中的数据

如何合并多个表中的数据 来源:Pandas官网:https://pandas.pydata.org/docs/getting_started/intro_tutorials/index.html 笔记托管:https://gitee.com/DingJiaxiong/machine-learning-study 文章目录如何合并多个表中的数据导包数据准备【1】…

Linux系统基础——文件子系统

title: Linux系统文件子系统 date: 2022-12-18 15:48:24 modify: 2022-12-18 16:48:43 author: wangjianfeng tags: 001-computer-technology, OS, Linux aliases: Linux系统文件子系统 特此说明: 刘超的趣谈linux操作系统是比较重要的参考资料,本文大部分内容和图…

腾讯云轻量应用服务器搭建LAMP 开发环境

LAMP(LinuxApacheMySQLPHP)是目前国际流行的 Web 应用框架,包括了 Linux 操作系统、Apache Web 服务器、MySQL/MariaDB 数据库和 PHP 编程语言环境以及相关组件支持。 说明 LAMP 应用镜像底层基于 CentOS 7.6 64位操作系统。 登录 轻量应用服…

做一个极简 UI 库之代码 lint

eslint, prettier, stylelint 的配置 这三个规则的配置思路:代码美化用 prettier,逻辑代码用 eslint 校验,样式代码用 stylelint 校验。有跟代码美化冲突的以 prettier 为主 为什么要用这么多呢,因为 eslint 不能解析样式代码&a…

数据结构---LRU算法

LRU算法哈希链表自己的JAVA实现LRU全称Least Recently Used,也就是 最近最少使用的意思,是一种内存管理算法,该算法最早应用于Linux操作系统。这个算法基于一种假设:长期不被使用的数据,在未来被用到的几率也不大。因此…

【LeetCode】1754. 构造字典序最大的合并字符串

构造字典序最大的合并字符串 题目描述 给你两个字符串 word1 和 word2 。你需要按下述方式构造一个新字符串 merge :如果 word1 或 word2 非空,选择 下面选项之一 继续操作: 如果 word1 非空,将 word1 中的第一个字符附加到 mer…

node.js+uni计算机毕设项目基于微信小程序校园生活管理LW(程序+小程序+LW)

该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流 项目运行 环境配置: Node.js Vscode Mysql5.7 HBuilderXNavicat11VueExpress。 项目技术: Express框架 Node.js Vue 等等组成,B/S模式 Vscode管理前后端分离等…

基于形态学处理的不规则形状图像的几何参数统计,包括输出面积,周长,圆度,矩形度,伸长度

up目录 一、理论基础 二、核心程序 三、测试结果 一、理论基础 形态学是图像处理中应用最为广泛的技术之一,主要用于从图像中提取对表达和描绘区域形状有意义的图像分量,使后续的识别工作能够抓住目标对象最为本质的形状特征,如边界和连通…

C#语言实例源码系列-实现文件分割和合并

专栏分享点击跳转>Unity3D特效百例点击跳转>案例项目实战源码点击跳转>游戏脚本-辅助自动化点击跳转>Android控件全解手册 👉关于作者 众所周知,人生是一个漫长的流程,不断克服困难,不断反思前进的过程。在这个过程中…

腾讯云轻量应用服务器使用 WooCommerce 应用镜像搭建电商独立站

WooCommerce 是当前很受欢迎的电商独立站建站工具,具备开源、免费、使用简单且功能强大等特点,您可通过该镜像快速搭建基于 WordPress 的电商独立站。该镜像已预装 WordPress(包含 WooCommerce 插件)、Nginx、MariaDB、PHP 软件。…

数据结构之排序【直接选择排序和堆排序的实现及分析】内含动态演示图

文章目录引言:1.直接选择排序2.堆排序3.直接选择排序和堆排序的测试引言: 感觉今天更冷了,码字更加的不易,所以引言就简单的写一下啦!今天我们就来了解一下什么是直接选择排序和堆排序。 1.直接选择排序 时间复杂度…

RabbitMQ 第一天 基础 4 RabbitMQ 的工作模式 4.1 Work queues 工作队列模式

RabbitMQ 【黑马程序员RabbitMQ全套教程,rabbitmq消息中间件到实战】 文章目录RabbitMQ第一天 基础4 RabbitMQ 的工作模式4.1 Work queues 工作队列模式4.1.1 模式说明4.1.2 代码编写4.1.3 小结第一天 基础 4 RabbitMQ 的工作模式 4.1 Work queues 工作队列模式 …

ELK第四讲之【docker安装Logstash8.4.3、集成springboot】

docker安装elasticsearch8.4.3 docker安装kibana8.4.3 一、docker安装logstash8.4.3 官方地址 https://github.com/elastic/logstash/releases 1、拉取镜像 docker pull elastic/logstash:8.4.3 2、启动容器 docker run -it -d --name logstash -p 9600:9600 -p 5044:…

十六、Docker Compose容器编排第一篇

1、概述 Compose 是一个用于定义和运行多容器 Docker 应用程序的工具。使用 Compose,您可以使用 YAML 文件来配置应用程序的服务。然后,使用一个命令,您可以从您的配置中创建并启动所有服务。 Compose 适用于所有环境:生产、暂存、…

node.js+uni计算机毕设项目高校自习室座位网上预约小程序(程序+小程序+LW)

该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流 项目运行 环境配置: Node.js Vscode Mysql5.7 HBuilderXNavicat11VueExpress。 项目技术: Express框架 Node.js Vue 等等组成,B/S模式 Vscode管理前后端分离等…

获取淘宝价格区间l-r的商品a的详细信息(商品名等)

看了一眼,上次更新距今2个月,看起来我好咕咕啊(感叹),可是感觉这两个月也没闲着捏(比赛,cf,期末等等,幸亏期末考延期了,我这被期末作业都整死了快&#xff09…

SpringBoot+Vue项目艺术摄影预约系统设计与实现

文末获取源码 开发语言:Java 使用框架:spring boot 前端技术:JavaScript、Vue.js 、css3 开发工具:IDEA/MyEclipse/Eclipse、Visual Studio Code 数据库:MySQL 5.7/8.0 数据库管理工具:phpstudy/Navicat JD…