使用严格模式的目的

  • 消除JavaScript语法的一些不合理、不严谨,减少怪异行为
  • 消除代码运行的一些不安全之处,保证代码运行安全
  • 提高编译器效率,增加运行速度
  • 为未来新版本的JavaScript做好铺垫

使用严格模式

  • use strict

如果浏览器不支持严格模式浏览器会把它当作普通字符串被忽略

进入严格模式

1
'use strict'

调用方式

  • 针对整个脚本

"use strict"放在降本文件的第一行,则整个脚本都将以“严格模式”运行。如果这行语句不在第一行,则无效(仅针对整个脚本),整个脚本将以“正常模式”运行。如果不同模式的代码文件合并成一个文件,这一点需要特别注意。

严格地说,只要前面不是产生实际运行结果的语句,"use strict"可以不用在第一行,比如直接跟在一个空的分好后面。

1
2
3
4
5
6
7
<script type="text/javascript">
"use strict";
console.log('这是严格模式')
<script>
<script type="text/javascript">
console.log('这是正常模式')
</script>
  • 针对单个函数

"use strict"放在函数内的第一行,则整个函数以“严格模式”运行。

1
2
3
4
5
6
7
8
function strictModel(){
'use strict'
console.log('这是严格模式')
}

function notStrictModel(){
console.log('这是正常模式')
}
  • 脚本文件的变通写法(IIFE)

因为第一种调用方法不利于文件合并,所以更好的做法是,借用第二种方法,将整个脚本放在一个立即执行的匿名函数之中

1
2
3
4
(function(){
"use strict"
// Code
})();

语法和行为的改变

严格模式对JavaScript的语法和行为,都做了一些改变

全局变量显式声明

在正常模式中,如果一个变量没有声明就赋值,默认是全局变量。严格模式禁止这种用法,全局变量必须显式声明。

1
2
3
'use strict'
num = 1 // ReferenceError: num is not defined
for(i = 0; i < 10; i++){} // ReferenceError: i is not defined

静态绑定

JavaScript语言的一个特点,就是允许“动态绑定”,即某些属性和方法到底属于哪一个对象,不适在编译时确定的,而是在运行时(runtime)确定的。

严格模式对动态绑定做了一些限制。某些情况下,只允许静态绑定。也就是说,属性和方法到底归属哪个对象,在编译阶段就确定。这样做有利于编译效率的提高,也使得代码更容易阅读,更少出现意外

具体来说,涉及一下几个方面。

  • 禁止使用with语句

因为使用with语句就无法在编译时就确定,属性到底归属哪个对象

1
2
3
4
5
6
7
'use strict'
var el = document.getElementById('el')

with(el.style){ // SyntaxError: Strict mode code may not include a with statement
margin = 'auto'
padding = 'none'
}
  • 建立eval作用域

正常模式下,JavaScript语言有三种作用域(scope),全局作用域、函数作用域、块级作用域。严格模式下建立了第三种作用域:eval作用域

正常模式下,eval语句的作用域,取决于它处于全局作用域,还是处于函数作用域。严格模式下,eval语句本身就是一个作用域,不再能够生成全局变量了,它所生成的变量只能用于eval内部。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 严格模式
(function(){
'use strict'
var x = 2
console.info(eval('var x = 5;x')) // 输出:5
console.info(x) // 输出:2
})()

// 正常模式
(function(){
var y = 8
console.info(eval('var y = 5;y')) //输出:5
console.info(y) // 输出:5
})()

增强的安全措施

  • 禁止this关键字指向全局对象
1
2
3
4
5
6
7
8
9
10
11
12
13
// 正常模式
function notStrictModel(){
console.log(this)
// Chrome 输出 Window 对象
// Node.js输出 global 对象
}
// 严格模式
function strictModel(){
'use strict'
console.log(this)
// Chrome 输出 undefined
// Node.js输出 undefined
}

因此使用构造函数时,如果忘记加newthis不在指向全局对象而是报错。

1
2
3
4
5
6
7
8
function fn1(num){
'use strict'
this.a = num
console.log(this.a)
}
fn1(100) // TypeError: Cannot set property 'a' of undefined
// 使用 new 关键字
new fn1(100) // 输出:100
  • 禁止在函数内部遍历调用栈
1
2
3
4
5
6
7
8
function strictModel(){
'use strict'
console.log(strictModel.caller) //返回一个对函数的引用
console.log(strictModel.arguments) //返回一个对象并不是数组
console.log(strictModel.arguments.cllee)// 返回当前函数名
}
strictModel();
// TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
  • 禁止删除变量

严格模式下无法删除变量。只有configurable设置为true的对象属性才能被删除

1
2
3
4
5
6
7
8
9
10
11
'use strict'
var x
delete x;
// SyntaxError: Delete of an unqualified identifier in strict mode.

var o = Object.create(null,{'x':{
value:1,
configurable:true
}})
var state = delete o.x
console.log(state) // true 删除成功
  • 显式报错

正常模式下,对一个对象的只读属性执行赋值不会报错,只会默默地失败。严格模式下,将会报错。

1
2
3
4
5
6
7
8
'use strict'
var o = {}
Object.defineProperty(o, 'v', {
value: 1,
writable: false
})
o.v = 2
// TypeError: Cannot assign to read only property 'v' of object '#<Object>'

严格模式下,对一个使用getter方法读取的属性就行赋值,会报错

1
2
3
4
5
6
7
8
'use strict'
var o = {
get value(){
return 1
}
}
o.value = 2
// TypeError: Cannot set property value of #<Object> which has only a getter

严格模式下,对禁止扩展的对象添加新属性,将会报错。

1
2
3
4
5
'use strict'
var o = {}
Object.preventExtensions(o)
o.v = 1
// TypeError: Cannot add property v, object is not extensible

严格模式下,删除一个不可删除的属性,将会报错。

1
2
3
'use strict'
delete Object.prototype
// TypeError: Cannot delete property 'prototype' of function Object() { [native code] }

重名错误

严格模式新增了一些语法错误。

  • 函数不能有重名的参数

正常模式下,如果函数有多个重名的参数,可以使用aruments[index]读取。严格模式下,这属于语法错误

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

禁止八进制表示法

正常模式下,证书的第一位如果是0,表示这个是八进制数,如果0100等于十进制64。严格模式禁止这种表示法,整数第一位为0,将报错。

1
2
3
'use strict'
var num = 0100
// SyntaxError: Octal literals are not allowed in strict mode.

arguments对象限制

arguments是函数的参数对象,严格模式对它的使用做了限制。

  • 不允许对arguments赋值
1
2
3
4
5
6
7
8
9
10
11
'use strict'
arguments++
// SyntaxError: Unexpected eval or arguments in strict mode
var obj = { set p(arguments) { } };
// SyntaxError: Unexpected eval or arguments in strict mode
try { } catch (arguments) { }
// SyntaxError: Unexpected eval or arguments in strict mode
function arguments() { }
// SyntaxError: Unexpected eval or arguments in strict mode
var f = new Function("arguments", "'use strict'; return 17;")
// SyntaxError: Unexpected eval or arguments in strict mode
  • arguments不再追踪参数的变化
1
2
3
4
5
6
7
8
9
10
11
12
13
// 正常模式
function notStrictModel(num){
num = 2
console.log(arguments[0]) //正常模式下 arguments 会被修改 输出:2
}
notStrictModel(10)

function strictModel(num){
'use strict'
num = 2
console.log(arguments[0]) //严格模式下 arguments 不会被修改 输出:10
}
strictModel(10)
  • 禁止使用arguments.callee

这就意味着,无法在匿名函数内部调用自身了。

1
2
3
4
5
var f = function () {
'use strict'
return arguments.callee
}
f() // TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them

保留字

1
2
3
implements interface let const async await
package private public static yield class
enum exports extends super

使用这些词作为变量名将会报错。

1
2
3
4
5
'use strict'
function package(await){
var static
}
// SyntaxError: Unexpected strict mode reserved word

参考连接