JavaScript 严格模式（Strict Mode） – JavaScript 完全手册（2018版）

小编推荐： 掘金是一个面向 程序员 的高质量技术社区，从 一线大厂经验分享到前端开发最佳实践，无论是入门还是进阶，来掘金你不会错过前端开发的任何一个技术干货。

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

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

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

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

如何开启用格模式

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

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

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

'use strict'

const name = 'Flavio'
const hello = () => 'hey'

//...

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

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

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

严格模式改变了什么

意外的全局变量

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

;(function() {
  variable = 'hey'
})()

(() => {
  name = 'Flavio'
})()

variable //'hey'
name //'Flavio'

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

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

(() => {
  'use strict'
  myname = 'Flavio'
})()

分配错误

JavaScript 中会隐式转换一些值。

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

undefined = 1

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

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

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

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

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

和 getters 的原理一样：

const car = {
  get color() {
    return 'blue'
  }
}
car.color = 'red'(
  //ok

  () => {
    'use strict'
    car.color = 'yellow' //TypeError: Cannot set property color of #<object> which has only a getter
  }
)()
</object>

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

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
  }
)()

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

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

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

;(() => {
  '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：

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

具有相同名称的函数参数

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

(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：

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

八进制

八进制语法在严格模式下是禁用的。默认情况下，将 0 置于八进制数字格式兼容的数字之前，会使其被解释为八进制数字(有时令人困惑):

(() => {
  console.log(010)
})()
//8

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

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

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

移除了 with

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

如果你觉得本文对你有帮助，那就请分享给更多的朋友

关注「前端干货精选」加星星，每天都能获取前端干货