美文网首页
【JS脚丫系列】严格模式"use strict";

【JS脚丫系列】严格模式"use strict";

作者: 吃码小妖 | 来源:发表于2019-12-20 05:01 被阅读0次

    【JS脚丫系列】严格模式"use strict";

    学习就好比是座大山,人们沿着不同的路登山,分享着自己看到的风景。你不一定能看到别人看到的风景,体会到别人的心情。只有自己去登山,才能看到不一样的风景,体会才更加深刻。

    点击上面的“赞”,你的支持是我最大的动力。

    图片.png

    【01】严格模式"use strict";

    内容来源于网络和我所阅读过书籍。

    概念

    严格模式(strict mode)。

    【01】ES5引入。

    【02】Javascript语言的一个特点,就是允许"动态绑定",即某些属性和方法到底属于哪一个对象,不是在编译时确定的,而是在运行时(runtime)确定的。

    严格模式对动态绑定做了一些限制。

    某些情况下,只允许静态绑定。也就是说,属性和方法到底归属哪个对象,在编译阶段就确定。这样做有利于编译效率的提高,也使得代码更容易阅读,更少出现意外。


    Q:如何开启严格模式?

    把以下代码放在一个 JavaScript文件或函数的起始位置(第一行)时,才可以开启严格模式。

    (严格地说,只要前面不是产生实际运行结果的语句,"use strict"可以不在第一行,比如直接跟在一个空的分号后面。)

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

    "use strict";
    

    否则 - 在 JavaScript 文件的不是文件开头也不是函数开始的部位声明的话 - 就是一个不使用的一般的字符串,除了浪费几个字节,没什么别的用处。

    这行代码看起来像是字符串,而且也没有赋值给任何变量,但其实它是一个编译指示(pragma),用于告诉支持的JS引擎切换到严格模式。

    这是为不破坏ES3语法而特意选定的语法。

    这是一条指令。指令不是语句(但非常接近于语句)。

    它不包含任何语言的关键字,指令仅仅是一个包含一个特殊字符串直接量的表达式(可以是使用单引号也可以使用双引号),对于那些没有实现ES5的JS解释器来说,它只是一条没有副作用的表达式语句,它什么也没做。

    这种语法(从ES3开始支持)可以向后兼容那些不支持严格模式的JavaScript引擎。支持严格模式的引擎会启动这种模式,而不支持该模式的引擎就当遇到了一个未赋值的字符串字面量,会忽略这个编译指示。

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

    上面的代码表示,一个网页中依次有两段Javascript代码。前一个script标签是严格模式,后一个不是。


    指令摆放位置:

    推荐在所有的函数 (或者所有最外层函数) 的开始处加入 "use strict"; 指令启动严格模式,而绝不推荐在文件的开头处写全局 "use strict" - 相反,这时一些 ES 校验器会给出警告。

    全局 "use strict" 为什么不好?

    一个重要的原因就是文件合并时,一些文件用了严格模式,而另一些没有。这时这些本来是严格模式的文件,被 merge 后,这个串就到了文件的中间,不仅没有指示严格模式,反而在压缩后浪费了字节。

    【】在函数内部的上方包含这条编译指示,可以指定函数在严格模式下执行。

    就像下面这样:

    function doSomething(){
        "use strict";
    
        //其他代码
    }
    

    脚本文件的变通写法

    因为第一种调用方法不利于文件合并,所以更好的做法是,借用第二种方法,将整个脚本文件放在一个立即执行的匿名函数之中。

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

    严格模式的作用:

    严格模式为JS定义了一种不同的解析与执行模型。

    在严格模式下,ES3中的一些不确定的行为将得到处理,而且对某些不安全的操作也会抛出错误。

    ES5中的严格模式是该语言的一个受限制的子集,它修正了语言的重要缺陷,并提供健壮的查错功能和增强的安全机制。

    提高编译器效率,增加运行速度;


    浏览器支持

    支持严格模式的浏览器包括IE10+、Firefox 4+、Safari 5.1+、Opera 12+和Chrome。

    判断是否是严格模式

    调用的函数(不是方法)中的一个this值是undefined。(在非严格模式中,调用的函数中的this值总是全局对象)。可以利用这种特性来判断JavaScript实现是否支持严格模式:

    var hasStrictMode = (function () {
        "use strict";
        return this === undefined
    }());
    

    在严格模式中的规则:

    禁止使用with语句

    在严格模式下使用with会导致语法错误。

    因为with语句无法在编译时就确定,属性到底归属哪个对象。

    "use strict";
    var v = 1;
    with (o){ // 语法错误
      v = 2;
    }
    

    新加eval作用域

    正常模式下,Javascript语言有两种变量作用域(scope):全局作用域和函数作用域。

    严格模式创设了第三种作用域:eval作用域。

    正常模式下,eval语句的作用域,取决于它处于全局作用域,还是处于函数作用域。

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

      "use strict";
      var x = 2;
      console.info(eval("var x = 5; x")); // 5
      console.info(x); // 2
    

    禁止使用0开头的八进制直接量

    不允许使用八进制整数直接量(以0为前缀,而不是0x为前缀)的。

    (在非严格模式中某些实现是允许八进制整数直接量的)。

    正常模式下,整数的第一位如果是0,表示这是八进制数,比如0100等于十进制的64。

    严格模式禁止这种表示法,整数第一位为0,将报错。

    "use strict";
    var n = 0100; // 语法错误
    

    ES5也修改了严格模式下parseInt()的行为。如今,八进制字面量在严格模式下会被当作以0开头的十进制字面量。例如:

    //使用parseInt()解析八进制字面量
    //非严格模式:值为8
    //严格模式:值为10
    var value = parseInt("010"); 
    

    保留字/关键字

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

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

    function package(protected) { // 语法错误

    "use strict";

    var implements; // 语法错误

    }

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

    标识符eval和arguments当做关键字,它们的值是不能更改的。不能给这些标识符赋值,也不能把它们声明为变量、用做函数名、用做函数参数或用做catch块的标识符。

    不能将它们用作标识符,意味着以下几种使用方式都会抛出语法错误:

    • 使用var声明;
    • 赋予另一个值;
    • 尝试修改包含的值,如使用++;
    • 用作函数名;
    • 用作命名的函数参数;
    • 在try-catch语句中用作例外名。

    例如:

    //把eval和arguments作为变量引用
    //非严格模式:没问题,不出错
    //严格模式:抛出语法错误
    var eval = 10;
    var arguments = "Hello world!";
    

    delete删除非法标识符

    当delete运算符后跟随非法的标识符(比如变量、函数、函数参数)时,将会抛出一个语法错误异常。

    (在非严格模式中,这种delete表达式什么也没做,并返回false)。


    全局变量显式声明

    所有的变量都要先声明,如果给一个未声明的变量、函数、函数参数、catch从句参数或全局对象的属性赋值,将会抛出一个引用错误ReferenceError异常。

    (在非严格模式中,这种隐式声明的全局变量的方法是给全局对象新添加一个新属性)。

    在正常模式中,如果一个变量没有声明就赋值,默认是全局变量。

    严格模式禁止这种用法,全局变量必须显式声明。

    "use strict";

    v = 1; // 报错,v未声明

    for(i = 0; i < 2; i++) { // 报错,i未声明

    }

    因此,严格模式下,变量都必须先用var命令声明,然后再使用。

    在非严格模式下,可以像下面这样创建全局变量:

    //未声明变量
    //非严格模式:创建全局变量
    //严格模式:抛出ReferenceError
    message = "Hello world! ";
    

    即使message前面没有var关键字,即使没有将它定义为某个全局对象的属性,也能将message创建为全局变量。但在严格模式下,如果给一个没有声明的变量赋值,那代码在执行时就会抛出ReferenceError。

    【】测试结果为:

    图片.png

    arguments对象的限制

    arguments是函数的参数对象,严格模式对它的使用做了限制。

    不允许对arguments赋值

    "use strict";
    arguments++; // 语法错误
    var obj = { set p(arguments) { } }; // 语法错误
    try { } catch (arguments) { } // 语法错误
    function arguments() { } // 语法错误
    var f = new Function("arguments", "'use strict'; return 17;"); // 语法错误
    

    arguments不再追踪参数的变化(#注意)

    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]
    

    例如:

    //修改命名参数的值
    //非严格模式:修改会反映到arguments中
    //严格模式:修改不会反映到arguments中
    
    function showValue(value){
        value = "Foo"; 
        alert(value);        //"Foo"
        alert(arguments[0]); //非严格模式:"Foo"
                             //严格模式:"Hi"
    }
    
    showValue("Hi");
    

    禁止使用arguments.callee

    这意味着,你无法在匿名函数内部调用自身了。

    "use strict";
    var f = function() { return arguments.callee; };
    f(); // 报错
    

    重名错误

    对象不能有重名的属性

    正常模式下,如果对象有多个重名属性,最后赋值的那个属性会覆盖前面的值。严格模式下,这属于语法错误。

    "use strict";
    var o = {
        p: 1,
        p: 2
    }; // 语法错误
    

    函数不能有重名的参数

    正常模式下,如果函数有多个重名的参数,可以用arguments[i]读取。严格模式下,这属于语法错误。

    "use strict";
    function f(a, a, b) { // 语法错误
        return ;
    }
    

    显式报错

    正常模式下,对一个对象的只读属性进行赋值,不会报错,只会默默地失败。

    为不可扩展的(nonextensible)的对象添加属性会抛出TypeError。

    严格模式下,将报错。

    "use strict";
    var o = {};
    Object.defineProperty(o, "v", { value: 1, writable: false });
    o.v = 2; // 报错
    

    严格模式下,对一个使用getter方法读取的属性进行赋值,会报错。为只读属性赋值会抛出TypeError;

    "use strict";var o = {get v() { return 1; }};o.v = 2; // 报错
    

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

    "use strict";var o = {};Object.preventExtensions(o);o.v = 1; // 报错
    

    严格模式下,删除一个不可删除的属性,会报错。

    "use strict";delete Object.prototype; // 报错
    

    禁止this关键字指向全局对象

    function f(){    return !this;}
    // 返回false,因为"this"指向全局对象,"!this"就是false
    function f(){    "use strict";   
     return !this;}
     // 返回true,因为严格模式下,this的值为undefined,所以"!this"为true。
    

    因此,使用构造函数时,如果忘了加new,this不再指向全局对象,而是报错。

    function f(){    
        "use strict";  
          this.a = 1;};
          f();// 报错,this未定义
    

    call和apply中的this

    当通过call()或apply()来调用函数时,其中的this值就是通过call()或apply()传入的第一个参数。

    在非严格模式下使用函数的apply()或call()方法时,null或undefined值会被转换为全局对象。

    而在严格模式下,函数的this值始终是指定的值,无论指定的是什么值。

    例如:

    //访问属性
    //非严格模式:访问全局属性
    //严格模式:抛出错误,因为this的值为null
    
    var color = "red";
    
    function displayColor(){
        alert(this.color);
    } 
    
    displayColor.call(null);
    

    在Non-strict Mode,如果上下文的值是原始的(primitive),比如数字 1,那它将会被转换成一个对象,一个Number对象。

    而在strict mode ,这个原始的值 1, 将会被保留。
    Non-strict Mode:

    console.log(function () {
        return this;
    }.call(1));
    
    //=Number {}
    

    Strict Mode:

    console.log(function () {
        "use strict";
        return this;
    }.call(1));
    //=1
    

    无法删除不可配置的变量

    试图删除一个不可配置的属性将抛出一个类型错误异常(在非严格模式中,delete表达式操作失败,并返回false)。

    只有configurable设置为true的对象属性,才能被删除。

    "use strict";var x;delete x; 
    // 语法错误
    var o = Object.create(null, 'x', {    value: 1,    configurable: true});
    delete o.x; // 删除成功
    

    禁止在函数内部遍历调用栈

    arguments.caller和arguments.callee都会抛出一个类型错误异常。

    函数具有caller和arguments属性,当访问这两个属性时将抛出类型错误异常。

    function f1(){    
    "use strict";   
     f1.caller; // 报错 
       f1.arguments; // 报错}f1();
    

    函数必须声明在顶层

    Javascript的新版本会引入”块级作用域”。

    为了与新版本接轨,严格模式只允许在全局作用域或函数作用域的顶层声明函数。

    也就是说,不允许在非函数的代码块内声明函数。

    "use strict";
    if (true) {
        function f() { } // 语法错误
    }
    for (var i = 0; i < 5; i++) {
        function f2() { } // 语法错误
    }
    

    在非严格模式下,以上代码能在所有浏览器中运行,但在严格模式下会导致语法错误。

    相关文章

      网友评论

          本文标题:【JS脚丫系列】严格模式"use strict";

          本文链接:https://www.haomeiwen.com/subject/lvhbnctx.html