随着WebApp日新月异的发展，Javascript写的WebApp规模越来月庞大，好比典型的表明产品腾讯WebQQ、HTML5游戏等等，Javascript愈来愈须要大量的开发人员多多人协做开发。同时HTML五、CSS3等新技术和NodeJs项目的高速发展，这几年JavaScript语言借着各类新API陆续被运用到从移动设备到服务器的多个”新领域”中。javascript
但JavaScript语言自身因为ECMAScript第四版被放弃而一直没有多少改进。和借HTML5之名过分宣传的各类新API相比,语法层面经过严格模式(Strict Mode)进行的改进几乎能够用鲜为人知来形容。学习了解严格模式以后,就算不立刻进行实践,也会让咱们对JavaScript中坏气味的一方面有更清晰的认识,从而帮助咱们写出更好的代码。
下面的内容翻译自It’s time to start using JavaScript strict mode,做者Nicholas C.Zakas参与了YUI框架的开发,并撰写了多本前端技术书籍,在我看过关于JavaScript严格模式的入门介绍文章中,这篇是写得最好的。html
ECMAScript5中引入的严格模式,经过让JavaScript运行环境对一些开发过程当中最多见和不易发现的错误作出和当前不一样的处理,来让开发者拥有一个”更好”的JavaScript语言。很长一段时间内,因为只有Firefox支持严格模式,我曾对严格模式表示怀疑。但到了今天,全部主流的浏览器都在他们的最新版本中支持了严格模式(包括IE10,Opera12和Android4,IOS5)是时候开始使用严格模式了。前端
严格模式为JavaScript引入了不少变化,我把他们分为两类(明显的和细微的)。细微改进的目标是修复当前JavaScript中的一些细节问题,对于这些问题我不在这里进行深刻介绍;若是你有兴趣,请阅读Dmitry Soshnikov撰写的精彩文档ECMA-262-5 in Detail Chapter 2 Strict Mode。 我在这里主要介绍严格模式引入的明显变化,那些在你使用严格模式前应该知道的概念和那些对你帮助最大的改变。java
在开始学习具体特性前,请记住严格模式的一大目标是让你能更快更方便的调试。运行环境在发现问题时显性的抛出错误比默不作声的失败或怪异行事(未开启严格模式的JavaScript运行环境常常这样)要好。严格模式会抛出更多错误,但这是好事,由于这些错误会唤起你注意并修复不少之前很难被发现的潜在问题。web
首先,严格模式中去除了with语句,包含with语句的代码在严格模式中会抛出异常。因此使用严格模式的第一步:确保你的代码中没有使用with。express
// 在严格模式中如下JavaScript代码会抛出错误
with (location) {
alert(href);
}
其次,局部变量在赋值前必须先进行申明。在启用严格模式以前,为一个未申明的局部变量复制时会自动建立一个同名全局变量。这是Javacript程序中最容易出现的错误之一, 在严格模式中尝试这么作时会有显性的异常抛出。浏览器
// 严格模式下会抛出异常
(function() {
someUndeclaredVar = "foo";
}());
严格模式中另外一个重要的变化是函数中未被定义或为空( null or undefined)的this不在默认指向全局环境(global)。这会形成一些依赖函数中默认this行为的代码执行出错,例如:安全
window.color = "red";
function sayColor() {
alert(this.color);
}
// 在strict模式中会报错, 若是不在严格模式中则提示 “red"
sayColor();
// 在strict模式中会报错, 若是不在严格模式中则提示 “red"
sayColor.call(null);
this在被赋值以前会一直保持为undefined,这意味着当一个构造函数在执行时,若是以前没有明确的new关键词,会抛出异常。服务器
function Person(name) {
this.name = name;
}
//在严格模式中会报错
var me = Person("Nicholas");
在上面的代码中,Person构造函数运行时由于以前没有new,函数中的this会保留为undefined, 因为你不能为undefined设置属性,上面的代码会抛出错误。 在非strict模式环境中,没有被复制的this会默认指向window全局变量,运行的结果将是意外的为window全局变量设置name属性。框架
当编写大量代码时,对象属性和函数参数很容易一不当心被设置成一个重复的名字。严格模式在这种状况下会显性的抛出错误
//重复的变量名,在严格模式下会报错
function doSomething(value1, value2, value1) {
//code
}
//重复的对象属性名,在严格模式下会报错:
var object = {
foo: "bar",
foo: "baz"
};
以上的代码在严格模式中都会被认为是语法错误而在执行前就让你能获得提示。
虽然eval()语句最终没有被移除,但在严格模式中仍然对它进行了一些改进。最大的改变是在eval()中执行的变量和函数申明不会直接在当前做用域中建立相应变量或函数,例如:
(function() {
eval("var x = 10;");
// 非严格模式中,alert 10
// 严格模式中则因x未被定义而抛出异常,
alert(x);
}());
任何在eval()执行过程当中建立的变量或者函数保留在eval()中。但你能明确的从eval()语句的返回值来获取eval()中的执行结果,例如:
(function() {
var result = eval("var x = 10, y = 20; x + y");
// 在strict或非strict模式中都能正确的运行余下的语句.(resulst为30)
alert(result);
}());
ECMAScript5中还引入为对象的特定属性设为只读,或让整个对象不可修改的能力。 但在非严格模式中,尝试修改一个只读属性只会默不作声的失败。 在你和一些浏览器原生API打交道过程当中,你极可能遇到这种状况。严格模式会在这种状况下明确的抛出异常,提醒你修改这个属性是不被容许的。
var person = {};
Object.defineProperty(person, "name" {
writable: false,
value: "Nicholas"
});
// 在非严格模式时,沉默的失败,在严格模式则抛出异常.
person.name = "John";
上面的例子中,name属性被设为只读,非严格模式中执行对name属性的修改不会引起报错,但修改不会成功。但严格模式则会明确的抛出异常。
NOTE: 强烈建议你在使用任何ECMAScript属性特性指定时开启严格模式。
在现代浏览器中开启严格模式很是容易,只须要在JavaScript代码中出现如下指令便可
"use strict";
虽然看上去上面的代码仅仅只是未赋予某个变量的字符串,它实际上起到指示JavaScript引擎切换到严格模式的做用(不支持严格模式的浏览器会忽略以上代码,不会对后续的执行产生任何影响)。虽然你能把这个指令做用到全局或某个函数中,但这里仍是要提醒,不要在全局环境下启用严格模式。
// 请不要这么使用
"use strict";
function doSomething() {
// 这部分代码会运行于严格模式
}
function doSomethingElse() {
// 这部分代码也会运行于严格模式
}
虽然上面的代码看起来不算一个大问题。但当你不负责维护页面中引入的所有代码时,这样使用strict模式会让你面临因为第三方代码没有为严格模式作好准备而引起的问题。
所以,最好把开启严格模式的指令做用于函数中,例如:
function doSomething() {
"use strict";
// 这个函数中的代码将会运行于严格模式
}
function doSomethingElse() {
// 这个函数中代码不会运行于严格模式
}
若是你想让严格模式在不止一个函数中开启,请使用当即执行函数表达式 (immediately-invoked function expression ,IIFE):
(function() {
"use strict";
function doSomething() {
// 这个函数运行于严格模式
}
function doSomethingElse() {
// 这个函数一样运行于严格模式
}
}());
我强烈建议你从如今开始就启用JavaScript严格模式,它能帮你发现代码中不曾注意到的错误。不要在全局环境中启用,但你能尽可能多的使用IIFE(当即执行函数表达式)来把严格模式做用到多个函数范围内。一开始,你会遇到以前不曾碰到过的错误提示,这是正常的。当启用严格模式后,请确保在支持的浏览器中作了测试,以发现新的潜在问题。必定不要仅仅在代码中添加一行”use strict”就假定余下的代码能正常工做。最后,请在严格模式下开始编写更好的代码。