JS 基礎篇(五)：JS嚴格模式

Madman0621發表於2019-02-15
JS模式

一、嚴格模式介紹

除了正常執行模式，ECMAscript 5新增了第二種執行模式："嚴格模式"（strict mode）。顧名思義，這種模式使得Javascript在更嚴格的條件下執行。

設立"嚴格模式"的目的，主要有以下幾個：

  • 消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為;

  • 消除程式碼執行的一些不安全之處，保證程式碼執行的安全；

  • 提高編譯器效率，增加執行速度；

  • 為未來新版本的Javascript做好鋪墊。

"嚴格模式"體現了Javascript更合理、更安全、更嚴謹的發展方向，包括IE 10在內的主流瀏覽器，都已經支援它，許多大專案已經開始全面擁抱它。

另一方面，同樣的程式碼，在"嚴格模式"中，可能會有不一樣的執行結果；一些在"正常模式"下可以執行的語句，在"嚴格模式"下將不能執行。

二、嚴格模式使用

1、為整個指令碼開啟嚴格模式

為整個指令碼檔案開啟嚴格模式，需要在所有語句之前放一個特定語句 "use strict"; （或 'use strict';）

// 整個指令碼都開啟嚴格模式的語法
"use strict";
var v = "Hi!  I'm a strict mode script!";
複製程式碼

2、為函式開啟嚴格模式

要給某個函式開啟嚴格模式，得把 "use strict"; (或 'use strict'; )宣告一字不漏地放在函式體所有語句之前。

function strict(){
  // 函式級別嚴格模式語法
  'use strict';
  function nested() { return "And so am I!"; }
  return "Hi!  I'm a strict mode function!  " + nested();
}
function notStrict() { return "I'm not strict."; }
複製程式碼

三、嚴格模式的改變

1、普通變數

  • 嚴格模式下，變數都必須先用var命令宣告，然後再使用。
  • 嚴格模式下對不可寫屬性賦值，將報錯。
  • 嚴格模式下對只讀屬性賦值，將報錯。
  • 嚴格模式下對禁止擴充套件的物件新增新屬性，將報錯。
  • 嚴格模式下刪除一個不可刪除的屬性，將報錯。
  • 嚴格模式下刪除宣告變數，將報錯。
  • 嚴格模式下對八進位制語法:var n = 023和var s = "\047"將報錯。
//嚴格模式下，變數都必須先用var命令宣告，然後再使用。
//在正常模式中，變數沒有宣告就賦值，預設是全域性變數。
demo1 = "success";
console.log(demo1); // 報錯

//嚴格模式下對不可寫屬性賦值，將報錯。
var demo2 = {};
Object.defineProperty(demo2, "x", { value: 42, writable: false });
demo2.x = 9; //報錯

//嚴格模式下對只讀屬性賦值，將報錯。
var demo3 = { get x() { return 17; } };
demo3.x = 5;  //報錯

//嚴格模式下對禁止擴充套件的物件新增新屬性，將報錯。
var demo4 = {};
Object.preventExtensions(demo4);
demo4.newProp = "ohai"; //報錯

//嚴格模式下刪除一個不可刪除的屬性，將報錯。
delete Object.prototype; //報錯

//嚴格模式下無法刪除變數。只有configurable設定為true的物件屬性，才能被刪除。
var x;
delete x; // 報錯

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

//嚴格模式下對八進位制語法:var n = 023和var s = "\047"將報錯。
var n = 023; //報錯
複製程式碼

2、重名問題

嚴格模式下函式不能有重名的引數

//嚴格模式下函式不能有重名的引數
//正常模式下，如果函式有多個重名的引數，可以用arguments[i]讀取。
function demo6(a,a,b){return ;} //報錯
複製程式碼

3、禁止this關鍵字指向全域性物件

嚴格模式下，全域性作用域的函式中的this不再指向全域性而是undefined。
如果使用建構函式時，如果忘了加new，this不再指向全域性物件，而是undefined報錯。

function demo7_1(){
    console.log(this);
}
function demo7_2(){
    function demo7_3(){
    console.log(this);
    }
    demo7_3();
}
demo7_1(); //undefined
demo7_2(); //undefined

function demo7_4(){
   this.a = 1;
};
demo7_4();// 報錯，使用建構函式時，如果忘了加new，this不再指向全域性物件，而是undefined.a。
複製程式碼

4、靜態繫結

  • 禁止使用with語句
  • eval語句本身就是一個作用域，它所生成的變數只能用於eval內部。
//嚴格模式下禁用with
var demo8 = 1;
with (o){ // 報錯 
  demo8 = 2;
}

//正常模式下，eval語句的作用域，取決於它處於全域性作用域，還是處於函式作用域。
//嚴格模式下，eval語句本身就是一個作用域，不再能夠生成全域性變數了，它所生成的變數只能用於eval內部。
//嚴格模式下，eval語句內傳入的字串也是按照嚴格模式執行。
function demo9() {
    var x = 2;
    eval("var y = 1; console.log(y); "); //1
    eval("var x = 12");
    console.log(x); //2
    console.log(y); //報錯：y is not defined
}
demo9();
複製程式碼

5、arguments物件的限制

  • 不允許對arguments賦值
  • arguments不再追蹤引數的變化
  • 禁止使用arguments.callee
//不允許對arguments賦值
arguments++; //報錯

//arguments不再追蹤引數的變化
//在非嚴格模式中,修改arguments物件中某個索引屬性的值,和這個屬性對應的形參變數的值也會同時變化,反之亦然。
//在嚴格模式中arguments 物件會以形參變數的拷貝的形式被建立和初始化，因此arguments物件的改變不會影響形參。
function demo10_1(a) {
    a = 2;
    return [a, arguments[0]];
}
console.log(demo10_1(1)); // 正常模式為[2,2]

function demo10_2(a) {
    "use strict"
    a = 2;
    return [a, arguments[0]];
}
console.log(demo10_2(1)); // 嚴格模式為[2,1]

//禁止使用arguments.callee
var demo11 = function() { return arguments.callee; };
demo11(); // 報錯
複製程式碼

6、禁止在函式內部遍歷呼叫棧

function demo12(){
    demo12.caller; // 報錯
    demo12.arguments; // 報錯
}
demo12();
複製程式碼

7、保留字

使用未來保留字(也許會在ECMAScript 6中使用):implements, interface, let, package, private, protected, public, static,和yield作為變數名或函式名會報錯。

相關文章