javascript严格模式

一.何谓严格模式？

在javascript中，除了正常运行（非严格）模式，ECMAscript 5添加了第二种运行模式："严格模式"（strict mode）。顾名思义，这种模式使得Javascript在更严格的条件下运行。

二.设立严格模式目的

• 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
• 消除代码运行的一些不安全之处，保证代码运行的安全；
• 提高编译器效率，增加运行速度；
• 为未来新版本的Javascript做好铺垫。

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

注：同样的代码，在"严格模式"和"正常（非严格）模式"中，可能会有不一样的运行结果；一些在"正常模式"下可以运行的语句，在"严格模式"下将不能运行。

三.如何使用严格模式

进入"严格模式"的标志，是下面这行语句：

"use strict";

老版本（不兼容）的浏览器会把它当作一行普通字符串解析，加以忽略。

"严格模式"有两种调用方法，适用于不同的场合。

1.针对整个脚本

• 将"use strict"放在脚本文件的第一行，则整个脚本都将以"严格模式"运行。

• 如果这行语句不在首部，则无效，整个脚本以"正常模式"运行。必须在首部指首部前面没有任何有效js代码除注释，否则无效

• 如果不同模式的代码合并成一个，原有模式仍是原有模式，即模式不能合并，这一点需要特别注意。

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

2.针对单个函数

• 将"use strict"放在函数体的第一行，则整个函数以"严格模式"运行。

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

四、 严格模式和非严格模式使用区别

严格模式对Javascript的语法和行为，都做了一些改变。

1.严格模式下，不能使用未声明的变量

//严格模式
  <script>
    "use strict";
    v = 1; // 报错，v未声明
  </script>
  <script>
    "use strict";
    　for(i = 0; i < 2; i++) { // 报错，i未声明
    　}
  </script>
  
  //非严格模式
  <script>
    v = 1;     
    console.log(x)     //1
  </script>

报错截图如下

20190814162430.png

在正常模式中，如果一个变量没有声明就赋值，默认是全局变量。严格模式禁止这种用法，全局变量必须显式声明。因此，严格模式下，变量都必须先用var命令声明，然后再使用。

2.严格模式下，不允许删除 变量、函数或对象（只有configurable设置为true的对象属性，才能被删除。）

//demo1
<script>
    "use strict";
    var x = 123;
    delete x;   
    // 报错：Uncaught SyntaxError: Delete of an unqualified  in strict mode.
</script>

//demo2
 <script>
    "use strict";
    var x ;
    delete x;   
    // 报错：Uncaught SyntaxError: Delete of an unqualified  in strict mode.
</script>

//demo3
<script>
    "use strict";
    function foo() {}
    delete foo; //Uncaught SyntaxError: Delete of an unqualified identifier in strict mode.
</script>

//demo4
<script>
    var o = Object.create(null, {
        'x': {
            value: 1234,
            configurable: true
        }
    });

    console.log(o.x) //输出：1234
    delete o.x; //删除成功
    console.log(o.x) //输出：undefined
</script>

3. 严格模式下，不允许函数参数名相同

<script>
    "use strict";
    function foo(p1,p1){
        console.log(p1); //Uncaught SyntaxError: Duplicate parameter name not allowed in this context
    } 
  //不用调用，直接会报错
</script>

<script>
    function foo(p1,p1){
        console.log(p1); //2
    } 
    foo(1,2)
</script>

4. 严格模式下，不允许使用八进制

在js中，使用0开头表示八进制，使用0x开头表示十六进制。比如0100等于十进制的64。严格模式禁止这种表示法，整数第一位为0，将报错。

<script>
"use strict";
var x = 0100;   //Uncaught SyntaxError: Octal literals are not allowed in strict mode.
</script>

5. 严格模式下，禁止对一个对象的只读属性进行赋值

<script>
    "use strict";
    var o = {};
    Object.defineProperty(o, "v", {
        value: 1,
        writable: false
    });
    o.v = 2; // Uncaught TypeError: Cannot assign to read only property 'v' of object '#<Object>'
    console.log(o.v);
</script>


<script>
    var o = {};
    Object.defineProperty(o, "v", {
        value: 1,
        writable: false
    });
    o.v = 2; 
    console.log(o.v); //1
</script>

6. 严格模式下，对禁止扩展的对象添加新属性，会报错

<script>
    "use strict";
    var o = {};
    Object.preventExtensions(o);
    o.v = 1; // Uncaught TypeError: Cannot add property v, object is not extensible
    console.log(o.v);
</script>

<script>
    var o = {};
    Object.preventExtensions(o);
    o.v = 1; 
    console.log(o.v); //undefined
</script>

• 严格模式下，对禁止扩展的对象添加新属性直接会报错，正常模式，不会报错，直接成功运行

7. 严格模式下，不允许对一个使用getter方法读取的属性进行赋值（不了解getter的可以去网上搜索js中的getter和setter相关资料）

<script>
    "use strict";
    var obj = {
        get x() {
            return 0
        }
    };
    obj.x = 3.14; //test.html:21 Uncaught TypeError: Cannot set property x of #<Object> which has only a getter
    console.log(obj.x);
</script>


<script>
    var obj = {
        get x() {
            return 0
        }
    };
    obj.x = 3.14; 
    console.log(obj.x); //0
</script>

8. 严格模式下，函数中的this等于undefined

<script>
    "use strict";
    function f() {
        return this;
    }
    console.log(f(),f() === window); //undefined false
</script>

 <script>
    function f() {
        return this;
    }
    console.log(f(),f() === window); //window true
</script>

• 默认正常模式，函数中的this等于window，严格模式下的this指向undefined，其他情况，无论那种模式,this指向相同，比如new 构造函数 ，this都指向实例

9. 严格模式下，新增了一些保留字

为了向将来Javascript的新版本过渡，严格模式新增了一些保留字：implements, interface, let, package, private, protected, public, static, yield

使用这些词作为变量名将会报错。

    function package(protected) { // Uncaught SyntaxError: Unexpected strict mode reserved word
　　　　"use strict";
　　　　var implements; // Uncaught SyntaxError: Unexpected strict mode reserved word
　　}

• 此外，ECMAscript第五版本身还规定了另一些保留字（class, enum, export, extends, import, super,arguments,eval），以及各大浏览器自行增加的const保留字，也是不能作为变量名的。

10. 严格模式下，由于一些安全原因，在作用域 eval() 创建的变量不能被调用

• 严格模式下，eval语句本身就是一个作用域，不再能够生成全局变量了，它所生成的变量只能用于eval内部。

    <script>
        "use strict"
        eval("var x = 2");
        console.log(x); //Uncaught ReferenceError: x is not defined
    </script>
  
   <script>
        eval("var x = 2");
        console.log(x); //2
    </script>
  

11. 严格模式下,禁止使用with语句(由于with用的不多，不过多介绍)

阮一峰的网络日志--Javascript 严格模式详解