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 相关文章推荐
jQuery 使用手册(五)
Sep 23 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
Apr 26 Javascript
利用浏览器全屏api实现js全屏
Jan 16 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 Javascript
bootstrap table表格插件使用详解
May 08 Javascript
js移动端图片压缩上传功能
Aug 18 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
Oct 25 Javascript
实例解析ES6 Proxy使用场景介绍
Jan 08 Javascript
使用Node.js写一个代码生成器的方法步骤
May 10 Javascript
Vue动态创建注册component的实例代码
Jun 14 Javascript
Vue 实现拨打电话操作
Nov 16 Javascript
JavaScript构造函数原理及实现流程解析
Nov 19 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
比特率,大家看看这个就不用收音机音质去比MP3音质了
2021/03/01 无线电
php函数之子字符串替换 str_replace
2011/03/23 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
PHP使用函数用法详解
2018/09/30 PHP
PHP配合fiddler抓包抓取微信指数小程序数据的实现方法分析
2020/01/02 PHP
JQuery EasyUI 日期控件如何控制日期选择区间
2014/05/05 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
Jquery基础教程之DOM操作
2015/08/19 Javascript
简单介绍jsonp 使用小结
2016/01/27 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
2016/09/04 Javascript
JS实现点击Radio动态更新table数据
2017/07/18 Javascript
JS 中LocalStorage和SessionStorage的使用
2017/08/17 Javascript
javascript实现Emrips反质数枚举的示例代码
2017/12/06 Javascript
在vue中使用jointjs的方法
2018/03/24 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
2019/01/07 Javascript
Node.js原生api搭建web服务器的方法步骤
2019/02/15 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
2019/04/15 Javascript
jquery.pager.js实现分页效果
2019/07/29 jQuery
ElementUI之Message功能拓展详解
2019/10/18 Javascript
JavaScript中变量提升机制示例详解
2019/12/27 Javascript
vue-video-player视频播放器使用配置详解
2020/10/23 Javascript
Python的条件语句与运算符优先级详解
2015/10/13 Python
Python排序搜索基本算法之归并排序实例分析
2017/12/08 Python
用python 批量更改图像尺寸到统一大小的方法
2018/03/31 Python
python使用正则表达式来获取文件名的前缀方法
2018/10/21 Python
python爬虫之urllib,伪装,超时设置,异常处理的方法
2018/12/19 Python
使用turtle绘制五角星、分形树
2019/10/06 Python
Python3.6安装卸载、执行命令、执行py文件的方法详解
2020/02/20 Python
通过实例解析Python RPC实现原理及方法
2020/07/07 Python
Python用requests库爬取返回为空的解决办法
2021/02/21 Python
关于运动会的广播稿50字
2014/10/17 职场文书
小学国庆节活动总结
2015/03/23 职场文书
西游记读书笔记
2015/06/25 职场文书
2016年寒假见闻
2015/10/10 职场文书
Python自动化爬取天眼查数据的实现
2021/06/15 Python
HTML页面中使两个div并排显示的实现
2022/05/15 HTML / CSS