快捷搜索:  汽车  科技

简述javascript中的基本类型(开启JavaScript严格模式可规避的9大核心问题)

简述javascript中的基本类型(开启JavaScript严格模式可规避的9大核心问题)可以通过以下几种方法来显式的声明严格模式:有可能在学校或大学里,你有一个对你非常友好的老师,当你遇到困难时,他总是帮助你,有时他也从不让别人或你知道你犯了一些错误。好吧,有时 JavaScript 的行为就类似于那位友好的学校老师,隐藏你所有的错误,甚至不告诉你。这就是为什么我们必须明确声明:嘿 Javascript 、请通过使用关键字“use strict”对我和我的代码更加严格一点。《一文读懂 Canvas 中的 scale 与 translate》《一文读懂 Canvas 中 rotate 与 skew 操作》本篇文章将和大家一起聊下Canvas外的一些内容,比如JavaScript的严格模式。话不多少,直接开始。

写在前面的话

我会将过去几年学到的 Canvas 制图理论、实践进行浓缩、并编辑成册。希望通过体系化的内容组织助你快速入门、深入理解 Canvas。当然,因篇幅有限,本课程可能无法做到面面俱到,但是有了核心知识的积累,不论是继续阅读 Canvas 系列书籍,还是进一步扩展 Canvas 的学习领域、如 3D 制图等,都能做到左右逢源。

本 Canvas 系列课程已经编辑成册并陆续更新,下面是已更新章节传送门:

《Canvas 自动化制图必知必会-导读篇》

《Canvas 上下文详解》

《一文读懂 Canvas 中的 scale 与 translate》

《一文读懂 Canvas 中 rotate 与 skew 操作》

本篇文章将和大家一起聊下Canvas外的一些内容,比如JavaScript的严格模式。话不多少,直接开始。

为什么需要 use strict

有可能在学校或大学里,你有一个对你非常友好的老师,当你遇到困难时,他总是帮助你,有时他也从不让别人或你知道你犯了一些错误。好吧,有时 JavaScript 的行为就类似于那位友好的学校老师,隐藏你所有的错误,甚至不告诉你。这就是为什么我们必须明确声明:嘿 Javascript 、请通过使用关键字“use strict”对我和我的代码更加严格一点。

可以通过以下几种方法来显式的声明严格模式:

  • 类中的所有内容都自动处于严格模式
  • 在 JS 文件顶部、任何函数或任何本地JS块中使用“use strict”关键字
  • 当我们使用 type=”module” 导入 JS 文件时,文件中的所有内容都将处于严格模式下
use strict 能解决什么

以下是使用“严格模式”背后的原因。

1.污染全局变量

考虑下面的代码片段并说出控制台中打印的内容:

var hero = '神奇先生'; heroHelper = '银色冲浪者'; console.log(heroHelper);

在控制台中会打印“银色冲浪者”。为什么这行得通?这是因为,如果我们使用任何未声明的变量,那么 JavaScript 会将它添加到 window 对象中。如果在 JS 文件的顶部添加“use strict”,并继续尝试使用未声明的变量,将看到以下错误。

简述javascript中的基本类型(开启JavaScript严格模式可规避的9大核心问题)(1)

2.只读变量变更保持静默

考虑下面的代码并查看控制台输出的内容:

undefined = 523; NaN = 'magic'; const obj = {}; Object.defineProperty(obj 'readOnly' { writable: false value: true }); obj.readOnly = false; console.log(undefined NaN obj.readOnly);

控制台将会输出:undefined isNaN true,即我们无法变更 readOnly 值,而 JavaScript 也并不会通知你。然而,你只需要在代码最前面加上"use strict",将会看到控制台输出如下错误:

简述javascript中的基本类型(开启JavaScript严格模式可规避的9大核心问题)(2)

3.允许重复的函数参数名称

考虑下面的代码片段:

function magicalFunction(name superPower superPower) { return `${name} super power is ${superPower}`; } console.log(magicalFunction('Flash' 'Speed' 'Flight'));

此时控制台将会输出“Flash super power is Flight”。即当使用两个或多个相同名称的参数时,调用函数中最后一个传递的任何值都将分配给所有具有相同名称的参数。而这只需在 JS 文件的顶部添加“use strict”即可。

简述javascript中的基本类型(开启JavaScript严格模式可规避的9大核心问题)(3)

4.不同数字系统自动切换

考虑下面的代码片段:

console.log(015);

此时控制台将会输出 13。这是因为当把 0 放在 任何数字前面时,JS 会认为我们正在尝试将它转换为八进制,而且这个转换是自动进行的。只需在 JS 文件的顶部添加“use strict”即可有效规避它:

简述javascript中的基本类型(开启JavaScript严格模式可规避的9大核心问题)(4)

解决方案:

// In strict mode if we want conversion of number system then we have append following characters before number: BinaryIntegerLiteral prefixed with 0b or 0B. OctalIntegerLiteral prefixed with 0o or 0O. HexIntegerLiteral prefixed with 0x or 0X. console.log(0o10); // for octal 5. 当原始值用作非原始值时保持静默

考虑下面的代码片段:

const superHero = 'Flash'; superHero.team = 'DC'; console.log(superHero.team);

此时控制台将会输出“undefined”。这是因为,我们不能向原始数据类型添加键,而 JS 对这种错误也是保持静默,并不会通知开发。只需在 JS 文件的顶部添加“use strict”即可有效规避该问题。

简述javascript中的基本类型(开启JavaScript严格模式可规避的9大核心问题)(5)

6.每个函数的 this 自动绑定 window 对象

考虑下面的代码片段:

function magicalFunction() { console.log(this); } magicalFunction();

控制台输出 window 对象。这是因为默认情况下,JS 将 window 对象绑定到 this 函数内的关键字。这样做的后果是对每个函数都进行了不必要的绑定窗口引用。 只需在 JS 文件的顶部添加“use strict”即可有效规避该问题,此时打印 this 将会是"undefined"。

7. 默认覆盖参数数组。

考虑下面的代码片段:

function sum(num1 num2) { num1 = 100; const resultWithParams = num1 num2; const resultWithArguments = arguments[0] arguments[1]; return [resultWithParams resultWithArguments]; } console.log(sum(10 10));

它将打印[110 110]到控制台。即如果不是在严格模式下,创建与参数名称相同的变量,那么默认情况下 JS 也会用新值覆盖 arguments 数组。只需在 JS 文件的顶部添加“use strict”即可有效规避它。此时将会输出: [110 20]

8. 删除只读 key 时静默

考虑下面的代码片段:

delete Object.prototype; console.log(Object.prototype);

此时将会将原型链打印到控制台,因为我们不能删除 prototype 这个只读变量,而当你这样做的时候 JS 引擎并不会通知你。

简述javascript中的基本类型(开启JavaScript严格模式可规避的9大核心问题)(6)

只需在 JS 文件的顶部添加“use strict”即可有效规避它

简述javascript中的基本类型(开启JavaScript严格模式可规避的9大核心问题)(7)

参考资料

https://rahuulmiishra.medium.com/reason-behind-using-use-strict-in-javascript-ff3931c59c7c

猜您喜欢: