JavaScript 嚴(yán)格模式

目錄

除了正常的運(yùn)行模式，JavaScript還有第二種運(yùn)行模式：“嚴(yán)格模式”（strict mode）。顧名思義，這種模式采用更加嚴(yán)格的JavaScript語法。

同樣的代碼，在”正常模式“和”嚴(yán)格模式“中，可能會(huì)有不一樣的運(yùn)行結(jié)果。一些在”正常模式”下可以運(yùn)行的語句，在”嚴(yán)格模式”下將不能運(yùn)行。掌握這些內(nèi)容，有助于更細(xì)致深入地理解JavaScript，讓你變成一個(gè)更好的程序員。

設(shè)立”嚴(yán)格模式“的目的，主要有以下幾個(gè)。

• 明確禁止一些不合理、不嚴(yán)謹(jǐn)?shù)恼Z法，減少JavaScript的一些怪異行為。
• 增加更多報(bào)錯(cuò)的場(chǎng)合，消除代碼運(yùn)行的一些不安全之處，保證代碼運(yùn)行的安全。
• 提高編譯器效率，增加運(yùn)行速度。
• 為未來新版本的JavaScript做好鋪墊。

“嚴(yán)格模式”體現(xiàn)了JavaScript更合理、更安全、更嚴(yán)謹(jǐn)?shù)陌l(fā)展方向。

進(jìn)入“嚴(yán)格模式”的標(biāo)志，是一行字符串use strict。

'use strict';

老版本的瀏覽器會(huì)把它當(dāng)作一行普通字符串，加以忽略。新版本的瀏覽器就會(huì)進(jìn)入嚴(yán)格模式。

“嚴(yán)格模式”可以用于整個(gè)腳本，也可以只用于單個(gè)函數(shù)。

（1） 針對(duì)整個(gè)腳本文件

將use strict放在腳本文件的第一行，則整個(gè)腳本都將以“嚴(yán)格模式”運(yùn)行。如果這行語句不在第一行就無效，整個(gè)腳本會(huì)以“正常模式”運(yùn)行。(嚴(yán)格地說，只要前面不是產(chǎn)生實(shí)際運(yùn)行結(jié)果的語句，use strict可以不在第一行，比如直接跟在一個(gè)空的分號(hào)后面，或者跟在注釋后面。)

<script>
  'use strict';
  console.log('這是嚴(yán)格模式');
</script>

<script>
  console.log('這是正常模式');
</script>

上面的代碼表示，一個(gè)網(wǎng)頁(yè)文件中依次有兩段JavaScript代碼。前一個(gè)<script>標(biāo)簽是嚴(yán)格模式，后一個(gè)不是。

如果字符串use strict出現(xiàn)在代碼中間，則不起作用，即嚴(yán)格模式必須從代碼一開始就生效。

（2）針對(duì)單個(gè)函數(shù)

use strict放在函數(shù)體的第一行，則整個(gè)函數(shù)以“嚴(yán)格模式”運(yùn)行。

function strict() {
  'use strict';
  return '這是嚴(yán)格模式';
}

function strict2() {
  'use strict';
  function f() {
    return '這也是嚴(yán)格模式';
  }
  return f();
}

function notStrict() {
  return '這是正常模式';
}

（3）腳本文件的變通寫法

兩個(gè)不同模式的腳本合并成一個(gè)文件，如果嚴(yán)格模式的腳本在前，則合并后的腳本都是”嚴(yán)格模式“；如果正常模式的腳本在前，則合并后的腳本都是”正常模式“?？傊@兩種情況下，合并后的結(jié)果都是不正確的。

正確的做法是，使用前面第二種方法，將整個(gè)腳本文件放在一個(gè)立即執(zhí)行的匿名函數(shù)之中。

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

嚴(yán)格模式使得JavaScript的語法變得更嚴(yán)格，更多的操作會(huì)顯式報(bào)錯(cuò)。其中有些操作，在正常模式下只會(huì)默默地失敗，不會(huì)報(bào)錯(cuò)。

只讀屬性不可寫

嚴(yán)格模式下，設(shè)置字符串的length屬性，會(huì)報(bào)錯(cuò)。

'use strict';
'abc'.length = 5;
// TypeError: Cannot assign to read only property 'length' of string 'abc'

這是因?yàn)?code class="highlighter-rouge">length是只讀屬性。

var str = Object('abc');
Object.getOwnPropertyDescriptor(str, 'length')
// Object {
//   value: 3,
//   writable: false,
//   enumerable: false,
//   configurable: false
// }

嚴(yán)格模式下，對(duì)只讀屬性賦值，或者刪除不可配置（nonconfigurable）屬性都會(huì)報(bào)錯(cuò)。

// 對(duì)只讀屬性賦值會(huì)報(bào)錯(cuò)
'use strict';
var o = {};

Object.defineProperty(o, 'a', {
  value: 37,
  writable: false
});

o.a = 123;
// TypeError: Cannot assign to read only property 'a' of object #<Object>

// 刪除不可配置的屬性會(huì)報(bào)錯(cuò)
'use strict';
var o = Object.defineProperty({}, 'p', {
  value: 1,
  configurable: false
});

delete o.p
// TypeError: Cannot delete property 'p' of #<Object>

只設(shè)置了賦值器的屬性不可寫

嚴(yán)格模式下，對(duì)一個(gè)只設(shè)置了賦值器（getter）的屬性賦值，會(huì)報(bào)錯(cuò)。

'use strict';

var o = {
  get v() { return 1; }
};

o.v = 2; // 報(bào)錯(cuò)

禁止擴(kuò)展的對(duì)象不可擴(kuò)展

嚴(yán)格模式下，對(duì)禁止擴(kuò)展的對(duì)象添加新屬性，會(huì)報(bào)錯(cuò)。

'use strict';

var o = {};
Object.preventExtensions(o);
o.v = 1; // 報(bào)錯(cuò)

eval、arguments不可用作標(biāo)識(shí)名

嚴(yán)格模式下，使用eval或者arguments作為標(biāo)識(shí)名，將會(huì)報(bào)錯(cuò)。

下面的語句都會(huì)報(bào)錯(cuò)。

'use strict';
var eval = 17;
var arguments = 17;
var obj = { set p(arguments) { } };
try { } catch (arguments) { }
function x(eval) { }
function arguments() { }
var y = function eval() { };
var f = new Function('arguments', "'use strict'; return 17;");
// SyntaxError: Unexpected eval or arguments in strict mode

函數(shù)不能有重名的參數(shù)

正常模式下，如果函數(shù)有多個(gè)重名的參數(shù)，可以用arguments[i]讀取。嚴(yán)格模式下，這屬于語法錯(cuò)誤。

function f(a, a, b) { // 語法錯(cuò)誤
  'use strict';
  return a + b;
}

禁止八進(jìn)制的前綴0表示法

正常模式下，整數(shù)的第一位如果是0，表示這是八進(jìn)制數(shù)，比如0100等于十進(jìn)制的64。嚴(yán)格模式禁止這種表示法，整數(shù)第一位為0，將報(bào)錯(cuò)。

"use strict";
var n = 0100; // SyntaxError

嚴(yán)格模式增強(qiáng)了安全保護(hù)，從語法上防止了一些不小心會(huì)出現(xiàn)的錯(cuò)誤。

全局變量顯式聲明

在正常模式中，如果一個(gè)變量沒有聲明就賦值，默認(rèn)是全局變量。嚴(yán)格模式禁止這種用法，全局變量必須顯式聲明。

'use strict';

v = 1; // 報(bào)錯(cuò)，v未聲明

for (i = 0; i < 2; i++) { // 報(bào)錯(cuò)，i未聲明
  // ...
}

function f() {
  x = 123;
}
f() // 報(bào)錯(cuò)，未聲明就創(chuàng)建一個(gè)全局變量

因此，嚴(yán)格模式下，變量都必須先用var命令聲明，然后再使用。

禁止this關(guān)鍵字指向全局對(duì)象

正常模式下，函數(shù)內(nèi)部的this可能會(huì)指向全局對(duì)象，嚴(yán)格模式禁止這種用法，避免無意間創(chuàng)造全局變量。

// 正常模式
function f() {
  console.log(this === window);
}
f() // true

// 嚴(yán)格模式
function f() {
  'use strict';
  console.log(this === undefined);
}
f() // true

這種限制對(duì)于構(gòu)造函數(shù)尤其有用。使用構(gòu)造函數(shù)時(shí)，有時(shí)忘了加new，這時(shí)this不再指向全局對(duì)象，而是報(bào)錯(cuò)。

function f() {
  'use strict';
  this.a = 1;
};

f();// 報(bào)錯(cuò)，this未定義

嚴(yán)格模式下，函數(shù)直接調(diào)用時(shí)（不使用new調(diào)用），函數(shù)內(nèi)部的this表示undefined，因此可以用call、apply和bind方法，將任意值綁定在this上面。

'use strict';

function fun() {
  return this;
}

fun() //undefined
fun.call(2) // 2
fun.apply(null) // null
fun.call(undefined) // undefined
fun.bind(true)() // true

禁止使用fn.callee、fn.caller

函數(shù)內(nèi)部不得使用fn.caller、fn.arguments，否則會(huì)報(bào)錯(cuò)。這意味著不能在函數(shù)內(nèi)部得到調(diào)用棧了。

function f1() {
  'use strict';
  f1.caller;    // 報(bào)錯(cuò)
  f1.arguments; // 報(bào)錯(cuò)
}

f1();

禁止使用arguments.callee、arguments.caller

arguments.callee和arguments.caller是兩個(gè)歷史遺留的變量，從來沒有標(biāo)準(zhǔn)化過，現(xiàn)在已經(jīng)取消了。正常模式下調(diào)用它們沒有什么作用，但是不會(huì)報(bào)錯(cuò)。嚴(yán)格模式明確規(guī)定，函數(shù)內(nèi)部使用arguments.callee、arguments.caller將會(huì)報(bào)錯(cuò)。

'use strict';
var f = function() {
  return arguments.callee;
};

f(); // 報(bào)錯(cuò)

禁止刪除變量

嚴(yán)格模式下無法刪除變量，如果使用delete命令刪除一個(gè)變量，會(huì)報(bào)錯(cuò)。只有對(duì)象的屬性，且屬性的描述對(duì)象的configurable屬性設(shè)置為true，才能被delete命令刪除。

'use strict';
var x;
delete x; // 語法錯(cuò)誤

var o = Object.create(null, {
  x: {
    value: 1,
    configurable: true
  }
});
delete o.x; // 刪除成功

JavaScript語言的一個(gè)特點(diǎn)，就是允許“動(dòng)態(tài)綁定”，即某些屬性和方法到底屬于哪一個(gè)對(duì)象，不是在編譯時(shí)確定的，而是在運(yùn)行時(shí)（runtime）確定的。

嚴(yán)格模式對(duì)動(dòng)態(tài)綁定做了一些限制。某些情況下，只允許靜態(tài)綁定。也就是說，屬性和方法到底歸屬哪個(gè)對(duì)象，必須在編譯階段就確定。這樣做有利于編譯效率的提高，也使得代碼更容易閱讀，更少出現(xiàn)意外。

具體來說，涉及以下幾個(gè)方面。

禁止使用with語句

嚴(yán)格模式下，使用with語句將報(bào)錯(cuò)。因?yàn)?code class="highlighter-rouge">with語句無法在編譯時(shí)就確定，某個(gè)屬性到底歸屬哪個(gè)對(duì)象，從而影響了編譯效果。

'use strict';
var v  = 1;

with (o) { // SyntaxError
  v = 2;
}

創(chuàng)設(shè)eval作用域

正常模式下，JavaScript語言有兩種變量作用域（scope）：全局作用域和函數(shù)作用域。嚴(yán)格模式創(chuàng)設(shè)了第三種作用域：eval作用域。

正常模式下，eval語句的作用域，取決于它處于全局作用域，還是函數(shù)作用域。嚴(yán)格模式下，eval語句本身就是一個(gè)作用域，不再能夠在其所運(yùn)行的作用域創(chuàng)設(shè)新的變量了，也就是說，eval所生成的變量只能用于eval內(nèi)部。

(function () {
  'use strict';
  var x = 2;
  console.log(eval('var x = 5; x')) // 5
  console.log(x) // 2
})()

上面代碼中，由于eval語句內(nèi)部是一個(gè)獨(dú)立作用域，所以內(nèi)部的變量x不會(huì)泄露到外部。

注意，如果希望eval語句也使用嚴(yán)格模式，有兩種方式。

// 方式一
function f1(str){
  'use strict';
  return eval(str);
}
f1('undeclared_variable = 1'); // 報(bào)錯(cuò)


// 方式二
function f2(str){
  return eval(str);
}
f2('"use strict";undeclared_variable = 1')  // 報(bào)錯(cuò)

上面兩種寫法，eval內(nèi)部使用的都是嚴(yán)格模式。

arguments不再追蹤參數(shù)的變化

變量arguments代表函數(shù)的參數(shù)。嚴(yán)格模式下，函數(shù)內(nèi)部改變參數(shù)與arguments的聯(lián)系被切斷了，兩者不再存在聯(lián)動(dòng)關(guān)系。

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); // 嚴(yán)格模式為[2, 1]

上面代碼中，改變函數(shù)的參數(shù)，不會(huì)反應(yīng)到arguments對(duì)象上來。

JavaScript語言的下一個(gè)版本是ECMAScript 6，為了平穩(wěn)過渡，嚴(yán)格模式引入了一些ES6語法。

非函數(shù)代碼塊不得聲明函數(shù)

JavaScript的新版本ES6會(huì)引入“塊級(jí)作用域”。為了與新版本接軌，嚴(yán)格模式只允許在全局作用域或函數(shù)作用域聲明函數(shù)。也就是說，不允許在非函數(shù)的代碼塊內(nèi)聲明函數(shù)。

'use strict';
if (true) {
  function f1() { } // 語法錯(cuò)誤
}

for (var i = 0; i < 5; i++) {
  function f2() { } // 語法錯(cuò)誤
}

上面代碼在if代碼塊和for代碼塊中聲明了函數(shù)，在嚴(yán)格模式下都會(huì)報(bào)錯(cuò)。

保留字

為了向?qū)鞪avaScript的新版本過渡，嚴(yán)格模式新增了一些保留字：implements, interface, let, package, private, protected, public, static, yield。

使用這些詞作為變量名將會(huì)報(bào)錯(cuò)。

function package(protected) { // 語法錯(cuò)誤
  'use strict';
  var implements; // 語法錯(cuò)誤
}

此外，ECMAscript第五版本身還規(guī)定了另一些保留字（class, enum, export, extends, import, super），以及各大瀏覽器自行增加的const保留字，也是不能作為變量名的。

• MDN, Strict mode
• Dr. Axel Rauschmayer, JavaScript: Why the hatred for strict mode?
• Dr. Axel Rauschmayer，JavaScript’s strict mode: a summary
• Douglas Crockford, Strict Mode Is Coming To Town
• JavaScript Strict Mode Support