Something About JavaScript
Search…
Day 12：看 Strict Mode 如何施展「還我漂亮拳」(1)
Day11 的文章介紹 JavaScript 中的嚴謹模式 (Strict Mode) 是什麼、如何使用、為什麼要用，並舉了簡單的例子來示範。
嚴謹模式 (Strict Mode) 就像 JavaScript 中的「還我漂亮拳」，能夠讓原本不夠嚴謹、造成混亂的語法，變得更安全、乾淨。
「不允許使用未宣告的變數」只是嚴謹模式最簡單的應用，事實上嚴謹模式發揮的地方非常多。
接下來會用各種例子來檢視嚴謹模式使用前和使用後的效果。
嚴謹模式下你不能做的事
1. 不能使用未宣告的變數
- 強化變數的控管，快速發現打錯變數名稱的 Bug。
- 避免不小心產生不必要的 Global 變數 (賦值給尚未宣告的變數，JavaScript 預設行為會產生 Global 變數)。
錯誤類型：ReferenceError: x is not defined
使用前：
1
x = 3.14;
2
console.log(x); // 3.14
Copied!
使用後：
1
"use strict";
2
x = 3.14; // ReferenceError: x is not defined
3
console.log(x);
Copied!
2. 不能刪除變數或函數
- 不能對變數或函數使用
delete運算子 (原本對變數或函數作刪除並不會有效果，但也不會拋錯，等於無用的廢 code) - 但還是可以對物件屬性或陣列元素使用。
錯誤類型：SyntaxError: Delete of an unqualified identifier in strict mode
使用前：
1
// variable (沒有作用)
2
var x = 3.14;
3
console.log( delete x ); // false
4
console.log(x); // 3.14
5
6
// function via declararion (沒有作用)
7
function f1(){ console.log('Hi 1'); }
8
console.log( delete f1 ); // false
9
console.log(f1); // ƒ f1(){ console.log('Hi 1'); }
10
11
// function via expression (沒有作用)
12
var f2 = function() { console.log('Hi 2'); }
13
console.log( delete f2 ); // false
14
console.log(f2); // ƒ () { console.log('Hi 2'); }
15
16
// array element
17
var fruits = ["Banana", "Orange", "Apple", "Mango"];
18
console.log( delete fruits[2] ); // true
19
console.log(fruits); // ["Banana", "Orange", empty, "Mango"]
20
21
// object property
22
var person = {name: 'John', age:18};
23
console.log( delete person.name ); // true
24
console.log(person); // {age: 18}
Copied!
使用後：
1
"use strict";
2
3
// variable
4
var x = 3.14;
5
console.log( delete x ); // SyntaxError: Delete of an unqualified identifier in strict mode.
6
7
// function via declararion
8
function f1(){ console.log('Hi 1'); }
9
console.log( delete f1 ); // SyntaxError: Delete of an unqualified identifier in strict mode.
10
11
// function via expression
12
var f2 = function() { console.log('Hi 2'); }
13
console.log( delete f2 ); // SyntaxError: Delete of an unqualified identifier in strict mode.
14
15
// array element
16
var fruits = ["Banana", "Orange", "Apple", "Mango"];
17
console.log( delete fruits[2] ); // true
18
console.log(fruits); // ["Banana", "Orange", empty, "Mango"]
19
20
// object property
21
var person = {name: 'John', age:18};
22
console.log( delete person.name ); // true
23
console.log(person); // {age: 18}
Copied!
3. 函數的參數名稱不能重複
- 一般模式下，函數的參數名稱如果不慎重複，不會有提醒。
錯誤類型：SyntaxError: Duplicate parameter name not allowed in this context
使用前：
1
function myFunc(p1, p1){
2
console.log(p1);
3
};
4
5
myFunc(10, 20); // 20
Copied!
使用後：
1
"use strict";
2
3
function myFunc(p1, p1){ // `SyntaxError: Duplicate parameter name not allowed in this context`
4
console.log(p1);
5
};
Copied!
4. 不能使用八進制的數字實字 (Octal numeric literals)
- 某些版本的 JavaScript 中，如果數字前頭帶
0，會被直譯為八進制。 - 例如：
var x = 010;等於十進制的8。 - 一般 JavaScript 實作規範中就強烈建議不要對數字開頭帶
0(但一般模式下仍可被 JavaScript 直譯器接受)。 - 嚴謹模式會直接對這樣的語法拋錯。
錯誤類型：SyntaxError: Octal literals are not allowed in strict mode
使用前：
1
var n = 010;
2
console.log(n); // 8
Copied!
使用後：
1
"use strict";
2
3
var n = 010; // SyntaxError: Octal literals are not allowed in strict mode.
4
console.log(n);
Copied!
5. 不能使用八進制的跳脫字元 (Octal escape characters)
- 例如：
var x = "\010";。
註：我個人沒用過這個用法，實際上印出來也只看得到空字串，不知道可以應用在哪。錯誤類型：SyntaxError: Delete of an unqualified identifier in strict mode.
使用前：
1
var n = "\010";
2
console.log(n); // ""
Copied!
使用後：
1
"use strict";
2
3
var n = "\010"; // SyntaxError: Octal escape sequences are not allowed in strict mode.
4
console.log(n);
Copied!
6. 不能對唯讀的物件屬性作寫入 (write to a read-only property of objects)
- 在定義物件屬性時，可以設定是否可寫入 (writable)。
- 一般模式下，如果對
writable:false的屬性作賦值動作，不會寫入成功，但也不會報錯 (等於廢 code)。 - 嚴謹模式下會直接拋錯。
錯誤類型：TypeError: Cannot assign to read only property 'articleTarget' of object '#<Object>'
使用前：
1
var player = {};
2
Object.defineProperty(player, "nickname", {value:"OneJar", writable:true});
3
Object.defineProperty(player, "articleTarget", {value:30, writable:false});
4
console.log(player); // {nickname: "OneJar", articleTarget: 30}
5
6
player.articleTarget = 100;
7
console.log(player); // {nickname: "OneJar", articleTarget: 30}
Copied!
使用後：
1
"use strict";
2
3
var player = {};
4
Object.defineProperty(player, "nickname", {value:"OneJar", writable:true});
5
Object.defineProperty(player, "articleTarget", {value:30, writable:false});
6
console.log(player); // {nickname: "OneJar", articleTarget: 30}
7
8
player.articleTarget = 100; // TypeError: Cannot assign to read only property 'articleTarget' of object '#<Object>'
9
console.log(player);
Copied!
7. 不能對 get-only 的物件屬性作寫入
- 一般模式下，如果對只有 getter 的屬性作賦值動作，不會寫入成功，但也不會報錯 (等於廢 code)。
- 嚴謹模式下會直接拋錯。
錯誤類型：TypeError: Cannot set property age of #<Object> which has only a getter
使用前：
1
var person = {get age() {return 18} };
2
console.log(person); // {}
3
console.log(person.age); // 18
4
person.age = 70;
5
console.log(person.age); // 18
Copied!
使用後：
1
"use strict";
2
3
var person = {get age() {return 18} };
4
console.log(person); // {}
5
console.log(person.age); // 18
6
person.age = 70; // TypeError: Cannot set property age of #<Object> which has only a getter
7
console.log(person.age);
Copied!
References
Last modified 2yr ago