JavaScript 严格模式学习

一、概述

除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict mode)。这种模式使得Javascript在更严格的条件下运行。

优点:

消除 Javascript 的一些静默错误,通过改变它们来抛出错误;
修复 JavaScript 引擎难以执行优化的错误:有时,使得同样的代码在严格模式下比非严格模式下运行得更快;
禁用了 ECMAScript 未来版本中可能会定义的一些语法;

"严格模式"体现了 Javascript 更合理更安全更严谨的发展方向,包括 IE10 在内的主流浏览器,都已经支持它,许多大项目已经开始全面拥抱它。

标志语句:use strict

老版本的浏览器会把它当做一行普通字符串而忽略。

二、调用

“严格模式”有 “针对整个脚本文件”“针对单个函数” 两种调用场景。

1、针对整个脚本文件

将“use strict”放在脚本文件第一行,则整个脚本都将以“严格模式”运行。不放在第一行则无效,脚本以“正常模式”运行。(不利于文件合并)

  <script>
    "use strict";
    console.log("严格模式。");
  </script>
  <script>
    console.log("正常模式。");
        </script>

2、针对单个函数

将“use strict”放在函数体第一行,则函数以“严格模式”运行。

function strict(){
    "use strict";
    return "严格模式。";
}
function notStrict() {
    return "正常模式。";
}

3、脚本文件的变通写法

因为在脚本文件中调用的方法不利于文件合并,所以可借用第二种方法来进行调用。
即:将整个脚本文件内容放在一个立即执行的匿名函数中,改成了在单个函数中调用。

  (function (){
    "use strict";
    // some code here
   })();

三、严格模式有哪些不同

严格模式改变了语法及运行时行为。

变化通常分为以下几类:

将问题直接转化为错误(语法错误或运行时错误);
简化了如何为给定名称的特定变量计算;
简化了 eval 及 arguments;
可更简单地写“安全的 JavaScript”,改变了预测未来 ECMAScript 行为的方式。

第一类,将问题转化为错误

1、全局变量必须显示声明

正常模式下,一个变量如果没有声明,则默认为全局变量。
严格模式禁止这种用法,全局变量必须显示声明,否则会报错,如下:
正常模式:undefined

<script>
    let width;
    widht = 17;
    console.log(width);
</script>

严格模式:报错

<script>
    "use strict";
    let width;
    widht = 17;
    console.log(width);
</script>
2、引起静默失败的赋值抛出异常

严格模式下会使引起静默失败(不报错也没有任何效果)的赋值操作抛出异常。
如:

NaN 是一个不可写的全局变量,给 NaN 赋值会抛出异常;
给不可写属性赋值会抛出异常;
给只读属性赋值会抛出异常;
给不可扩展对象赋值会抛出异常。

<script>
"use strict";
// 给不可写属性赋值
var obj1 = {};
Object.defineProperty(obj1, "x", {
value: 42,
writable: false
});
// obj1.x = 9; // 抛出TypeError错误
</script>
<script>
"use strict";
// 给只读属性赋值
var obj2 = {get x() {
return 17;
}
};
// obj2.x = 5; // 抛出TypeError错误
</script>
// 给不可扩展对象的新属性赋值
<script>
"use strict";
var fixed = {};
Object.preventExtensions(fixed);
fixed.newProp = "ohai"; // 抛出TypeError错误
</script>
3、删除变量或不可删除的属性会抛出异常

严格模式下无法删除变量。只有configurable设置为true的对象属性,才能被删除。

删除变量

"use strict"; 
var x;  
delete x; // 语法错误

删除不可删除的属性

<script>
"use strict";
delete Object.prototype;
</script>

严格模式下,只有 configurable 设置为 true 的对象属性,才可删除。

  "use strict";
  var x;
  delete x; // 语法错误
  var o = Object.create(null, {'x': {
      value: 1,
      configurable: true
  }});
  delete o.x; // 删除成功
4、函数不能有重命名的参数
<script>
"use strict"; 
function f(a, a, b) { // 语法错误 
return;
}
</script>
5、禁止八进制数字语法

ECMAScript 6中支持为一个数字加"0o"的前缀来表示八进制数.

<script>
"use strict";
var a = 0o10; // ES6: 八进制,a 为8
</script>

但若省略“0o”前缀:

<script>
"use strict";
var a = 010;  //严格模式下,报错
</script>
<script>
var a = 010; //正常模式下:a 为 8
</script>
6、禁止设置primitive值的属性

ECMAScript 6中的严格模式禁止设置primitive值的属性,会抛出TypeError错误。如下:

<script>
"use strict";
false.true = ""; //TypeError
(14).sailing = "home"; //TypeError
"with".you = "far away"; //TypeError
</script>

第二类,简化变量的使用

JavaScript 有些情况会使得代码中名字到变量定义的基本映射(某些属性和方法到底属于哪一个对象)只在运行时才产生. 严格模式移除了大多数这种情况的发生, 所以编译器可以更好的优化严格模式的代码.

1、禁止使用 with 语句

with 所引起的问题是块内的任何名称可以映射(map)到with传进来的对象的属性, 也可以映射到包围这个块的作用域内的变量(甚至是全局变量), 这一切都是在运行时决定的,在代码运行之前是无法得知的。

严格模式下, 使用 with 会引起语法错误, 所以就不会存在 with 块内的变量在运行是才决定引用到哪里的情况了:

"use strict";
var x = 17;
with(obj) // !!! 语法错误
{
// 如果没有开启严格模式,with中的这个x会指向with上面的那个x,还是obj.x?
// 如果不运行代码,我们无法知道,因此,这种代码让引擎无法进行优化,速度也就会变慢。
x;
}
</script>
2、创设 eval 作用域

正常模式下,eval 可能引入的变量会覆盖它的外层变量;
严格模式下,eval 只影响它本身,不再作用于全局变量。

<script>
"use strict";   
var x = 2;  
console.info(eval("var x = 5; x")); // 5   
console.info(x); // 2
</script>
<script> 
var x = 2; 
console.info(eval("var x = 5; x")); // 5  
console.info(x); // 5
</script>

第三类,arguments 对象的限制

arguments是函数的参数对象,严格模式对它的使用做了限制。

1、不允许对arguments赋值
<script>
"use strict";
arguments++; // 语法错误
var obj = {set p(arguments) {}}; // 语法错误
try {} catch (arguments) {} // 语法错误
function arguments() {} // 语法错误
var f = new Function("arguments", "'use strict'; return 17;"); // 语法错误
</script>
2、arguments不再追踪参数的变化
<script>
function f(a) { 
a = 2;
return [a, arguments[0]];  
}   
f(1); // 正常模式为[2,2]  
function f(a) {  
"use strict";  
a = 2; 
return [a, arguments[0]]; 
}   
f(1); // 严格模式为[2,1]
</script>
3、禁止使用arguments.callee
<script>
"use strict";  
var f = function() {
return arguments.callee;
};  
f(); // 报错
</script>
<script>
function f1() { 
console.log('正常模式', this)    //指向全局对象 window
this.a = 1;
return !this;  
}   // 返回false,因为"this"指向全局对象,"!this"就是false
function f2() {
"use strict"; 
console.log('严格模式', this)      //undefined
this.a = 1;
return !this;  
}   // 返回true,因为严格模式下,this的值为undefined,所以"!this"为true。
f1();
new f2();
</script>

第四类,增强的安全措施

1、禁止this关键字指向全局对象

严格模式下,禁止 this 指向全局对象,因此,在使用构造函数时,如果忘了加 new,this 不再指向全局对象,会报错。

<script>
function f1() { 
console.log('正常模式', this)    //指向全局对象 window
this.a = 1;
return !this; 
}   // 返回false,因为"this"指向全局对象,"!this"就是false
function f2() {   
"use strict"; 
console.log('严格模式', this)      //undefined
this.a = 1;
return !this; 
}   // 返回true,因为严格模式下,this的值为undefined,所以"!this"为true。
f1();
new f2();
</script>
2、禁止在函数内部遍历调用栈
<script>
function restricted() {
"use strict";
restricted.caller; // 抛出类型错误
restricted.arguments; // 抛出类型错误
}
function privilegedInvoker() {
return restricted();
}
privilegedInvoker();
</script>

第五类,为未来的ECMAScript版本铺平道路

未来版本的ECMAScript很有可能会引入新语法,ECMAScript5中的严格模式就提早设置了一些限制来减轻之后版本改变产生的影响。如果提早使用了严格模式中的保护机制,那么做出改变就会变得更容易。

1、保留字

首先,在严格模式中一部分字符变成了保留的关键字。这些字符包括implements, interface, let, package, private, protected, public, static和yield。在严格模式下,你不能再用这些名字作为变量名或者形参名。

<script>
function package(protected) { // !!!
"use strict";
var implements; // !!!
interface: // !!!
while (true) {
break interface; // !!!
}
function private() {} // !!!
}
function fun(static) {
'use strict';
} // !!!
</script>

浏览器的严格模式

主流浏览器现在实现了严格模式。但是不要盲目的依赖它,因为市场上仍然有大量的浏览器版本只部分支持严格模式或者根本就不支持(比如IE10之前的版本)。严格模式改变了语义。依赖这些改变可能会导致没有实现严格模式的浏览器中出现问题或者错误。谨慎地使用严格模式,通过检测相关代码的功能保证严格模式不出问题。最后,记得在支持或者不支持严格模式的浏览器中测试你的代码。如果你只在不支持严格模式的浏览器中测试,那么在支持的浏览器中就很有可能出问题,反之亦然。

参考:
http://www.ruanyifeng.com/blog/2013/01/javascript_strict_mode
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,376评论 6 491
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,126评论 2 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,966评论 0 347
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,432评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,519评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,792评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,933评论 3 406
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,701评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,143评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,488评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,626评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,292评论 4 329
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,896评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,742评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,977评论 1 265
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,324评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,494评论 2 348

推荐阅读更多精彩内容