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判断IE浏览器版本过低示例代码
Nov 22 Javascript
关于编写性能高效的javascript事件的技术
Nov 28 Javascript
javascript常用代码段搜集
Dec 04 Javascript
JavaScript实现在标题栏上显示当前日期的方法
Mar 19 Javascript
初步了解javascript面向对象
Nov 09 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
Feb 14 Javascript
微信开发 js实现tabs选项卡效果
Oct 28 Javascript
js无提示关闭浏览器窗口的两种方法分析
Nov 06 Javascript
js实现手机web图片左右滑动效果
Dec 29 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
Feb 10 Javascript
jquery实现下载图片功能
Jul 18 jQuery
Vue中引入svg图标的两种方式
Jan 14 Vue.js
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.ini中文版(1)
2006/10/09 PHP
PHP中nowdoc和heredoc使用需要注意的一点
2014/03/21 PHP
PHP的PDO大对象(LOBs)
2019/01/27 PHP
获取DOM对象的几种扩展及简写
2006/10/09 Javascript
sina的lightbox效果。
2007/01/09 Javascript
jQuery动态添加删除select项(实现代码)
2013/09/03 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
2015/01/27 Javascript
jQuery无刷新分页完整实例代码
2015/10/27 Javascript
JavaScript中Object.prototype.toString方法的原理
2016/02/24 Javascript
JS中dom0级事件和dom2级事件的区别介绍
2016/05/05 Javascript
JavaScript设计模式开发中组合模式的使用教程
2016/05/18 Javascript
纯js和css完成贪吃蛇小游戏demo
2016/09/01 Javascript
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
解决vue router组件状态刷新消失的问题
2018/08/01 Javascript
vue的keep-alive用法技巧
2019/08/15 Javascript
[47:38]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python学习小技巧之列表项的推导式与过滤操作
2017/05/20 Python
python实现mysql的读写分离及负载均衡
2018/02/04 Python
浅谈python中字典append 到list 后值的改变问题
2018/05/04 Python
python 读取文件并替换字段的实例
2018/07/12 Python
用Python解数独的方法示例
2019/10/24 Python
Python高级特性——详解多维数组切片(Slice)
2019/11/26 Python
Python学习之os模块及用法
2020/06/03 Python
python 模拟登录B站的示例代码
2020/12/15 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
Django视图类型总结
2021/02/17 Python
德国古洛迷亚百货官网:GALERIA Kaufhof
2017/06/20 全球购物
师范应届毕业生自荐信
2013/11/18 职场文书
抄作业检讨书
2014/02/17 职场文书
物业管理工作方案
2014/05/10 职场文书
涉密人员保密承诺书
2014/05/28 职场文书
法人代表身份证明书及授权委托书
2014/09/16 职场文书
党的作风建设心得体会
2014/10/22 职场文书
行政人事专员岗位职责
2015/04/07 职场文书
python小程序之飘落的银杏
2021/04/17 Python