深入理解javascript严格模式(Strict Mode)


Posted in Javascript onNovember 28, 2014

ECMAScript5中引入的严格模式,通过让JavaScript运行环境对一些开发过程中最常见和不易发现的错误做出和当前不同的处理,来让开发者拥有一个”更好”的JavaScript语言。很长一段时间内,由于只有Firefox支持严格模式,我曾对严格模式表示怀疑。但到了今天,所有主流的浏览器都在他们的最新版本中支持了严格模式(包括IE10,Opera12和Android4,IOS5)是时候开始使用严格模式了。

严格模式能起到什么作用?

严格模式为JavaScript引入了很多变化,我把他们分为两类(明显的和细微的)。细微改进的目标是修复当前JavaScript中的一些细节问题,对于这些问题我不在这里进行深入介绍;如果你有兴趣,请阅读Dmitry Soshnikov撰写的精彩文档ECMA-262-5 in Detail Chapter 2 Strict Mode。 我在这里主要介绍严格模式引入的明显变化,那些在你使用严格模式前应该知道的概念和那些对你帮助最大的改变。

在开始学习具体特性前,请记住严格模式的一大目标是让你能更快更方便的调试。运行环境在发现问题时显性的抛出错误比默不做声的失败或怪异行事(未开启严格模式的JavaScript运行环境经常这样)要好。严格模式会抛出更多错误,但这是好事,因为这些错误会唤起你注意并修复很多以前很难被发现的潜在问题。

去除WITH关键词

首先,严格模式中去除了with语句,包含with语句的代码在严格模式中会抛出异常。所以使用严格模式的第一步:确保你的代码中没有使用with。

// 在严格模式中以下JavaScript代码会抛出错误

with (location) {

    alert(href);

}

防止意外为全局变量赋值

其次,局部变量在赋值前必须先进行申明。在启用严格模式之前,为一个未申明的局部变量复制时会自动创建一个同名全局变量。这是Javacript程序中最容易出现的错误之一, 在严格模式中尝试这么做时会有显性的异常抛出。

// 严格模式下会抛出异常

(function() {

    someUndeclaredVar = "foo";

}());

函数中的THIS不再默认指向全局

严格模式中另一个重要的变化是函数中未被定义或为空( 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()语句最终没有被移除,但在严格模式中仍然对它进行了一些改进。最大的改变是在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”就假定余下的代码能正常工作。最后,请在严格模式下开始编写更好的代码。

注:
这里有各款浏览器对严格模式支持情况的一个汇总。
可以在这个页面对当前浏览器的严格模式支持度进行测试。

严格模式的优势:

使JavaScript更牢固
1.      This不再被封装,在normal mode下,this一直是对象。
2.      Fun.caller和fun.arguments即不是可以删除的属性,也不能被set或retrieved。
3.      Arguments.caller也是不可以删除的属性,也不能set或retrieved。

为将来的ECMAScript版本铺平道路
1.      增加了下列保留字:implements, interface, let,package, private, protected, public, static和yield 。
2.      方法声明应该放在脚本或方法的最前面,不能放在if或for等语句中间。

Javascript 相关文章推荐
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
Sep 25 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
Oct 22 Javascript
实现51Map地图接口(示例代码)
Nov 22 Javascript
jQuery 处理页面的事件详解
Jan 20 Javascript
纯JavaScript实现的分页插件实例
Jul 14 Javascript
javascript实现密码验证
Nov 10 Javascript
jQuery 遍历map()方法详解
Nov 04 Javascript
详解vue.js下引入百度地图jsApi的两种方法
Jul 27 Javascript
在Vue项目中使用snapshot测试的具体使用
Apr 16 Javascript
js/jQuery实现全选效果
Jun 17 jQuery
vue element upload组件 file-list的动态绑定实现
Oct 11 Javascript
JS实现简易贪吃蛇游戏
Aug 24 Javascript
jquery+php实现搜索框自动提示
Nov 28 #Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
Nov 28 #Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
Nov 28 #Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
Nov 28 #Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
Nov 28 #Javascript
开源的javascript项目Kissy介绍
Nov 28 #Javascript
对比分析json及XML
Nov 28 #Javascript
You might like
PHP 杂谈《重构-改善既有代码的设计》之五 简化函数调用
2012/05/07 PHP
深入array multisort排序原理的详解
2013/06/18 PHP
thinkphp3查询mssql数据库乱码解决方法分享
2014/02/11 PHP
可以文本显示的公告栏的js代码
2007/03/11 Javascript
锋利的jQuery jQuery中的DOM操作
2010/03/21 Javascript
用js格式化金额可设置保留的小数位数
2014/05/09 Javascript
JavaScript中pop()方法的使用教程
2015/06/09 Javascript
JavaScript学习笔记之数组去重
2016/03/23 Javascript
JS操作JSON方法总结(推荐)
2016/06/14 Javascript
图文详解JavaScript的原型对象及原型链
2016/08/02 Javascript
解析JavaScript数组方法reduce
2016/12/12 Javascript
JS中Array数组学习总结
2017/01/18 Javascript
原生javascript实现读写CSS样式的方法详解
2017/02/20 Javascript
ejsExcel模板在Vue.js项目中的实际运用
2018/01/27 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
2018/10/01 Javascript
Vue项目引发的「过滤器」使用教程
2019/03/12 Javascript
layui框架与SSM前后台交互的方法
2019/09/12 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
2020/08/11 Javascript
python搭建微信公众平台
2016/02/09 Python
举例简单讲解Python中的数据存储模块shelve的用法
2016/03/03 Python
python去除文件中空格、Tab及回车的方法
2016/04/12 Python
Selenium chrome配置代理Python版的方法
2018/11/29 Python
Python进阶之迭代器与迭代器切片教程
2020/01/29 Python
美国百年历史早餐食品供应商:Wolferman’s
2017/01/18 全球购物
GAP阿联酋官网:GAP UAE
2017/11/30 全球购物
Michael Kors澳大利亚官网:世界知名的奢侈饰品和成衣设计师
2020/02/13 全球购物
小学生自我评价范例
2013/09/24 职场文书
写给女生的道歉信
2014/01/08 职场文书
冰淇淋店的创业计划书
2014/02/07 职场文书
运动会通讯稿200字
2014/02/16 职场文书
元旦红领巾广播稿
2014/02/19 职场文书
数控技校生自我鉴定
2014/03/02 职场文书
三严三实心得体会范文
2014/10/13 职场文书
2015年教师新年寄语
2014/12/08 职场文书
体育教师研修感悟
2015/11/18 职场文书
祝福语集锦:给满月宝宝的祝福语
2019/11/20 职场文书