在JavaScript中使用严格模式(Strict Mode)


Posted in Javascript onJune 13, 2019

前言

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

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

严格模式为JavaScript引入了很多变化,我把他们分为两类(明显的和细微的)。细微改进的目标是修复当前JavaScript中的一些细节问题,对于这些问题我不在这里进行深入介绍;我在这里主要介绍严格模式引入的明显变化,那些在你使用严格模式前应该知道的概念和那些对你帮助最大的改变。

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

1. 去除with关键词

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

// 在严格模式中以下JavaScript代码会抛出错误
with (location) {
alert(href);
}

2. 防止意外为全局变量赋值

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

// 严格模式下会抛出异常
(function() {
someUndeclaredVar = "foo";
}());

3. 函数中的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属性。

4. 防止重名
当编写大量代码时,对象属性和函数参数很容易一不小心被设置成一个重复的名字。严格模式在这种情况下会显性的抛出错误

//重复的变量名,在严格模式下会报错
function doSomething(value1, value2, value1) {
//code
}
//重复的对象属性名,在严格模式下会报错:
var object = {
foo: "bar",
foo: "baz"
};

以上的代码在严格模式中都会被认为是语法错误而在执行前就让你能得到提示。

5. 安全的 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);
}());

6. 对只读属性修改时抛出异常

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 相关文章推荐
JavaScript 监听textarea中按键事件
Oct 08 Javascript
Exitjs获取DataView中图片文件名
Nov 26 Javascript
原生javascript实现图片轮播效果代码
Sep 03 Javascript
JQuery拖拽元素改变大小尺寸实现代码
Dec 10 Javascript
jquery select动态加载选择(兼容各种浏览器)
Feb 01 Javascript
jQuery中:radio选择器用法实例
Jan 03 Javascript
JavaScript获取URL汇总
Jun 08 Javascript
JQuery中DOM实现事件移除的方法
Jun 13 Javascript
JavaScript数值千分位格式化的两种简单实现方法
Aug 01 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
Jan 05 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
Oct 17 Javascript
Webpack优化配置缩小文件搜索范围
Dec 25 Javascript
详解vuex之store源码简单解析
Jun 13 #Javascript
vue store之状态管理模式的详细介绍
Jun 13 #Javascript
微信小程序页面间跳转传参方式总结
Jun 13 #Javascript
微信小程序位置授权处理方法
Jun 13 #Javascript
json数据格式常见操作示例
Jun 13 #Javascript
微信小程序实现渐入渐出动画效果
Jun 13 #Javascript
微信小程序前端自定义分享的实现方法
Jun 13 #Javascript
You might like
PHP脚本数据库功能详解(下)
2006/10/09 PHP
PHP同时连接多个mysql数据库示例代码
2014/03/17 PHP
php生成图片验证码-附五种验证码
2015/08/19 PHP
符合W3C网页标准的iframe标签的使用方法
2007/07/19 Javascript
js实现字符串的16进制编码不加密
2014/04/25 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
Bootstrap的图片轮播示例代码
2015/08/31 Javascript
老生常谈Javascript中的原型和this指针
2016/10/09 Javascript
Vue.js双向绑定实现原理详解
2016/12/22 Javascript
Vue.js原理分析之observer模块详解
2017/02/17 Javascript
nodejs密码加密中生成随机数的实例代码
2017/07/17 NodeJs
详解使用PM2管理nodejs进程
2017/10/24 NodeJs
vue项目前端埋点的实现
2019/03/06 Javascript
微信小程序Echarts图表组件使用方法详解
2019/06/25 Javascript
JavaScript实现随机点名器
2020/03/25 Javascript
Vue之封装公用变量以及实现方式
2020/07/31 Javascript
[42:34]VP vs VG 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
简述Python中的面向对象编程的概念
2015/04/27 Python
Python Flask前后端Ajax交互的方法示例
2018/07/31 Python
Django管理员账号和密码忘记的完美解决方法
2018/12/06 Python
python批量爬取下载抖音视频
2019/06/17 Python
解决python replace函数替换无效问题
2020/01/18 Python
使用python从三个角度解决josephus问题的方法
2020/03/27 Python
Sneaker Studio乌克兰:购买运动鞋
2018/03/26 全球购物
什么是WEB控件?使用WEB控件有哪些优势?
2012/01/21 面试题
关于元旦的广播稿
2014/02/16 职场文书
党员批评与自我批评(5篇)
2014/09/23 职场文书
汽车4S店销售经理岗位职责
2015/04/02 职场文书
员工年度工作总结2015
2015/05/18 职场文书
运动员加油词
2015/07/18 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书
python 实现的截屏工具
2021/05/08 Python
Python面向对象之内置函数相关知识总结
2021/06/24 Python
阿里云日志过滤器配置日志服务
2022/04/09 Servers
css样式important规则的正确使用方式
2022/06/10 HTML / CSS
python内置模块之上下文管理contextlib
2022/06/14 Python