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 + Ajax调用webService实例代码(asp.net)
Aug 27 Javascript
jQuery的deferred对象使用详解
Aug 20 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
Oct 24 Javascript
jquery实现文本框的禁用和启用
Dec 07 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
Mar 30 Javascript
Vue动态实现评分效果
May 24 Javascript
对Vue table 动态表格td可编辑的方法详解
Aug 28 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
Sep 24 Javascript
用js编写留言板
Mar 17 Javascript
深入分析JavaScript 事件循环(Event Loop)
Jun 19 Javascript
vuex中store存储store.commit和store.dispatch的用法
Jul 24 Javascript
openlayers 3实现车辆轨迹回放
Sep 24 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
后宫无数却洁身自好的男主,唐三只爱小舞
2020/03/02 国漫
星际初学者游戏中永远要做的事
2020/03/04 星际争霸
php adodb操作mysql数据库
2009/03/19 PHP
drupal 代码实现URL重写
2011/05/04 PHP
使用php统计字符串中中英文字符的个数
2013/06/23 PHP
PHP消息队列用法实例分析
2016/02/12 PHP
PHP简单获取及判断提交来源的方法
2016/04/22 PHP
使用PHPWord生成word文档的方法详解
2019/06/06 PHP
关于JavaScript的gzip静态压缩方法
2007/01/05 Javascript
javascript 二维数组的实现与应用
2010/03/16 Javascript
javascript正则表达式中参数g(全局)的作用
2010/11/11 Javascript
js数字转换为float,取N位小数
2014/02/08 Javascript
jquery插件开发之实现md5插件
2014/03/17 Javascript
JavaScript 学习笔记之语句
2015/01/14 Javascript
深入分析下javascript中的[]()+!
2015/07/07 Javascript
谈谈对offsetleft兼容性的理解
2015/11/11 Javascript
jQuery实现底部浮动窗口效果
2016/09/07 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
2016/10/25 Javascript
使用Vue组件实现一个简单弹窗效果
2018/04/23 Javascript
nodejs npm错误Error:UNKNOWN:unknown error,mkdir 'D:\Develop\nodejs\node_global'at Error
2019/03/02 NodeJs
通过angular CDK实现页面元素拖放的步骤详解
2020/07/01 Javascript
vue实现日历表格(element-ui)
2020/09/24 Javascript
[55:18]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python获取apk文件URL地址实例
2013/11/01 Python
python通过wxPython打开一个音频文件并播放的方法
2015/03/25 Python
python中关于for循环的碎碎念
2017/06/30 Python
Python中利用LSTM模型进行时间序列预测分析的实现
2019/07/26 Python
某个公司的Java笔面试题
2016/03/11 面试题
初二学习计划书范文
2014/04/27 职场文书
公司应聘求职信
2014/06/21 职场文书
女生抽烟检讨书
2014/10/05 职场文书
党员个人整改方案及措施
2014/10/25 职场文书
西柏坡导游词
2015/02/05 职场文书
2015年十一国庆节演讲稿
2015/03/20 职场文书
恋恋笔记本观后感
2015/06/16 职场文书
同意落户证明
2015/06/19 职场文书