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移动div层-javascript 拖动层
Mar 22 Javascript
ie下动态加态js文件的方法
Sep 13 Javascript
Jquery 获取checkbox的checked问题
Nov 16 Javascript
用js实现trim()的解决办法
Apr 16 Javascript
判断及设置浏览器全屏模式
Apr 20 Javascript
js动态创建标签示例代码
Jun 09 Javascript
jQuery使用元素属性attr赋值详解
Feb 27 Javascript
使用Jquery实现每日签到功能
Apr 03 Javascript
Jquery代码实现图片轮播效果(一)
Aug 12 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
BootStrap表单控件之复选框checkbox和单选择按钮radio
May 23 Javascript
ES11新增的这9个新特性,你都掌握了吗
Oct 15 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中file_exists函数使用详解
2015/05/08 PHP
Add a Picture to a Microsoft Word Document
2007/06/15 Javascript
基于jquery创建的一个图片、视频缓冲的效果样式插件
2012/08/28 Javascript
jQuery常用操作方法及常用函数总结
2014/06/19 Javascript
使用documentElement正确取得当前可见区域的大小
2014/07/25 Javascript
Nodejs异步回调的优雅处理方法
2014/09/25 NodeJs
IE中getElementsByName()对有些元素无效的解决方案
2014/09/28 Javascript
浅谈Javascript中匀速运动的停止条件
2014/12/19 Javascript
javascript+ajax实现产品页面加载信息
2015/07/09 Javascript
jquery专业的导航菜单特效代码分享
2015/08/29 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
Bootstrap表单控件学习使用
2017/03/07 Javascript
基于EasyUI的基础之上实现树形功能菜单
2017/06/28 Javascript
详解NODEJS的http实现
2018/01/04 NodeJs
在Vue组件上动态添加和删除属性方法
2018/02/23 Javascript
vue做移动端适配最佳解决方案(亲测有效)
2018/09/04 Javascript
vue 表单之通过v-model绑定单选按钮radio
2019/05/13 Javascript
使用JS监听键盘按下事件(keydown event)
2019/11/07 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
Windows下安装python2.7及科学计算套装
2015/03/05 Python
Python日志模块logging简介
2015/04/13 Python
python实现一次创建多级目录的方法
2015/05/15 Python
Python使用线程来接收串口数据的示例
2019/07/02 Python
Pandas_cum累积计算和rolling滚动计算的用法详解
2019/07/04 Python
Python Pandas 箱线图的实现
2019/07/23 Python
使用浏览器访问python写的服务器程序
2019/10/10 Python
python 插入日期数据到Oracle实例
2020/03/02 Python
Lookfantastic德国官网:英国知名美妆购物网站
2017/06/11 全球购物
党支部书记岗位责任制
2014/02/11 职场文书
考核评语大全
2014/04/29 职场文书
商业街策划方案
2014/05/31 职场文书
交通事故委托书范本
2014/09/28 职场文书
公司离职证明范本
2014/10/17 职场文书
争先创优个人总结
2015/03/04 职场文书
Python数据可视化之用Matplotlib绘制常用图形
2021/06/03 Python
Netty分布式客户端接入流程初始化源码分析
2022/03/25 Java/Android