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 相关文章推荐
JavaScript 私有成员分析
Jan 13 Javascript
jquery 分页控件实现代码
Nov 30 Javascript
实现web打印的各种方法介绍及实现代码
Jan 09 Javascript
Knockout数组(observable)使用详解示例
Nov 15 Javascript
jquery根据锚点offset值实现动画切换
Sep 11 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
Oct 12 Javascript
JS代码实现table数据分页效果
May 26 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
Nov 02 Javascript
Web制作验证码功能实例代码
Jun 19 Javascript
vue实现验证码按钮倒计时功能
Apr 10 Javascript
详解vuex结合localstorage动态监听storage的变化
May 03 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
May 21 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
我的论坛源代码(四)
2006/10/09 PHP
php smarty 二级分类代码和模版循环例子
2011/06/16 PHP
thinkphp的静态缓存用法分析
2014/11/29 PHP
PHP面向对象程序设计OOP继承用法入门示例
2016/12/27 PHP
php使用Jpgraph创建柱状图展示年度收支表效果示例
2017/02/15 PHP
老鱼 浅谈javascript面向对象编程
2010/03/04 Javascript
jquery限制输入字数,并提示剩余字数实现代码
2012/12/24 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
2015/12/30 Javascript
Bootstrap模仿起筷首页效果
2016/05/09 Javascript
js中遍历Map对象的简单实例
2016/08/08 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
2016/08/24 Javascript
微信小程序图片横向左右滑动案例
2017/05/19 Javascript
简易Vue评论框架的实现(父组件的实现)
2018/01/08 Javascript
iview中Select 选择器多选校验方法
2018/03/15 Javascript
使用js原生实现年份轮播选择效果实例
2021/01/12 Javascript
[43:41]OG vs Newbee 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
Python中自定义函数的教程
2015/04/27 Python
简单讲解Python中的数字类型及基本的数学计算
2016/03/11 Python
Python实现带百分比的进度条
2016/06/28 Python
详解使用pymysql在python中对mysql的增删改查操作(综合)
2017/01/18 Python
python中break、continue 、exit() 、pass终止循环的区别详解
2019/07/08 Python
Python中包的用法及安装
2020/02/11 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
Python3+Flask安装使用教程详解
2021/02/16 Python
canvas绘制视频封面的方法
2018/02/05 HTML / CSS
HttpServlet类中的主要方法都有哪些?各自的作用是什么?
2014/03/16 面试题
前台文员我鉴定
2014/01/12 职场文书
留学推荐信写作指南
2014/01/25 职场文书
求职信的正确写法
2014/07/10 职场文书
2014城乡环境综合治理工作总结
2014/12/19 职场文书
离职感谢信
2015/01/21 职场文书
工程竣工验收申请报告
2015/05/15 职场文书
优质护理服务心得体会
2016/01/22 职场文书
CSS3实现模糊背景的三种效果示例
2021/03/30 HTML / CSS
OpenCV-Python实现图像平滑处理操作
2021/06/08 Python
设置IIS Express并发数
2022/07/07 Servers