在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 相关文章推荐
jQuery powerFloat万能浮动层下拉层插件使用介绍
Dec 27 Javascript
javascript之Partial Application学习
Jan 10 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
Nov 22 Javascript
浏览器窗口加载和大小改变事件示例
Feb 27 Javascript
用IE重起计算机或者关机的示例代码
Mar 10 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
Mar 03 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
Jun 01 Javascript
基于vue组件实现猜数字游戏
May 28 Javascript
详解webpack的proxyTable无效的解决方案
Jun 15 Javascript
jquery获取input输入框中的值
Nov 13 jQuery
利用 JavaScript 实现并发控制的示例代码
Dec 31 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基于base64解码图片与加密图片还原实例
2014/11/03 PHP
PHP Smarty模版简单使用方法
2016/03/30 PHP
PHP常用的三种设计模式
2017/02/17 PHP
JavaScript中setAttribute用法介绍
2013/07/20 Javascript
node.js中的buffer.write方法使用说明
2014/12/10 Javascript
JS给Textarea文本框添加行号的方法
2015/08/20 Javascript
jQuery使用getJSON方法获取json数据完整示例
2016/09/13 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
2017/01/18 Javascript
js return返回多个值,通过对象的属性访问方法
2017/02/21 Javascript
详解nodejs微信公众号开发——3.封装消息响应模块
2017/04/10 NodeJs
JS使用setInterval实现的简单计时器功能示例
2018/04/19 Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
2018/07/08 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
2019/11/15 Javascript
jQuery实现全选按钮
2021/01/01 jQuery
Python标准库之循环器(itertools)介绍
2014/11/25 Python
python入门之语句(if语句、while语句、for语句)
2015/01/19 Python
Python中的各种装饰器详解
2015/04/11 Python
Python发送以整个文件夹的内容为附件的邮件的教程
2015/05/06 Python
在Python的Django框架中更新数据库数据的方法
2015/07/17 Python
python直接获取API传递回来的参数方法
2018/12/17 Python
爬虫代理池Python3WebSpider源代码测试过程解析
2019/12/20 Python
在tensorflow中设置保存checkpoint的最大数量实例
2020/01/21 Python
python 获取当前目录下的文件目录和文件名实例代码详解
2020/03/10 Python
Python通过4种方式实现进程数据通信
2020/03/12 Python
python和php哪个容易学
2020/06/19 Python
python 简单的调用有道翻译
2020/11/25 Python
King Apparel官网:英国街头服饰品牌
2019/09/05 全球购物
英国领先的游戏零售商:GAME
2019/09/24 全球购物
初中体育教学反思
2014/01/14 职场文书
大学国际贸易专业自荐信
2014/06/05 职场文书
保险公司开门红口号
2014/06/21 职场文书
党员领导干部民主生活会批评与自我批评发言
2014/09/28 职场文书
2014年反腐倡廉工作总结
2014/12/05 职场文书
MySQL 查询速度慢的原因
2021/05/25 MySQL
css height属性中的calc方法详解
2021/06/03 HTML / CSS