深入理解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 相关文章推荐
js关于字符长度限制的问题示例探讨
Jan 24 Javascript
jQuery 实现侧边浮动导航菜单效果
Dec 26 Javascript
简介JavaScript中getUTCMonth()方法的使用
Jun 10 Javascript
Bootstrap每天必学之附加导航(Affix)插件
Apr 25 Javascript
JavaScript的this关键字的理解
Jun 18 Javascript
JS闭包与延迟求值用法示例
Dec 22 Javascript
判断滚动条滑到底部触发事件(实例讲解)
Nov 15 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
Dec 25 Javascript
vue下拉列表功能实例代码
Apr 08 Javascript
在Vue项目中使用snapshot测试的具体使用
Apr 16 Javascript
angular使用md5,CryptoJS des加密的方法
Jun 03 Javascript
vue实现防抖的实例代码
Jan 11 Vue.js
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 特殊字符处理函数
2008/09/05 PHP
Array of country list in PHP with Zend Framework
2011/10/17 PHP
php curl模拟post提交数据示例
2013/12/31 PHP
推荐几个开源的微信开发项目
2014/12/28 PHP
php array_map使用自定义的函数处理数组中的每个值
2016/10/26 PHP
PHP基于ICU扩展intl快速实现汉字转拼音及按拼音首字母分组排序的方法
2017/05/03 PHP
yii框架redis结合php实现秒杀效果(实例代码)
2017/10/26 PHP
为Plesk PHP7启用Oracle OCI8扩展方法总结
2019/03/29 PHP
jQuery+PHP实现图片上传并提交功能
2020/07/27 PHP
两个JavaScript jsFiddle JSBin在线调试器
2010/03/14 Javascript
关于js注册事件的常用方法
2013/04/03 Javascript
js的onload事件及初始化按钮事件示例代码
2013/09/25 Javascript
javascript自定义的addClass()方法
2014/05/28 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
2016/09/26 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
2017/02/27 Javascript
Express之托管静态文件的方法
2018/06/01 Javascript
JQuery通过后台获取数据遍历到前台的方法
2018/08/13 jQuery
Vue 中可以定义组件模版的几种方式
2019/08/06 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
2019/09/09 Javascript
详解Vue 的异常处理机制
2020/11/30 Vue.js
从零学Python之入门(三)序列
2014/05/25 Python
python 垃圾收集机制的实例详解
2017/08/20 Python
matplotlib 纵坐标轴显示数据值的实例
2018/05/25 Python
Python实现监控键盘鼠标操作示例【基于pyHook与pythoncom模块】
2018/09/04 Python
对Python 3.2 迭代器的next函数实例讲解
2018/10/18 Python
Python socket聊天脚本代码实例
2020/01/02 Python
泰国Robinson百货官网:购买知名品牌的商品
2020/02/08 全球购物
最新计算机专业自荐信
2013/10/16 职场文书
财务方面个人工作的自我评价
2013/12/28 职场文书
农村优秀教师事迹材料
2014/08/27 职场文书
2014年班主任德育工作总结
2014/12/05 职场文书
2015年党风廉政建设责任书
2015/01/29 职场文书
Python合并多张图片成PDF
2021/06/09 Python
基于Pygame实现简单的贪吃蛇游戏
2021/12/06 Python
Python如何将list中的string转换为int
2022/07/15 Ruby