一、概述
除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict mode)。这种模式使得Javascript在更严格的条件下运行。
优点:
消除 Javascript 的一些静默错误,通过改变它们来抛出错误;
修复 JavaScript 引擎难以执行优化的错误:有时,使得同样的代码在严格模式下比非严格模式下运行得更快;
禁用了 ECMAScript 未来版本中可能会定义的一些语法;
"严格模式"体现了 Javascript 更合理、更安全、更严谨的发展方向,包括 IE10 在内的主流浏览器,都已经支持它,许多大项目已经开始全面拥抱它。
标志语句:use strict
老版本的浏览器会把它当做一行普通字符串而忽略。
二、调用
“严格模式”有 “针对整个脚本文件” 和 “针对单个函数” 两种调用场景。
1、针对整个脚本文件
将“use strict”放在脚本文件第一行,则整个脚本都将以“严格模式”运行。不放在第一行则无效,脚本以“正常模式”运行。(不利于文件合并)
<script>
"use strict";
console.log("严格模式。");
</script>
<script>
console.log("正常模式。");
</script>
2、针对单个函数
将“use strict”放在函数体第一行,则函数以“严格模式”运行。
function strict(){
"use strict";
return "严格模式。";
}
function notStrict() {
return "正常模式。";
}
3、脚本文件的变通写法
因为在脚本文件中调用的方法不利于文件合并,所以可借用第二种方法来进行调用。
即:将整个脚本文件内容放在一个立即执行的匿名函数中,改成了在单个函数中调用。
(function (){
"use strict";
// some code here
})();
三、严格模式有哪些不同
严格模式改变了语法及运行时行为。
变化通常分为以下几类:
将问题直接转化为错误(语法错误或运行时错误);
简化了如何为给定名称的特定变量计算;
简化了 eval 及 arguments;
可更简单地写“安全的 JavaScript”,改变了预测未来 ECMAScript 行为的方式。
第一类,将问题转化为错误
1、全局变量必须显示声明
正常模式下,一个变量如果没有声明,则默认为全局变量。
严格模式禁止这种用法,全局变量必须显示声明,否则会报错,如下:
正常模式:undefined
<script>
let width;
widht = 17;
console.log(width);
</script>
严格模式:报错
<script>
"use strict";
let width;
widht = 17;
console.log(width);
</script>
2、引起静默失败的赋值抛出异常
严格模式下会使引起静默失败(不报错也没有任何效果)的赋值操作抛出异常。
如:
NaN 是一个不可写的全局变量,给 NaN 赋值会抛出异常;
给不可写属性赋值会抛出异常;
给只读属性赋值会抛出异常;
给不可扩展对象赋值会抛出异常。
<script>
"use strict";
// 给不可写属性赋值
var obj1 = {};
Object.defineProperty(obj1, "x", {
value: 42,
writable: false
});
// obj1.x = 9; // 抛出TypeError错误
</script>
<script>
"use strict";
// 给只读属性赋值
var obj2 = {get x() {
return 17;
}
};
// obj2.x = 5; // 抛出TypeError错误
</script>
// 给不可扩展对象的新属性赋值
<script>
"use strict";
var fixed = {};
Object.preventExtensions(fixed);
fixed.newProp = "ohai"; // 抛出TypeError错误
</script>
3、删除变量或不可删除的属性会抛出异常
严格模式下无法删除变量。只有configurable设置为true的对象属性,才能被删除。
删除变量
"use strict";
var x;
delete x; // 语法错误
删除不可删除的属性
<script>
"use strict";
delete Object.prototype;
</script>
严格模式下,只有 configurable 设置为 true 的对象属性,才可删除。
"use strict";
var x;
delete x; // 语法错误
var o = Object.create(null, {'x': {
value: 1,
configurable: true
}});
delete o.x; // 删除成功
4、函数不能有重命名的参数
<script>
"use strict";
function f(a, a, b) { // 语法错误
return;
}
</script>
5、禁止八进制数字语法
ECMAScript 6中支持为一个数字加"0o"的前缀来表示八进制数.
<script>
"use strict";
var a = 0o10; // ES6: 八进制,a 为8
</script>
但若省略“0o”前缀:
<script>
"use strict";
var a = 010; //严格模式下,报错
</script>
<script>
var a = 010; //正常模式下:a 为 8
</script>
6、禁止设置primitive值的属性
ECMAScript 6中的严格模式禁止设置primitive值的属性,会抛出TypeError错误。如下:
<script>
"use strict";
false.true = ""; //TypeError
(14).sailing = "home"; //TypeError
"with".you = "far away"; //TypeError
</script>
第二类,简化变量的使用
JavaScript 有些情况会使得代码中名字到变量定义的基本映射(某些属性和方法到底属于哪一个对象)只在运行时才产生. 严格模式移除了大多数这种情况的发生, 所以编译器可以更好的优化严格模式的代码.
1、禁止使用 with 语句
with 所引起的问题是块内的任何名称可以映射(map)到with传进来的对象的属性, 也可以映射到包围这个块的作用域内的变量(甚至是全局变量), 这一切都是在运行时决定的,在代码运行之前是无法得知的。
严格模式下, 使用 with 会引起语法错误, 所以就不会存在 with 块内的变量在运行是才决定引用到哪里的情况了:
"use strict";
var x = 17;
with(obj) // !!! 语法错误
{
// 如果没有开启严格模式,with中的这个x会指向with上面的那个x,还是obj.x?
// 如果不运行代码,我们无法知道,因此,这种代码让引擎无法进行优化,速度也就会变慢。
x;
}
</script>
2、创设 eval 作用域
正常模式下,eval 可能引入的变量会覆盖它的外层变量;
严格模式下,eval 只影响它本身,不再作用于全局变量。
<script>
"use strict";
var x = 2;
console.info(eval("var x = 5; x")); // 5
console.info(x); // 2
</script>
<script>
var x = 2;
console.info(eval("var x = 5; x")); // 5
console.info(x); // 5
</script>
第三类,arguments 对象的限制
arguments是函数的参数对象,严格模式对它的使用做了限制。
1、不允许对arguments赋值
<script>
"use strict";
arguments++; // 语法错误
var obj = {set p(arguments) {}}; // 语法错误
try {} catch (arguments) {} // 语法错误
function arguments() {} // 语法错误
var f = new Function("arguments", "'use strict'; return 17;"); // 语法错误
</script>
2、arguments不再追踪参数的变化
<script>
function f(a) {
a = 2;
return [a, arguments[0]];
}
f(1); // 正常模式为[2,2]
function f(a) {
"use strict";
a = 2;
return [a, arguments[0]];
}
f(1); // 严格模式为[2,1]
</script>
3、禁止使用arguments.callee
<script>
"use strict";
var f = function() {
return arguments.callee;
};
f(); // 报错
</script>
<script>
function f1() {
console.log('正常模式', this) //指向全局对象 window
this.a = 1;
return !this;
} // 返回false,因为"this"指向全局对象,"!this"就是false
function f2() {
"use strict";
console.log('严格模式', this) //undefined
this.a = 1;
return !this;
} // 返回true,因为严格模式下,this的值为undefined,所以"!this"为true。
f1();
new f2();
</script>
第四类,增强的安全措施
1、禁止this关键字指向全局对象
严格模式下,禁止 this 指向全局对象,因此,在使用构造函数时,如果忘了加 new,this 不再指向全局对象,会报错。
<script>
function f1() {
console.log('正常模式', this) //指向全局对象 window
this.a = 1;
return !this;
} // 返回false,因为"this"指向全局对象,"!this"就是false
function f2() {
"use strict";
console.log('严格模式', this) //undefined
this.a = 1;
return !this;
} // 返回true,因为严格模式下,this的值为undefined,所以"!this"为true。
f1();
new f2();
</script>
2、禁止在函数内部遍历调用栈
<script>
function restricted() {
"use strict";
restricted.caller; // 抛出类型错误
restricted.arguments; // 抛出类型错误
}
function privilegedInvoker() {
return restricted();
}
privilegedInvoker();
</script>
第五类,为未来的ECMAScript版本铺平道路
未来版本的ECMAScript很有可能会引入新语法,ECMAScript5中的严格模式就提早设置了一些限制来减轻之后版本改变产生的影响。如果提早使用了严格模式中的保护机制,那么做出改变就会变得更容易。
1、保留字
首先,在严格模式中一部分字符变成了保留的关键字。这些字符包括implements, interface, let, package, private, protected, public, static和yield。在严格模式下,你不能再用这些名字作为变量名或者形参名。
<script>
function package(protected) { // !!!
"use strict";
var implements; // !!!
interface: // !!!
while (true) {
break interface; // !!!
}
function private() {} // !!!
}
function fun(static) {
'use strict';
} // !!!
</script>
浏览器的严格模式
主流浏览器现在实现了严格模式。但是不要盲目的依赖它,因为市场上仍然有大量的浏览器版本只部分支持严格模式或者根本就不支持(比如IE10之前的版本)。严格模式改变了语义。依赖这些改变可能会导致没有实现严格模式的浏览器中出现问题或者错误。谨慎地使用严格模式,通过检测相关代码的功能保证严格模式不出问题。最后,记得在支持或者不支持严格模式的浏览器中测试你的代码。如果你只在不支持严格模式的浏览器中测试,那么在支持的浏览器中就很有可能出问题,反之亦然。
参考:
http://www.ruanyifeng.com/blog/2013/01/javascript_strict_mode
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode