【JS ES6】use strict 严格模式

简介: 【JS ES6】use strict 严格模式

 由于 JavaScript 语法不够严谨,一直被人们所诟病,例如在使用一个变量时,可以不使用 var 关键字来提前声明(例如:url = 'http://c.biancheng.net/';),此时 JavaScript 解释器会自动为您创建这个变量。为了使代码更加严谨,JavaScript 中引入了严格模式,一旦使用了严格模式,将不再允许使用那些不严谨的语法。

什么是严格模式

严格模式是在 ECMAScript5(ES5)中引入的,在严格模式下,JavaScript 对语法的要求会更加严格,一些在正常模式下能够运行的代码,在严格模式下将不能运行。


添加严格模式,主要有以下几个目的:

    • 消除 JavaScript 语法中一些不合理、不严谨的地方;
    • 消除代码中一些不安全的地方,保证代码的安全运行;
    • 提高 JavaScript 程序的运行效率;
    • 为以后新版本的 JavaScript 做好铺垫。

    目前,主流浏览器包括 IE10 及其之后的版本都已支持严格模式,JavaScript 正在向着更合理、更安全、更严谨的方向发展。

    启用严格模式

    要启用严格模式,您只需要在 JavaScript 脚本的开头添加"use strict";'use strict';指令即可,如下所示:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
    </head>
    <body>
        <script>
            "use strict";
            x = 'http://c.binacheng.net/'; // 此处报错:Uncaught ReferenceError: x is not defined at index.html:11
            console.log(x);
        </script>
    </body>
    </html>

    image.gif

    如果将"use strict";指令添加到 JavaScript 程序的第一行,则表示整个脚本都会处于严格模式。如果在函数的第一行代码中添加"use strict";,则表示只在该函数中启用严格模式。如下例所示:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
    </head>
    <body>
        <script>
            x = 'http://c.binacheng.net/';
            console.log(x);
            function sayHello(){
                'use strict';
                str = 'welcome http://c.binacheng.net/'; // 调用 sayHello() 函数在此处报错:Uncaught ReferenceError: str is not defined at sayHello (index.html:14) at index.html:17
                console.log(str);
            }
            sayHello();
        </script>
    </body>
    </html>

    image.gif

    注意:"use strict";'use strict';指令只有在整个脚本第一行或者函数第一行时才能被识别,除了 IE9 以及更低的版本外,所有的浏览器都支持该指令。

    严格模式中的变化

    相对于普通模式来说,严格模式对 JavaScript 的语法都做了一些改变。

    1、不允许使用未声明的变量

    普通模式下,如果一个变量还没有声明,就直接拿来赋值,JavaScript 解释器会自动为您创建这个变量。而在严格模式下,则不允许这么做,所有变量在使用前必须显式的声明,否则将会抛出一个 ReferenceError 错误。

    "use strict";
    v = 1;        // 此处报错:Uncaught ReferenceError: v is not defined
    for(i = 0; i < 2; i++) { // 此处报错:Uncaught ReferenceError: i is not defined
    }

    image.gif

    2、不允许删除变量或函数

    在严格模式下,如果您尝试删除一个变量或函数,则会抛出语法错误。而在普通模式下,虽然不会成功,但并不报错。

    "use strict";
    var person = {name: "Peter", age: 28};
    delete person;  // 此处报错:Uncaught SyntaxError: Delete of an unqualified identifier in strict mode.
    function sum(a, b) {
        return a + b;
    }
    delete sum;  // 此处报错:Uncaught SyntaxError: Delete of an unqualified identifier in strict mode.

    image.gif

    3、函数中不允许有同名的参数

    在严格模式下,如果函数中有两个或多个同名参数,则会抛出语法错误,而在普通模式下则不会。

    "use strict";
    function square(a, a) {     // 此处报错:Uncaught SyntaxError: Duplicate parameter name not allowed in this context
        return a * a;
    }

    image.gif

    4、eval 语句的作用域是独立的

    普通模式下,eval 语句的作用域取决于它所在的位置,而在严格模式下,eval 语句本身就是一个局部作用域,通过 eval 语句生成的变量只能在 eval 语句内使用。

    "use strict";
    eval("var x = 5; console.log(x);");
    console.log(x);     // 此处报错:Uncaught ReferenceError: x is not defined

    image.gif

    5、不允许使用 with 语句

    在严格模式下,不允许使用 with 语句。

    "use strict";
    var radius1 = 5;
    var area1 = Math.PI * radius1 * radius1;
    var radius2 = 5;
    with(Math) {        // 此处报错:Uncaught SyntaxError: Strict mode code may not include a with statement
        var area2 = PI * radius2 * radius2;
    }

    image.gif

    6、不允许写入只读属性

    在严格模式下,不允许为只读或不存在的属性赋值,否则会造成语法错误,而在普通模式下,虽然不会成功,但并不会报错。

    "use strict";
    var person = {name: "Peter", age: 28};
    Object.defineProperty(person, "gender", {value: "male", writable: false});
    person.gender = "female"; // 此处报错:Uncaught TypeError: Cannot assign to read only property 'gender' of object '#<Object>'

    image.gif

    7、不允许使用八进制数

    在严格模式下,不允许使用八进制数(以零为前缀的数字,例如 010、0377),而在普通模式下则可以。

    "use strict";
    var x = 010; // 此处报错:Uncaught SyntaxError: Octal literals are not allowed in strict mode.
    console.log(parseInt(x));

    image.gif

    8、不能在 if 语句中声明函数

    在严格模式下,不能在 if 语句中声明函数,调用在 if 语句中定义的函数时,会提示函数未定义。

    "use strict";
    //如果在if语句中声明函数,则会产生语法错误
    if (true) {
        function demo() { // 此处报错:Uncaught ReferenceError: demo is not defined
            console.log("http://c.biancheng.net/");
        }
    }
    demo();

    image.gif

    9、禁止使用 this 表示全局对象

    在普通模式下,this 关键字表示全局对象 window,而在严格模式下,this关键字则表示 undefined。

    "use strict";
    var name = "http://c.biancheng.net/";
    function demoTest() {
        console.log(this); 
    }
    demoTest();

    image.gif


    目录
    相关文章
    |
    7天前
    |
    JavaScript
    ES6学习(9)js中的new实现
    ES6学习(9)js中的new实现
    |
    15天前
    |
    JSON 前端开发 JavaScript
    |
    9天前
    |
    缓存 JavaScript 前端开发
    JavaScript模块化开发:ES6模块与CommonJs的对比与应用
    JavaScript模块化开发:ES6模块与CommonJs的对比与应用
    15 2
    |
    13天前
    |
    JavaScript 前端开发 API
    揭秘现代前端开发秘籍:Vue.js与ES6如何联手打造惊艳应用?
    【8月更文挑战第30天】本文介绍如何从零开始使用Vue.js与ES6创建现代前端应用。首先,通过简要介绍Vue.js和ES6的新特性,使读者了解这两者为何能有效提升开发效率。接着,指导读者使用Vue CLI初始化项目,并展示如何运用ES6语法编写Vue组件。最后,通过运行项目验证组件功能,为后续开发打下基础。适用于希望快速入门Vue.js与ES6的前端开发者。
    29 3
    |
    16天前
    |
    前端开发 JavaScript 开发者
    翻天覆地!ES6+新特性大爆发,揭秘JavaScript代码的惊人蜕变!
    【8月更文挑战第27天】自ES6标准发布以来,JavaScript新增的特性极大地提升了编程效率并简化了代码。本文重点介绍了五大特性:函数默认参数简化、模板字符串的强大功能、解构赋值的便捷性、箭头函数的简洁之美。这些特性不仅使代码更加简洁、易读,还解决了传统写法中的诸多问题。通过学习和应用这些新特性,开发者可以编写出更高效、更优雅的代码,以应对日益复杂的编程挑战。
    33 2
    |
    21天前
    |
    JSON JavaScript 前端开发
    JS 和 ES6 补充学习
    【8月更文挑战第21天】
    29 4
    |
    2月前
    |
    JavaScript 前端开发 网络架构
    JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
    JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
    46 1
    |
    2月前
    |
    存储 JavaScript 前端开发
    JavaScript编码之路【ES6新特性之 Symbol 、Set 、Map、迭代器、生成器】(二)
    JavaScript编码之路【ES6新特性之 Symbol 、Set 、Map、迭代器、生成器】(二)
    36 1
    |
    2月前
    |
    JavaScript 前端开发
    node.js 导入导出模块(CommonJS模块化规范,ES6模块化规范)
    node.js 导入导出模块(CommonJS模块化规范,ES6模块化规范)
    28 1
    |
    3月前
    |
    JavaScript
    详细讲解JS的解构赋值(Es6)
    详细讲解JS的解构赋值(Es6)