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实现的抽象CSS圆角效果!!
May 03 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
Nov 01 Javascript
Jquery post传递数组方法实现思路及代码
Apr 28 Javascript
javascript检查表单数据是否改变的方法
Jul 30 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
Apr 06 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
Nov 02 Javascript
浅析JavaScript中的array数组类型系统
Jul 18 Javascript
Bootstrap进度条实现代码解析
Mar 07 Javascript
微信小程序实战之自定义toast(6)
Apr 18 Javascript
Vue.js递归组件构建树形菜单
Dec 24 Javascript
详解node.js中的npm和webpack配置方法
Jan 21 Javascript
vue日历/日程提醒/html5本地缓存功能
Sep 02 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之第六天
2006/10/09 PHP
PHP中使用正则表达式提取中文实现笔记
2015/01/20 PHP
总结对比php中的多种序列化
2016/08/28 PHP
php根据用户名和手机号查询是否存在手机号码
2017/02/16 PHP
doctype后如何获得body.clientHeight的方法
2007/07/11 Javascript
Prototype源码浅析 String部分(四)之补充
2012/01/16 Javascript
JS实现点击下载的小例子
2013/07/10 Javascript
JS正则表达式大全(整理详细且实用)
2013/11/14 Javascript
Jquery解析json字符串及json数组的方法
2015/05/29 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
2017/04/13 Javascript
分享19个JavaScript 有用的简写写法
2017/07/07 Javascript
简单实现js上传文件功能
2017/08/21 Javascript
微信小程序之蓝牙的链接
2017/09/26 Javascript
记一次webpack3升级webpack4的踩坑经历
2018/06/12 Javascript
最简单的vue消息提示全局组件的方法
2019/06/16 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
2020/05/09 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
2020/12/01 Vue.js
WebPack工具运行原理及入门教程
2020/12/02 Javascript
使用python绘制常用的图表
2016/08/27 Python
在python下使用tensorflow判断是否存在文件夹的实例
2019/06/10 Python
python 三元运算符使用解析
2019/09/16 Python
python操作cfg配置文件方式
2019/12/22 Python
pytorch SENet实现案例
2020/06/24 Python
python中doctest库实例用法
2020/12/31 Python
CSS3之多背景background使用示例
2013/10/18 HTML / CSS
白酒业务员岗位职责
2013/12/27 职场文书
建筑系毕业生自我鉴定
2014/01/24 职场文书
物业管理毕业生的自我评价
2014/02/17 职场文书
售后服务承诺书范文
2014/03/26 职场文书
优秀学生评语大全
2014/04/25 职场文书
党的群众路线教育实践活动查摆问题自查报告
2014/10/10 职场文书
2014年人民调解工作总结
2014/12/08 职场文书
2015年新农合工作总结
2015/03/30 职场文书
培训讲师开场白
2015/06/01 职场文书
车辆管理制度范本
2015/08/05 职场文书
运动会200米广播稿
2015/08/19 职场文书