严格模式

129 阅读3分钟

认识严格模式

在ECMAScript5标准中,JavaScript提出了严格模式的概念(Strict Mode)

  • 严格模式很好理解,是一种具有限制性的JavaScript模式,从而使代码隐式的脱离了 ”懒散(sloppy)模式“;
// 懒散模式
// JS代码本身非常灵活,不会报错
name = "why"
message = "hello world"
true.name = "123" // 静默错误,代码本身有问题但未造成什么影响而被忽略
  • 支持严格模式的浏览器在检测到代码中有严格模式时,会以更加严格的方式对代码进行检测和执行

严格模式对正常的JavaScript语义进行了一些限制:

  • 严格模式通过 抛出错误 来消除一些原有的 静默(silent)错误

  • 严格模式让JS引擎在执行代码时可以进行更多的优化(不需要对一些特殊的语法进行处理);

  • 严格模式禁用了在ECMAScript未来版本中可能会定义的一些语法;

    • 保留字:class/let/const(在es5还未保留字,es6中已升级为关键字)
    • 关键字:function/var/let
    • 保留字可能会在未来版本中升级为关键字,关键字不能作为标识符名字
    var class = "abc" // 在非严格模式下不会报错
    

开启严格模式

严格模式支持粒度话的迁移:

  • 可以支持在js文件中开启严格模式; “use strict”
  • 也支持对某一个函数开启严格模式;
  • 严格模式通过在文件或者函数开头使用 use strict 来开启。 image.png

严格模式常见限制

// "use strict"

// 1. 禁止意外创建全局变量
message = "Hello World" // 在非严格模式下为全局变量
console.log(message)

function foo() {
  age = 20 // 在非严格模式下为全局变量 ,严格模式下会报错:未定义
}

foo()
console.log(age)

// 2.不允许函数有相同的参数名称
function foo(x, y, x) {
  console.log(x, y, x) 
}

foo(10, 20, 30) // 在非严格模式下,第三个x会把第一个x覆盖 30 20 30 
// 严格模式 :Uncaught SyntaxError: Duplicate parameter name not allowed in this context


// 3.静默错误
true.name = "abc"
NaN = 123 // 严格模式下,NaN不允许赋值
var obj = {}
Object.defineProperty(obj, "name", {
  configurable: false, // 不可配置
  writable: false, // 不可写
  value: "why"
}) // 给obj加name属性
console.log(obj.name)
obj.name = "kobe" // 严格模式下,不允许对只读属性赋值

delete obj.name // 严格模式下,不能删除name属性

// 4.不允许使用原先的八进制格式 0123
var num = 0o123 // 0o八进制
var num2 = 0x123 // 0x十六进制
var num3 = 0b100 // 0b二进制
console.log(num, num2, num3)

// 5.with语句不允许使用

// 6.eval函数不会向上引用变量了
var jsString = '"use strict"; var message = "Hello World"; console.log(message);'
eval(jsString)

console.log(message)

严格模式下的this

"use strict"
// 在非严格模式下, 自执行函数(默认绑定)会指向window
// 在严格模式下, 自执行函数(默认绑定)会指向undefined

// 之前编写的代码中, 自执行函数我们是没有使用过this直接去引用window
function foo() {
  console.log(this)
}

var obj = {
  name: "why",
  foo: foo
}

foo()

obj.foo() // this仍指向obj
var bar = obj.foo
bar() // undefined

// setTimeout的this
// setTimeout黑盒子内部并非是自函数调用
// fn.apply(this => window)
setTimeout(function() {
  console.log(this) // window 
}, 1000);

image.png