zoukankan      html  css  js  c++  java
  • 【JS】312- 复习 JavaScript 严格模式(Strict Mode)

    640?wx_fmt=png点击上方“前端自习课”关注,学习起来~


    640?wx_fmt=jpeg


    注:本文为 《 JavaScript 完全手册(2018版) 》第30节,你可以查看该手册的完整目录。


    严格模式是一项 ES5 功能,它使 JavaScript 以更好的方式运行,因为启用严格模式会更改 JavaScript 语言的语义。

    了解严格模式与普通模式(通常称为草率模式)下 JavaScript 代码之间的主要区别非常重要。

    严格模式主要是删除 ES3 中可能的功能,并且从ES5开始就被弃用(但是由于向后兼容性要求而没有被删除)。

    如何开启严格模式

    严格模式是可选的。与 JavaScript 中的每一个重大变化一样,我们不能简单地改变语言行默认的为方式,因为这会破坏大量的 JavaScript ,并且 JavaScript 会花费大量精力来确保1996年的JavaScript代码仍然有效。这是其成功的关键。

    因此,我们需要使用 'use strict' 指令来启用严格模式。

    你可以将它放在文件的开头,将其应用于文件中包含的所有代码:

    JavaScript 代码:

    'use strict'	
     	
    const name = 'Flavio'	
    const hello = () => 'hey'	
     	
    //...

    你还可以通过在函数体的开头的位置添加 'use strict' ,来为该函数单独启用严格模式:

    JavaScript 代码:

    function hello() {	
      'use strict'	
      	
      return 'hey'	
    }

    在遗留代码上操作时,这很有用,在遗留代码中你没有时间进行测试,也可能没有信心在整个文件上启用严格模式。

    严格模式改变了什么

    意外的全局变量

    如果为未声明的变量赋值,则默认情况下 JavaScript 会在全局对象上创建该变量:

    JavaScript 代码:

    ;(function() {	
      variable = 'hey'	
    })()	
     	
    (() => {	
      name = 'Flavio'	
    })()	
     	
    variable //'hey'	
    name //'Flavio'

    转到严格模式,如果你尝试执行上面的操作,则会出现错误:

    JavaScript 代码:

    ;(function() {	
      'use strict'	
      variable = 'hey'	
    })()	
     	
    (() => {	
      'use strict'	
      myname = 'Flavio'	
    })()

    640?wx_fmt=png


    分配错误

    JavaScript 中会隐式转换一些值。

    在严格模式下,这些隐式转换会抛出错误:

    JavaScript 代码:

    undefined = 1	
     	
    (() => {	
      'use strict'	
      undefined = 1	
    })()


    这同样适用于 Infinity,NaN,eval ,arguments 等。

    在 JavaScript 中,可以使用下面代码定义对象属性不可写

    JavaScript 代码:

    const car = {}	
    Object.defineProperty(car, 'color', { value: 'blue', writable: false })

    在严格模式下,你不能覆盖这个值,但在非严格模式下可以这么做:

    640?wx_fmt=png

    和 getters 的原理一样:


    JavaScript 代码:

    const car = {	
      get color() {	
        return 'blue'	
      }	
    }	
    car.color = 'red'(	
      //ok	
     	
      () => {	
        'use strict'	
        car.color = 'yellow' //TypeError: Cannot set property color of # which has only a getter	
      }	
    )()


    非严格模式允许扩展一个不可扩展的对象:

    JavaScript 代码:

    const car = { color: 'blue' }	
    Object.preventExtensions(car)	
     	
    car.model = 'Fiesta'(	
      //ok	
      () => {	
        'use strict'	
        car.owner = 'Flavio' //TypeError: Cannot add property owner, object is not extensible	
      }	
    )()

    另外,非严格模式允许设置原始值的属性,而不会失败,但也没有做任何事情:

    JavaScript 代码:

    true.false = ''(	
      //''	
      1	
    ).name =	
      'xxx' //'xxx'	
    var test = 'test' //undefined	
    test.testing = true //true	
    test.testing //undefined


    严格模式下,上面所有这些情况都会失败:

    JavaScript 代码:

    ;(() => {	
      'use strict'	
      true.false = ''(	
        //TypeError: Cannot create property 'false' on boolean 'true'	
        1	
      ).name =	
        'xxx' //TypeError: Cannot create property 'name' on number '1'	
      'test'.testing = true //TypeError: Cannot create property 'testing' on string 'test'	
    })()


    除错误

    在非严格模式,如果你尝试删除无法删除的属性,JavaScript 只返回 false ,而在严格模式下,它会引发 TypeError:

    JavaScript 代码:

    delete Object.prototype(	
      //false	
      	
      () => {	
        'use strict'	
        delete Object.prototype //TypeError: Cannot delete property 'prototype' of function Object() { [native code] }	
      }	
    )()


    具有相同名称的函数参数

    在普通函数中,你可以使用重复的参数名称:

    JavaScript 代码:

    (function(a, a, b) {	
      console.log(a, b)	
    })(1, 2, 3)	
    //2 3	
     	
    (function(a, a, b) {	
      'use strict'	
      console.log(a, b)	
    })(1, 2, 3)	
    //Uncaught SyntaxError: Duplicate parameter name not allowed in this context

    请注意,在这种情况下,箭头函数始终引发 SyntaxError:


    JavaScript 代码:

    ((a, a, b) => {	
      console.log(a, b)	
    })(1, 2, 3)	
    //Uncaught SyntaxError: Duplicate parameter name not allowed in this context


    八进制

    JavaScript 代码:

      console.log(010)	
    })()	
    //8	
     	
    (() => {	
      'use strict'	
      console.log(010)	
    })()	
    //Uncaught SyntaxError: Octal literals are not allowed in strict mode.


    你仍然可以使用 0oXX 语法在严格模式下启用八进制数字:

    JavaScript 代码:

    ;(() => {	
      'use strict'	
      console.log(0o10)	
    })()	
    //8

    移除了 with

    严格模式不能使用 with 关键字,以移除一些边缘情况,并允许在编译器层面进行更多优化。



    ▼原创系列推荐▼1.JavaScript 重温系列(22篇全)
    2.ECMAScript 重温系列(10篇全)
    3.JavaScript设计模式 重温系列(9篇全)
    4.正则 / 框架 / 算法等 重温系列(16篇全)5.【汇总】59篇原创系列汇总

    640?wx_fmt=png

    640?wx_fmt=png你点的每个赞,我都认真当成了喜欢
    个人博客:http://www.pingan8787.com 微信公众号【前端自习课】和千万网友一起,每日清晨,享受一篇前端优秀文章。 目前已连续推送文章 600+ 天,愿每个人的初心都能一直坚持下去!
  • 相关阅读:
    UWP 常用文件夹
    UWP 判断Windows10系统版本
    UWP 图片缩放
    Windows 10「设置」应用完整MS-Settings快捷方式汇总
    UWP 用Thumb 控件仿制一个可拖动悬浮 Button
    【mp3】洗脑循环了!龙珠超 自在极意功 【究极の圣戦】串田アキラ 背景纯音乐
    工作三年后的总结
    css3 移动端 开关效果
    js 移动端上拉加载下一页通用方案
    【我的上传番剧/电影】收藏夹
  • 原文地址:https://www.cnblogs.com/pingan8787/p/11838133.html
Copyright © 2011-2022 走看看