ES6标准下在if中进行函数声明

ES5中规定,函数只能在顶层作用域或函数作用域之中声明,不能在块级作用域声明。

// 情况一
if (true) {function f() {}
}// 情况二
try {function f() {}
} catch(e) {// ...
}

上面两种函数声明,根据 ES5 的规定都是非法的。但是,浏览器没有遵守这个规定,为了兼容以前的旧代码,还是支持在块级作用域之中声明函数,因此上面两种情况实际都能运行,不会报错。

ES6 引入了块级作用域,明确允许在块级作用域之中声明函数。ES6 规定,块级作用域之中,函数声明语句的行为类似于let,在块级作用域之外不可引用。

function f() { console.log('I am outside!'); }(function () {if (false) {// 重复声明一次函数ffunction f() { console.log('I am inside!'); }}f();
}());

上面代码在 ES5 中运行,会得到“I am inside!”,因为在if内声明的函数f会被提升到函数头部,实际运行的代码如下。

// ES5 环境
function f() { console.log('I am outside!'); }(function () {function f() { console.log('I am inside!'); }if (false) {}f();
}());

ES6 就完全不一样了,理论上会得到“I am outside!”。因为块级作用域内声明的函数类似于let,对作用域之外没有影响。

但是,如果你真的在 ES6 浏览器中运行一下上面的代码,是会报错的,这是为什么呢?

// 浏览器的 ES6 环境
function f() { console.log('I am outside!'); }(function () {if (false) {// 重复声明一次函数ffunction f() { console.log('I am inside!'); }}f();
}());
// Uncaught TypeError: f is not a function

原来,如果改变了块级作用域内声明的函数的处理规则,显然会对老代码产生很大影响。为了减轻因此产生的不兼容问题,ES6 在附录B里面规定,浏览器的实现可以不遵守上面的规定,有自己的行为方式。

  1. 允许在块级作用域内声明函数。
  2. 函数声明类似于var,即会提升到全局作用域或函数作用域的头部。
  3. 同时,函数声明还会提升到所在的块级作用域的头部。

根据这三条规则,浏览器的 ES6 环境中,块级作用域内声明的函数,行为类似于var声明的变量。上面的例子实际运行的代码如下。

// 浏览器的 ES6 环境
function f() { console.log('I am outside!'); }
(function () {var f = undefined;if (false) {function f() { console.log('I am inside!'); }}f();
}());
// Uncaught TypeError: f is not a function

再看一个例子

console.log("第一次输出a: ", a) //输出 本地a
if (true) {// 这里js隐式的把function a的定义放到这里来了,此刻这里有一个 块aa = 1 // 将 块a的值 由函数修改为1console.log("第二次输出a: ",a) // 此时输出的是 块a的值function a() {} // 执行到function a的声明处,此时会将if块中的a同步到外部去,也就是把块a赋值给了本地a, 本地a此刻从undefined被修改为了1a = 2 // 此处修改的是 块a, 块a的值由1修改为2console.log("第三次输出a: ", a) // 输出块a的值
}
console.log("第四次输出a: ",a) // if执行完毕,没有块了,此时输出的是本地a的值

在if语句处打一个断点。当程序执行到if语句时(linenumber 2),本地a的定义是undefined,且不存在块,说明2成立,函数声明a被提升到全局作用域。

当语句执行进入到if时(linenumber4),此时就会产生块,debug停留在a=1;这句时(此时赋值还未进行),块a已经变为了function,3成立,if块中的函数声明被提升到了所在块的顶部。但此时本地a还是undefined:

当debug停留在a=2;这句时(linenumber 7,赋值还未进行),此时块中执行了function a的函数声明,该声明被同步提升到了块外,影响了本地a,本地a此时从undefined变为了1,这也是2的证实,执行到具体的“声明”语句时,全局就有了值,这与ES6中使用var声明变量时的效果是一样的。

当debug执行到if块的最后一句console.log时(linenumber8),打印的是块中a的内容(就近原则,或者说块a遮蔽了本地a),所以输出的结果是2。

 当debug执行到最后一句console.log时(linenumber 10),此时if语句已经执行完毕,块没有了,所以打印的只能是本地a的内容,本地a的内容此时的值是1

===========================华丽的分割线====================================

块内的函数声明会有一次全局性提升(例如例子中的function a),在作用域顶部声明了一个与函数同名的变量(也就是vscode调试中的本地变量a),初始值是undefined。进入块之后,函数声明又会被提升到块的顶部(也就是块变量a,初始值是function)。此时本地一个变量a(值是undefined),块内一个变量(值是function)。然后块内代码继续执行,每次执行到块内的函数声明那句话时,就会进行一次块内变量为本地同名变量的赋值,就好像块内与本地同名变量的同步。

//本地变量a,初始值是undefined
console.log(`1 ${window.a},${a}`);//undefined,undefined
{  //块变量a,初始值是function a{}console.log(`2 ${window.a},${a}`);//undefined,function a(){}function a(){} // 同步console.log(`3 ${window.a},${a}`);//function a(){},function a(){}a = 42;//为块变量a赋值console.log(`4 ${window.a},${a}`);//function a(){},42function a(){}//同步console.log(`5 ${window.a},${a}`);//42,42
}//块变量a消失,此时仅有本地变量a
console.log(`6 ${window.a},${a}`);//42,42

注意,这个示例代码在本地VSCode上会有严重的错误提示(function a不能重复定义!!!),但是在Chrome中可以正常运行,运行的结果就如提示中所示。

考虑到环境导致的行为差异太大,在MDN上有关于块中定义函数时的建议:

应该避免在块级作用域内声明函数。如果确实需要,也应该写成函数表达式,而不是函数声明语句。

函数声明语句并非真正的语句,JS 规范只是允许它们作为顶级语句。它们可以出现在全局代码中,或者内嵌在其他函数中。相比之下,函数表达式是更大意义上表达式的一部分。函数表达式不会出现函数提升,放在哪里就在哪里执行,不会像函数声明那样随意放置具有误导性。

上面三条规则只对 ES6 的浏览器实现有效,其他环境的实现不用遵守,还是将块级作用域的函数声明当作let处理。

本文大量参考了阮一峰大神的文章,获益匪浅:ES6 的块级作用域

 

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

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

相关文章

【C++】将类对象转换成基本数据类型

2023年7月19日,周三晚上: 今天晚上看源码的时候,突然在某个类里面看到了“operator bool() const;”,我完全想不起来这是啥意思了,于是今晚重新学习了一下 目录 类型转换函数的定义类型转换函数的作用 类型转换函数的…

王道计算机网络学习笔记(5)——传输层和应用层

前言 文章中的内容来自B站王道考研计算机网络课程,想要完整学习的可以到B站官方看完整版。 五:传输层 5.1:传输层基本概述 传输层的功能: 1传输层提供进程和进程之间的逻辑通信 2复用和分用 微信和QQ都使用传输层的协议进行发…

Vue3基础知识

文章目录 第一章 vue3 安装1.1安装1.2开启服务器1.3 使用图形化界面1.4 Vite1.5 vue3项目打包1.6 vue3 创建项目1.6.1 vue create命令1.6.2 创建一个项目 第二章 vue3 基础2.1 vue3 的目录结构2.2 vue3 的起步2.2.2 data 选项2,2.3 methods 2.3 Vue3 指令2.4 vue3 模板语法2.4.…

vue3和tauri直接下载Binary 数组的二进制文件内容到本地

通过发送url请求,直接获取到一个文件的Binary 数组内容,然后通过tauri的api:writeBinaryFile保存文件到本地电脑。 发送请求的时候,要加上响应类型:responseType: ResponseType.Binary 然后等返回的响应内容&#xf…

Chat GPT是什么,初学者怎么使用Chat GPT,需要注意些什么

目录 Chat GPT是什么 初学者怎么使用Chat GPT 使用Chat GPT需要注意什么 一些简单的prompt示例 Chat GPT是什么 Chat GPT是由OpenAI开发的一种大型语言模型,它基于GPT(Generative Pre-trained Transformer)架构。GPT是一种基于深度学习的…

应对突发流量,如何快速为自建 K8s 添加云上弹性能力

作者:庄宇 以 Kubernetes 为代表的容器技术带来的是一种应用交付模式的变革,其正迅速成为全世界数据中心的统一 API。 为了保证业务持续稳定、用户访问不中断,高可用、高弹性等能力是应用架构设计不变的追求,多集群架构天然具备…

使用 uiautomator2+pytest+allure 进行 Android 的 UI 自动化测试

目录 前言: 介绍 pytest uiautomator2 allure 环境搭建 pytest uiautomator2 allure pytest 插件 实例 初始化 driver fixture 机制 数据共享 测试类 参数化 指定顺序 运行指定级别 重试 hook 函数 断言 运行 运行某个文件夹下的用例 运行某…

【软件测试面试】腾讯数据平台笔试题-接口-自动化-数据库

数据库题 答案: Python编程题 答案: 接口参数化题 答案: 接口自动化题 答案: 以下是我收集到的比较好的学习教程资源,虽然不是什么很值钱的东西,如果你刚好需要,可以评论区&#…

高斯误差线性单元激活ReLU以外的神经网络

高斯误差线性单位(GELU)激活函数由加州大学伯克利分校的Dan Hendrycks和芝加哥丰田技术研究所的Kevin Gimpel于2018年引入。激活函数是触发神经元输出的“开关”,随着网络的深入,其重要性也随之增加。最近几周,机器学习…

create database创建数据库失败

瀚高数据库 目录 环境 症状 问题原因 解决方案 环境 系统平台:Linux x86-64 Red Hat Enterprise Linux 7 版本:4.5.7 症状 1、执行如下sql语句创建数据库报错。 create database printcdburn with encodingUTF8 OWNERprintcdburn LC_COLLATEzh_CN.UTF-…

github 最简单的使用步骤(个人学习记录~)

github 使用步骤: (11条消息) github新手用法详解(建议收藏!!!)_github详解_怪 咖的博客-CSDN博客 1.获取ssh密钥 打开输入:ssh-keygen -t rsa -C “git账号” 输入之后一路Enter&#xff08…

谈谈VPN是什么、类型、使用场景、工作原理

作者:Insist-- 个人主页:insist--个人主页 作者会持续更新网络知识和python基础知识,期待你的关注 前言 本文将讲解VPN是什么、以及它的类型、使用场景、工作原理。 目录 一、VPN是什么? 二、VPN的类型 1、站点对站点VPN 2、…

labview 弹窗(子vi)

如果你遇到了需要在主vi运行时需要弹窗某个窗口(或者称为子vi,子画面),而且要主画面和子画面能独立运行各自的循环程序,本文能给你帮助。 本文的精髓在于: wait until Donefalse,表示子VI运行的同时,主vi也继续运行后面的代码,主…

win10下解决git报错 Permission denied(publickey)

今天在csdn的GitCode新建了一个项目,然后在windows下git clone时出现错误 gitgitcode.net: Permission denied (publickey). fatal: Could not read from remote repository. Please make sure you have the correct access rights and the repository exists. 完整…

Apache Doris (三十一):Doris 数据导入(九)Spark Load 4- 导入Hive数据及注意事项

目录 1. Spark Load导入Hive非分区表数据 2. Spark Load 导入Hive分区表数据 3. 注意事项 进入正文之前,欢迎订阅专题、对博文点赞、评论、收藏,关注IT贫道,获取高质量博客内容! 宝子们订阅、点赞、收藏不迷路!抓紧…

拼多多API接口,百亿补贴商品详情页面采集

电商API的数据类型 电商API提供的数据种类多样,一般可分为以下几类: 1.商品数据:商品ID、商品名称、商品价格、库存等。 2.交易数据:订单号、付款时间、收货人等。 3.店铺数据:店铺ID、店铺名称、开店时间、店铺评…

使用Canal同步mysql数据到es

一、简介 Canal主要用途是基于 MySQL 数据库增量日志解析,提供增量数据订阅和消费。 当前的 canal 支持源端 MySQL 版本包括 5.1.x , 5.5.x , 5.6.x , 5.7.x , 8.0.x 二、工作原理 MySQL主备复制原理 MySQL master 将数据变更写入二进制日志( binary log, 其中记…

【云原生】K8S单节点搭建

Kubernetes Kubernetes基础概念架构1、基础环境2、安装kubelet、kubeadm、kubectl 2、使用kubeadm引导集群1、下载各个机器需要的镜像2、初始化主节点 Kubernetes核心实战Pod Kubernetes基础概念 kubernetes具有以下特性: ● 服务发现和负载均衡 Kubernetes 可以使…

200行代码写一个简易的C++小黑窗贪吃蛇游戏

分享一个简易的小黑窗贪吃蛇,一共就两百行代码左右(包含注释),很适合初学者巩固语法来练练手. 如果后续需要其他功能也可以再添加. 先小小展示一下: 源码在文末免费领取. 使用工具: VS2019(不是用VS的也可以直接找出cpp和h文件复制到你们用的IDE,甚至是记事本都可以) 闲话…

【hadoop】hadoop的体系架构

hadoop的体系架构 HDFS的体系架构NameNodeedits文件(客户端的操作日志)fsimage文件(元信息文件) DataNodeSecondary NameNode Yarn的体系架构HBase主从架构的单点故障的问题 HDFS的体系架构 NameNode NameNode:主节点…