【JS】312- 复习 JavaScript 严格模式（Strict Mode）

点击上方“前端自习课”关注，学习起来~

注：本文为 《 JavaScript 完全手册（2018版） 》第30节，你可以查看该手册的完整目录。

严格模式是一项 ES5 功能，它使 JavaScript 以更好的方式运行，因为启用严格模式会更改 JavaScript 语言的语义。

了解严格模式与普通模式（通常称为草率模式）下 JavaScript 代码之间的主要区别非常重要。

严格模式主要是删除 ES3 中可能的功能，并且从ES5开始就被弃用(但是由于向后兼容性要求而没有被删除)。

如何开启严格模式

严格模式是可选的。与 JavaScript 中的每一个重大变化一样，我们不能简单地改变语言行默认的为方式，因为这会破坏大量的 JavaScript ，并且 JavaScript 会花费大量精力来确保1996年的JavaScript代码仍然有效。这是其成功的关键。

因此，我们需要使用 'use strict' 指令来启用严格模式。

你可以将它放在文件的开头，将其应用于文件中包含的所有代码：

JavaScript 代码:

'use strict'const name = 'Flavio'
const hello = () => 'hey'//...

你还可以通过在函数体的开头的位置添加 'use strict' ，来为该函数单独启用严格模式：

JavaScript 代码:

function hello() {
'use strict' return 'hey'
}

在遗留代码上操作时，这很有用，在遗留代码中你没有时间进行测试，也可能没有信心在整个文件上启用严格模式。

严格模式改变了什么

意外的全局变量

如果为未声明的变量赋值，则默认情况下 JavaScript 会在全局对象上创建该变量：

JavaScript 代码:

;(function() {
variable = 'hey'
})()(() => {
name = 'Flavio'
})()variable //'hey'
name //'Flavio'

转到严格模式，如果你尝试执行上面的操作，则会出现错误：

JavaScript 代码:

;(function() {
'use strict'
variable = 'hey'
})()(() => {
'use strict'
myname = 'Flavio'
})()

分配错误

JavaScript 中会隐式转换一些值。

在严格模式下，这些隐式转换会抛出错误：

JavaScript 代码:

undefined = 1(() => {
'use strict'
undefined = 1
})()

这同样适用于 Infinity，NaN，eval ，arguments 等。

在 JavaScript 中，可以使用下面代码定义对象属性不可写

JavaScript 代码:

const car = {}
Object.defineProperty(car, 'color', { value: 'blue', writable: false })

在严格模式下，你不能覆盖这个值，但在非严格模式下可以这么做：

和 getters 的原理一样：

JavaScript 代码:

const car = {
get color() {
return 'blue'
}
}
car.color = 'red'(
//ok () => {
'use strict'
car.color = 'yellow' //TypeError: Cannot set property color of # which has only a getter
}
)()

非严格模式允许扩展一个不可扩展的对象：

JavaScript 代码:

const car = { color: 'blue' }
Object.preventExtensions(car)car.model = 'Fiesta'(
//ok
() => {
'use strict'
car.owner = 'Flavio' //TypeError: Cannot add property owner, object is not extensible
}
)()

另外，非严格模式允许设置原始值的属性，而不会失败，但也没有做任何事情：

JavaScript 代码:

true.false = ''(
//''
1
).name =
'xxx' //'xxx'
var test = 'test' //undefined
test.testing = true //true
test.testing //undefined

在严格模式下，上面所有这些情况都会失败：

JavaScript 代码:

;(() => {
'use strict'
true.false = ''(
//TypeError: Cannot create property 'false' on boolean 'true'
1
).name =
'xxx' //TypeError: Cannot create property 'name' on number '1'
'test'.testing = true //TypeError: Cannot create property 'testing' on string 'test'
})()

删除错误

在非严格模式，如果你尝试删除无法删除的属性，JavaScript 只返回 false ，而在严格模式下，它会引发 TypeError：

JavaScript 代码:

delete Object.prototype(
//false () => {
'use strict'
delete Object.prototype //TypeError: Cannot delete property 'prototype' of function Object() { [native code] }
}
)()

具有相同名称的函数参数

在普通函数中，你可以使用重复的参数名称：

JavaScript 代码:

(function(a, a, b) {
console.log(a, b)
})(1, 2, 3)
//2 3(function(a, a, b) {
'use strict'
console.log(a, b)
})(1, 2, 3)
//Uncaught SyntaxError: Duplicate parameter name not allowed in this context

请注意，在这种情况下，箭头函数始终引发 SyntaxError：

JavaScript 代码:

((a, a, b) => {
console.log(a, b)
})(1, 2, 3)
//Uncaught SyntaxError: Duplicate parameter name not allowed in this context

八进制

JavaScript 代码:

console.log(010)
})()
//8(() => {
'use strict'
console.log(010)
})()
//Uncaught SyntaxError: Octal literals are not allowed in strict mode.

你仍然可以使用 0oXX 语法在严格模式下启用八进制数字：

JavaScript 代码:

;(() => {
'use strict'
console.log(0o10)
})()
//8

移除了 with

严格模式不能使用 with 关键字，以移除一些边缘情况，并允许在编译器层面进行更多优化。

▼原创系列推荐▼1.JavaScript 重温系列（22篇全）
2.ECMAScript 重温系列（10篇全）
3.JavaScript设计模式 重温系列（9篇全）
4.正则 / 框架 / 算法等 重温系列（16篇全）5.【汇总】59篇原创系列汇总

你点的每个赞，我都认真当成了喜欢