javascript严格模式详解(含严格模式与非严格模式的区别)


Posted in Javascript onNovember 12, 2019

严格模式的优缺点

优点:

  1. 提高代码解析与运行速度
  2. 禁用一些不合理的语法,减少代码的怪异行为

缺点

  1. 某些代码在严格模式下会报错,尤其引入公用与第三方模块的时候需要注意
  2. 有些严格模式的特性在不同浏览器的支持情况不同,需要注意兼容问题

严格模式与非严格模式的区别

1.禁用with语法,使用将报错

因为解析with语法时作用域的情况会非常复杂,严重影响代码的解析与运行速度

function usualMode() {
  with({a: 1}) {
    console.log(a)
  }
}
usalMode() // 正常输出 1

function strictMode() {
  'use strict'
  with({a: 1}) {
    console.log(a)
  }
}
strictMode() // 将报错

2.禁止删除变量与函数

function usualMode() {
  function fn() {} 
  var a = 1
  delete a // 不会报错,但实际上也没能删除变量a
  delete fn // 同delete a
}
usalMode() // 正常执行

function strictMode() {
  'use strict'
  function fn() {} 
  var a = 1
  delete a
}
strictMode() // 将报错

3.属性描述符(propertyDescriptor)相关

能改变属性描述符的方法有Object.defineProperty、Object.defineProperties、Reflect.defineProperty、Reflect.defineProperties、Object.freeze、Object.seal;获取一个属性描述符可以用Object.getOwnPropertyDescriptor、Object.getOwnPropertyDecriptors,ES6中还有Reflect.getOwnPropertyDescriptor、Reflect.getOwnPropertyDescriptors

3.1删除configurable = false的属性会报错

'use strict'
var obj = {}
Object.defineProperty(obj, 'a', {
  configurable: false,
  value: 1
})
delete obj.a // 严格模式会报错;非严格模式会返回false

3.2给writable = false的属性赋值会报错

'use strict'
var obj = {}
Object.defineProperty(obj, 'a', {
  writable: false,
  value: 1
})
obj.a = 2 // 严格模式会报错;非严格模式不会报错,但也不会生效,obj.a 仍然等于 1

4.给不允许扩展的object增加属性会报错

'use strict'
var obj = {a: 1}
Object.preventExtensions(obj)
obj.b = 2 // 严格模式下会报错;非严格模式不会报错,但也不会生效 'b' in obj 为false

能将object设置为不可扩展的方法有Object.freeze、Object.seal、Object.preventExtensions;ES6还有Reflect.freeze、Reflect.seal、Reflect.preventExtensions;判断一个object是否允许扩展可以用Object.isExtensible;ES6还有Reflect.isExtensible

5.给未申明的变量赋值会报错

'use strict'
a = 1 // 严格模式下将报错,非严格模式a变量会提升至全局作用域

6.定义object时属性重名会报错

'use strict'
var obj = {a: 1, a: 2}// 严格模式将报错;非严格模式后面一个a会覆盖前面的a,即obj.a = 2

7.形参重复时会报错

'use strict'
function fn(a, a) {
  console.log(a, arguments)
}
fn(1,2) // 严格模式会报错;非严格模式不会报错,a=2,arguments中两个参数都有

8.eval相关

8.1eval有独立作用域

'use strict'
eval('var a = 1')
console.log(typeof a) // 严格模式下为undefined;非严格模式下为number

8.2eval不能作为变量名或函数名,类似关键字

'use strict'
var eval = 1 // 严格模式下将报错;非严格模式将申明一个值为1的变量eval

// 严格模式下将报错;非严格模式将申明一个对应的eval函数
function eval() {
// some code
}

9.arguments相关

9.1arguments是形参的副本(类似浅拷贝)

'use strict'
function fn(a, obj){
  arguments[0] = 2
  arguments[1].b = 2
  console.log(a) // 严格模式为1;非严格模式为2
  console.log(obj.b) // 2,因为js中object是地址传递
}
fn(1, {b: 1})

9.2arguments不能作为变量名或函数名,类似关键字

'use strict'
var arguments = 1 // 严格模式下将报错;非严格模式将申明一个值为1的变量arguments

// 严格模式下将报错;非严格模式将申明一个对应的arguments函数
function arguments() {
  // some code
}

10.禁用caller与callee

'use strict'
function fn() {
  console.log(arguments.callee.caller, fn.caller) // 严格模式下报错;非严格模式指向fn2
  console.log(arguments.callee) // 严格模式报错;非严格模式指向fn
}
function fn2() {
  fn()
}
fn2()

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS根据年月获得当月天数的实现代码
Jul 03 Javascript
jQuery验证表单格式的使用方法
Jan 10 Javascript
JS实现针对给定时间的倒计时功能示例
Apr 11 Javascript
bootstrap multiselect下拉列表功能
Aug 22 Javascript
详解Chart.js轻量级图表库的使用经验
May 22 Javascript
vue-cli3脚手架的配置及使用教程
Aug 28 Javascript
JS中min函数实例讲解
Feb 18 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
Aug 12 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
Sep 05 Javascript
关于vue的列表图片选中打钩操作
Sep 09 Javascript
JS数组索引检测中的数据类型问题详解
Jan 11 Javascript
Ajax请求超时与网络异常处理图文详解
May 23 Javascript
vue.js 实现a标签href里添加参数
Nov 12 #Javascript
VUEX 数据持久化,刷新后重新获取的例子
Nov 12 #Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
Nov 12 #Javascript
实现vuex与组件data之间的数据同步更新方式
Nov 12 #Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
Nov 12 #Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
Nov 12 #Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
Nov 11 #Javascript
You might like
国外PHP程序员的13个好习惯小结
2012/02/20 PHP
浅析虚拟主机服务器php fsockopen函数被禁用的解决办法
2013/08/07 PHP
tp5修改(实现即点即改)
2019/10/18 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
用Javascript实现UTF8编码转换成gb2312编码
2006/12/22 Javascript
js类中获取外部函数名的方法
2007/08/19 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
2013/05/27 Javascript
JS中三目运算符和if else的区别分析与示例
2014/11/21 Javascript
js实现兼容IE和FF的上下层的移动
2015/05/04 Javascript
JavaScript数组对象赋值用法实例
2015/08/04 Javascript
如何使用jquery easyui创建标签组件
2015/11/18 Javascript
jQuery实现Tab选项卡切换效果简单演示
2015/11/23 Javascript
js倒计时简单实现方法
2015/12/17 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
2016/06/06 Javascript
浅谈js原生拖放
2016/11/21 Javascript
利用js获取下拉框中所选的值
2016/12/01 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
2017/02/14 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
2018/10/11 Javascript
Javascript实现秒表计时游戏
2020/05/27 Javascript
python使用pandas实现数据分割实例代码
2018/01/25 Python
教你用Python创建微信聊天机器人
2020/03/31 Python
让代码变得更易维护的7个Python库
2018/10/09 Python
python多线程并发及测试框架案例
2019/10/15 Python
解决Keras使用GPU资源耗尽的问题
2020/06/22 Python
Python数据可视化实现漏斗图过程图解
2020/07/20 Python
Python的Tqdm模块实现进度条配置
2021/02/24 Python
利用css3制作3D样式按钮实现代码
2013/03/18 HTML / CSS
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
2013/06/03 HTML / CSS
新加坡领先的时尚生活方式零售品牌:CHARLES & KEITH
2018/01/16 全球购物
Strawberrynet草莓网新加坡站:护肤、彩妆、香水及美发产品
2018/08/31 全球购物
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
个人存款证明书
2014/10/18 职场文书
三方协议书
2015/01/27 职场文书
2016廉洁从政心得体会
2016/01/19 职场文书
Mybatis-plus在项目中的简单应用
2021/07/01 Java/Android
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题