摘要:在日常JS/TS项目开发过程中,经常会在文件开头看到"use strcit"字样,这里的“使用严格”是什么意思?

本文分享自华为云社区《JS/TS里的"use strict"严格模式是什么?》,作者: gentle_zhou。

在日常JS/TS项目开发过程中,经常会在文件开头看到" use strcit "字样,这里的“使用严格”是什么意思?

看字面意思来解释,就是这个项目文件是在严格的条件下运行的。那么什么是严格的条件?为什么我们需要严格的条件呢?

严格模式是什么

"use strcit"是在 JavaScript 1.8.5 (ECMAScript5)版本中新增的:

"use strcit"并不是一条语句,而是一个拥有与普通代码不同含义的声明;我们通过在脚本或函数的头部添加"use strcit"表达式来声明严格模式的使用。严格模式的意义让项目中代码可以在严格条件下执行,可以限制一些不良的编码习惯,把问题在编码阶段就可以暴露出来。

支持严格模式的浏览器有:Internet Explorer 10 +、 Firefox 4+ Chrome 13+、 Safari 5.1+、 Opera 12+。

如何在浏览器查看报错信息呢?我们可以按下F12按钮或则点击浏览器页面右上角的三个点-更多工具-开发者工具,开启调试模式:

然后点击控制台tab,查看报错信息:

为什么我们需要严格模式

与严格模式相对的模式是sloppy mode(草率模式),从名字上我们就能看出来,它在我们编写代码过程中的应对态度就是随意的、草率的。Sloppy mode不是一个正式的名称,只要我们没有用严格模式来声明,那么这个js/ts文件就处于sloppy mode中。

那么我们为什么要用严格模式(还需要额外声明),而不是直接使用草率模式呢?

严格模式可以消除JS/TS语法里一些不合理,不严谨的地方,可以让JS/TS往更合理、更安全、更严谨的方向去发展:

  • 通过将一些JS/TS的静默错误更改为抛出错误,消除了JS/TS的一些静默错误,能更加有效保障代码运行的安全;
  • 提高编译器效率,增加运行速度;
  • 禁止一些可能在ECMAScript未来版本中定义的语法。

关于有哪些静默错误,部分会在下面的严格模式限制实例section这一节里展示。

严格模式限制实例

1、不允许使用未声明的变量

在调试模式下会显示“Uncaught ReferenceError: x is not defined”

正确的表达应该是let x = 520;

2、不允许删除变量或对象

在调试模式下会显示“Uncaught SyntaxError: Delete of an unqualified identifier in strict mode.”

3、不允许删除函数

在调试模式下会显示“Uncaught SyntaxError: Delete of an unqualified identifier in strict mode.”

4、不允许变量重名

在调试模式下会显示“Uncaught SyntaxError: Duplicate parameter name not allowed in this context.”

5、不允许使用八进制

在调试模式下会显示“Uncaught SyntaxError: Octal literals are not allowed in strict mode.”

6、不允许使用转义字符

在调试模式下会显示“Uncaught SyntaxError: Invalid or unexpected token.”

7、不允许对只读属性赋值

在调试模式下会显示“Uncaught TypeError: Cannot assign to read only property 'x' of object '#<Object>'.”

8、不允许对一个使用getter方法读取的属性进行赋值

在调试模式下会显示“Uncaught TypeError: Cannot set property x of #<Object> which has only a getter.”

9、不允许删除一个不允许删除的属性

在调试模式下会显示“Uncaught TypeError: Cannot delete property 'prototype' of function Object() { [native code] }.”

10、变量名不能使用 “eval” 字符串/“arguments” 字符串

在调试模式下会显示“Uncaught SyntaxError: Unexpected eval or arguments in strict mode.”

11、不允许使用以下这种语句

在调试模式下会显示“Uncaught SyntaxError: Strict mode code may not include a with statement.”

12、由于一些安全原因,在作用域 eval() 创建的变量不能被调用

在调试模式下会显示“Uncaught ReferenceError: x is not defined.”

同时,为了向将来Javascript的新版本过渡,严格模式新增了一些保留关键字:

  • implements
  • interface
  • let
  • package
  • private
  • protected
  • public
  • static
  • yield

举个栗子,如果我们变量名取为其中一个保留的关键字'public',那么就会报错“Uncaught SyntaxError: Unexpected strict mode reserved word”

参考链接

  1. http://www-lia.deis.unibo.it/materiale/JS/developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/1.8-2.html
  2. https://developer.mozilla.org/en-US/docs/web/javascript/reference/strict_mode
  3. https://developer.mozilla.org/en-US/docs/Glossary/Sloppy_mode
  4. https://www.runoob.com/js/js-strict.html

点击关注,第一时间了解华为云新鲜技术~

为啥JS/TS里都会有"use strict"的更多相关文章

  1. 教你如何解决JS/TS里特定String进行拆分然后遍历各个元素

    摘要:我们需要先判断特定String里是否包含我们需要的元素,针对这个元素对这个字符串进行拆分,遍历各个元素. 本文分享自华为云社区<JavaScript/TypeScript项目里如何对特定S ...

  2. jsp页面:js方法里嵌套java代码(是操作数据库的),如果这个js 方法没被调用,当jsp页面被解析的时候,不管这个js方法有没有被调用这段java代码都会被执行?

    jsp页面:js方法里嵌套java代码(是操作数据库的),如果这个js 方法没被调用,当jsp页面被解析的时候,不管这个js方法有没有被调用这段java代码都会被执行? 因为在解析时最新解析的就是JA ...

  3. JS/TS项目里的Module都是什么?

    摘要:在日常进行JS/TS项目开发的时候,经常会遇到require某个依赖和module.exports来定义某个函数的情况.就很好奇Modules都代表什么和有什么作用呢. 本文分享自华为云社区&l ...

  4. 一些angular/js/ts的坑和吐槽

    ------20190318 ------------- 回头看,很多槽点已经随着升级改掉了   绑定string字面值到子组件@Input <app-overlay-static [name] ...

  5. 前端 JS/TS 调用 ASP.NET Core gRPC-Web

    前言 在上两篇文章中,介绍了ASP.NET Core 中的 gRPC-Web 实现 和 在 Blazor WebAssembly 中使用 gRPC-Web,实现了 Blazor WebAssembly ...

  6. 在js脚本里计算多个小数的加法问题

    当在js脚本里计算多个小数的加法时,算得的结果往往会自动取整,这时候我们就应该加入以下代码: function toDecimal(x) { var val = Number(x); if (!isN ...

  7. 在被vue组件引用的 js 文件里获取组件实例this

    思路: 通过调用函数 把 组件实例this  传递 到 被应用的 js文件里 实例: 文件结构 在SendThis.vue 文件中引用 了modalConfig.js import modalConf ...

  8. 在普通js文件里引入vue实例的方法

    首先是我是写了一个 Loading 插件然后 是挂在打vue.prototype 原型上的. 在main.js中use使用了这个插件. 至此vue原型是就被我挂上 $loadding方法了. 然后我想 ...

  9. 在js文件里调用另一个js文件里的函数

    这个是我今天解决的一个小问题,我在创建界面的时候,根据不同的界面需求对应创建了不同的js文件来搭建界面,搭建完毕之后再将各个生成页面的函数汇总到主界面上,通过visibility属性切换显示,这时候出 ...

  10. 常用代码之五:RequireJS, 一个Define需要且只能有一个返回值/对象,一个JS文件里只能放一个Define.

    RequireJS 介绍说一个JS文件里只能放一个Define,这个众所周知,不提. 关于Define,它需要有一个返回值/对象,且只能有一个返回值/对象,这一点却是好多帖子没有提到的,但又非常重要的 ...

随机推荐

  1. could not chdir to home directory /home/user:permission denied /bin/bash:Permiss 的原因和解决方法

    今天在vm上登录一个user 的时候,发现正确输入用户名和密码后弹出了这样的信息,登陆不上. 发现给出的信息中,permission denied 而 bin permiss; 这种情况表明自己给该用 ...

  2. Hooks的核心原理梳理

    我们前端都在诟病专业版,它的组件,它的耦合嵌套之深,它的性能. 我们希望改善,我们认为,如果--就好了. 如果重构就好了,如果技术栈统一就好了,如果有规范就好了. 其实,不用等,我们只要在写代码,就可 ...

  3. SpringBoot+Redis实现接口级别缓存信息

    本文主要讲述如何通过SpringBoot+Redis实现接口级别缓存信息 背景 近期因为一直在处理公司的老项目,恰好碰到产品说页面有一些信息展示慢,简单看了一下页面接口,发现查询的是系统中几张大表(数 ...

  4. 聊聊魔塔社区MGeo模型的部署与运行

    从现今与今后的发展来看,单一的业务不再仅仅依靠于传统的技术开发,而是应该结合AI模型来应用.实践.只有这样,才能更数智化,更高效化,更贴合时代的发展. 魔塔 社区就类似国外的Hugging Face, ...

  5. 暴力+分治+贪心+DP:最大子序列和

    给定一个整数数组 nums ,找到一个具有最大和的连续子数组(子数组最少包含一个元素),返回其最大和. 示例: 输入: [-2,1,-3,4,-1,2,1,-5,4], 输出: 6 解释: 连续子数组 ...

  6. 聊聊分布式 SQL 数据库Doris(四)

    FE层的架构都能在网上找到说明. 但BE层的架构模式.一致性保障.与FE层之间的请求逻辑,数据传输逻辑等,我个人暂时没有找到相应的博客说明这些的.当然这些是我个人在学习与使用Doris过程中,对内部交 ...

  7. 记一次逆向分析解密还原Class文件

    前言 前阵子我的一位朋友发来一份代码让我帮忙看看.具体就是所有的jsp文件内容和大小都一样,漏洞挖掘无从下手.经过分析发现所有的Class都使用了自定义的加密工具加密,经过逆向分析,顺利解密,因而有了 ...

  8. MySQL笔记01: MySQL入门_1.3 MySQL启动停止与登录

    1.3 MySQL启动停止与登录 1.3.1 MySQL启动与停止 MySQL数据库分为客户端和服务器端,只有服务器端服务开启以后,才可以通过客户端登录MySQL服务端. 首先,以管理员身份运行&qu ...

  9. 如何使用 Helm 在 K8s 上集成 Prometheus 和 Grafana|Part 1

    本系列将分成三个部分,您将学习如何使用 Helm 在 Kubernetes 上集成 Prometheus 和 Grafana,以及如何在 Grafana 上创建一个简单的控制面板.Prometheus ...

  10. NLP复习之朴素贝叶斯

    朴素贝叶斯分类器和加一平滑计算每个单词的似然值 贝叶斯规则:c表示类别,d表示数据 \[P(c|d) = \frac{P(d|c)P(c)}{P(d)} \] 例题1 假设句子"I alwa ...