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事件冒泡传递(cancelBubble 、stopPropagation)
May 08 Javascript
iframe子页面获取父页面元素的方法
Nov 05 Javascript
JavaScript中获取鼠标位置相关属性总结
Oct 11 Javascript
js实现鼠标悬浮给图片加边框的方法
Jan 30 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
May 13 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
Oct 13 Javascript
ES6概念 Symbol toString()方法
Dec 25 Javascript
Async Validator 异步验证使用说明
Jul 03 Javascript
vue 1.0 结合animate.css定义动画效果
Jul 11 Javascript
移动端如何用下拉刷新的方式实现上拉加载
Dec 10 Javascript
vue 实现小程序或商品秒杀倒计时
Apr 14 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
Dec 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令牌 Token改进版
2008/07/18 PHP
PHP获取本周第一天和最后一天示例代码
2014/02/24 PHP
destoon实现会员商铺中指定会员或会员组投放广告的方法
2014/08/21 PHP
PHP实现获取中英文首字母
2015/06/19 PHP
thinkPHP框架实现的无限回复评论功能示例
2018/06/09 PHP
javascript innerHTML使用分析
2010/12/03 Javascript
JavaScript实现关键字高亮功能
2014/11/12 Javascript
JavaScript DOM元素尺寸和位置
2015/04/13 Javascript
javascript实现3D切换焦点图
2015/10/16 Javascript
浅析jQuery 3.0中的Data
2016/06/14 Javascript
javascript中获取class的简单实现
2016/07/12 Javascript
Javacript中自定义的map.js  的方法
2017/11/26 Javascript
基于Vuex无法观察到值变化的解决方法
2018/03/01 Javascript
vue+vuex+axios实现登录、注册页权限拦截
2018/03/09 Javascript
angular4强制刷新视图的方法
2018/10/09 Javascript
使用jQuery实现掷骰子游戏
2019/10/24 jQuery
[05:40]DOTA2荣耀之路6:Wings最后进攻
2018/05/30 DOTA
python使用datetime模块计算各种时间间隔的方法
2015/03/24 Python
keras小技巧——获取某一个网络层的输出方式
2020/05/23 Python
网页切图的CSS和布局经验与要点
2015/04/09 HTML / CSS
html5文字阴影效果text-shadow使用示例
2013/07/25 HTML / CSS
一个基于canvas的移动端图片编辑器的实现
2020/10/28 HTML / CSS
ALLSAINTS英国官网:伦敦新锐潮流品牌
2016/09/19 全球购物
阿拉伯世界最大的电子商务网站:Souq沙特阿拉伯
2016/10/28 全球购物
德国鞋子网上商店:Omoda.de
2017/03/31 全球购物
戴尔英国官网:Dell英国
2017/05/27 全球购物
乌克兰第一的珠宝网上商店:Gold.ua
2019/11/29 全球购物
爸爸的花儿落了教学反思
2014/02/20 职场文书
会计岗位描述
2014/02/22 职场文书
副总经理任命书
2014/06/05 职场文书
思想作风建设心得体会
2014/10/22 职场文书
毕业论文答辩稿范文
2015/06/23 职场文书
小学生暑假生活总结
2015/07/13 职场文书
2015年库房管理工作总结
2015/10/14 职场文书
2019年妇科护士的自我鉴定(3篇)
2019/09/26 职场文书
如何在Python项目中引入日志
2021/05/31 Python