JavaScript 嚴格模式

2023-03-20 15:50 更新

除了正常的運行模式,JavaScript 還有第二種運行模式:嚴格模式(strict mode)。顧名思義,這種模式采用更加嚴格的 JavaScript 語法。

同樣的代碼,在正常模式和嚴格模式中,可能會有不一樣的運行結(jié)果。一些在正常模式下可以運行的語句,在嚴格模式下將不能運行。

設計目的

早期的 JavaScript 語言有很多設計不合理的地方,但是為了兼容以前的代碼,又不能改變老的語法,只能不斷添加新的語法,引導程序員使用新語法。

嚴格模式是從 ES5 進入標準的,主要目的有以下幾個。

  • 明確禁止一些不合理、不嚴謹?shù)恼Z法,減少 JavaScript 語言的一些怪異行為。
  • 增加更多報錯的場合,消除代碼運行的一些不安全之處,保證代碼運行的安全。
  • 提高編譯器效率,增加運行速度。
  • 為未來新版本的 JavaScript 語法做好鋪墊。

總之,嚴格模式體現(xiàn)了 JavaScript 更合理、更安全、更嚴謹?shù)陌l(fā)展方向。

啟用方法

進入嚴格模式的標志,是一行字符串use strict。

'use strict';

老版本的引擎會把它當作一行普通字符串,加以忽略。新版本的引擎就會進入嚴格模式。

嚴格模式可以用于整個腳本,也可以只用于單個函數(shù)。

(1) 整個腳本文件

use strict放在腳本文件的第一行,整個腳本都將以嚴格模式運行。如果這行語句不在第一行就無效,整個腳本會以正常模式運行。(嚴格地說,只要前面不是產(chǎn)生實際運行結(jié)果的語句,use strict可以不在第一行,比如直接跟在一個空的分號后面,或者跟在注釋后面。)

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

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

上面代碼中,一個網(wǎng)頁文件依次有兩段 JavaScript 代碼。前一個<script>標簽是嚴格模式,后一個不是。

如果use strict寫成下面這樣,則不起作用,嚴格模式必須從代碼一開始就生效。

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

(2)單個函數(shù)

use strict放在函數(shù)體的第一行,則整個函數(shù)以嚴格模式運行。

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

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

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

有時,需要把不同的腳本合并在一個文件里面。如果一個腳本是嚴格模式,另一個腳本不是,它們的合并就可能出錯。嚴格模式的腳本在前,則合并后的腳本都是嚴格模式;如果正常模式的腳本在前,則合并后的腳本都是正常模式。這兩種情況下,合并后的結(jié)果都是不正確的。這時可以考慮把整個腳本文件放在一個立即執(zhí)行的匿名函數(shù)之中。

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

顯式報錯

嚴格模式使得 JavaScript 的語法變得更嚴格,更多的操作會顯式報錯。其中有些操作,在正常模式下只會默默地失敗,不會報錯。

只讀屬性不可寫

嚴格模式下,設置字符串的length屬性,會報錯。

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

上面代碼報錯,因為length是只讀屬性,嚴格模式下不可寫。正常模式下,改變length屬性是無效的,但不會報錯。

嚴格模式下,對只讀屬性賦值,或者刪除不可配置(non-configurable)屬性都會報錯。

// 對只讀屬性賦值會報錯
'use strict';
Object.defineProperty({}, 'a', {
  value: 37,
  writable: false
});
obj.a = 123;
// TypeError: Cannot assign to read only property 'a' of object #<Object>

// 刪除不可配置的屬性會報錯
'use strict';
var obj = Object.defineProperty({}, 'p', {
  value: 1,
  configurable: false
});
delete obj.p
// TypeError: Cannot delete property 'p' of #<Object>

只設置了取值器的屬性不可寫

嚴格模式下,對一個只有取值器(getter)、沒有存值器(setter)的屬性賦值,會報錯。

'use strict';
var obj = {
  get v() { return 1; }
};
obj.v = 2;
// Uncaught TypeError: Cannot set property v of #<Object> which has only a getter

上面代碼中,obj.v只有取值器,沒有存值器,對它進行賦值就會報錯。

禁止擴展的對象不可擴展

嚴格模式下,對禁止擴展的對象添加新屬性,會報錯。

'use strict';
var obj = {};
Object.preventExtensions(obj);
obj.v = 1;
// Uncaught TypeError: Cannot add property v, object is not extensible

上面代碼中,obj對象禁止擴展,添加屬性就會報錯。

eval、arguments 不可用作標識名

嚴格模式下,使用eval或者arguments作為標識名,將會報錯。下面的語句都會報錯。

'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ù)有多個重名的參數(shù),可以用arguments[i]讀取。嚴格模式下,這屬于語法錯誤。

function f(a, a, b) {
  'use strict';
  return a + b;
}
// Uncaught SyntaxError: Duplicate parameter name not allowed in this context

禁止八進制的前綴0表示法

正常模式下,整數(shù)的第一位如果是0,表示這是八進制數(shù),比如0100等于十進制的64。嚴格模式禁止這種表示法,整數(shù)第一位為0,將報錯。

'use strict';
var n = 0100;
// Uncaught SyntaxError: Octal literals are not allowed in strict mode.

增強的安全措施

嚴格模式增強了安全保護,從語法上防止了一些不小心會出現(xiàn)的錯誤。

全局變量顯式聲明

正常模式中,如果一個變量沒有聲明就賦值,默認是全局變量。嚴格模式禁止這種用法,全局變量必須顯式聲明。

'use strict';

v = 1; // 報錯,v未聲明

for (i = 0; i < 2; i++) { // 報錯,i 未聲明
  // ...
}

function f() {
  x = 123;
}
f() // 報錯,未聲明就創(chuàng)建一個全局變量

因此,嚴格模式下,變量都必須先聲明,然后再使用。

禁止 this 關鍵字指向全局對象

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

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

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

上面代碼中,嚴格模式的函數(shù)體內(nèi)部thisundefined。

這種限制對于構造函數(shù)尤其有用。使用構造函數(shù)時,有時忘了加new,這時this不再指向全局對象,而是報錯。

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

f();// 報錯,this 未定義

嚴格模式下,函數(shù)直接調(diào)用時(不使用new調(diào)用),函數(shù)內(nèi)部的this表示undefined(未定義),因此可以用call、applybind方法,將任意值綁定在this上面。正常模式下,this指向全局對象,如果綁定的值是非對象,將被自動轉(zhuǎn)為對象再綁定上去,而nullundefined這兩個無法轉(zhuǎn)成對象的值,將被忽略。

// 正常模式
function fun() {
  return this;
}

fun() // window
fun.call(2) // Number {2}
fun.call(true) // Boolean {true}
fun.call(null) // window
fun.call(undefined) // window

// 嚴格模式
'use strict';
function fun() {
  return this;
}

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

上面代碼中,可以把任意類型的值,綁定在this上面。

禁止使用 fn.callee、fn.caller

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

function f1() {
  'use strict';
  f1.caller;    // 報錯
  f1.arguments; // 報錯
}

f1();

禁止使用 arguments.callee、arguments.caller

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

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

f(); // 報錯

禁止刪除變量

嚴格模式下無法刪除變量,如果使用delete命令刪除一個變量,會報錯。只有對象的屬性,且屬性的描述對象的configurable屬性設置為true,才能被delete命令刪除。

'use strict';
var x;
delete x; // 語法錯誤

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

靜態(tài)綁定

JavaScript 語言的一個特點,就是允許“動態(tài)綁定”,即某些屬性和方法到底屬于哪一個對象,不是在編譯時確定的,而是在運行時(runtime)確定的。

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

具體來說,涉及以下幾個方面。

禁止使用 with 語句

嚴格模式下,使用with語句將報錯。因為with語句無法在編譯時就確定,某個屬性到底歸屬哪個對象,從而影響了編譯效果。

'use strict';
var v  = 1;
var obj = {};

with (obj) {
  v = 2;
}
// Uncaught SyntaxError: Strict mode code may not include a with statement

創(chuàng)設 eval 作用域

正常模式下,JavaScript 語言有兩種變量作用域(scope):全局作用域和函數(shù)作用域。嚴格模式創(chuàng)設了第三種作用域:eval作用域。

正常模式下,eval語句的作用域,取決于它處于全局作用域,還是函數(shù)作用域。嚴格模式下,eval語句本身就是一個作用域,不再能夠在其所運行的作用域創(chuàng)設新的變量了,也就是說,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)部是一個獨立作用域,所以內(nèi)部的變量x不會泄露到外部。

注意,如果希望eval語句也使用嚴格模式,有兩種方式。

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

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

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

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

變量arguments代表函數(shù)的參數(shù)。嚴格模式下,函數(shù)內(nèi)部改變參數(shù)與arguments的聯(lián)系被切斷了,兩者不再存在聯(liá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); // 嚴格模式為[2, 1]

上面代碼中,改變函數(shù)的參數(shù),不會反應到arguments對象上來。

向下一個版本的 JavaScript 過渡

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

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

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

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

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

上面代碼在if代碼塊和for代碼塊中聲明了函數(shù),ES5 環(huán)境會報錯。

注意,如果是 ES6 環(huán)境,上面的代碼不會報錯,因為 ES6 允許在代碼塊之中聲明函數(shù)。

保留字

為了向?qū)?JavaScript 的新版本過渡,嚴格模式新增了一些保留字(implements、interface、let、package、private、protected、public、static、yield等)。使用這些詞作為變量名將會報錯。

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

參考鏈接


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號