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作用域链使用介绍
Aug 29 Javascript
JavaScript修改css样式style动态改变元素样式
Dec 16 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
May 28 Javascript
jquery 3D 标签云示例代码
Jun 12 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
Sep 10 Javascript
jQuery()方法的第二个参数详解
Apr 29 Javascript
JavaScript实现把数字转换成中文
Jun 29 Javascript
jQuery循环遍历子节点并获取值的方法
Apr 14 Javascript
javascript创建对象的几种模式介绍
May 06 Javascript
Nuxt使用Vuex的方法示例
Sep 06 Javascript
vue element-ui实现动态面包屑导航
Dec 23 Javascript
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
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获取http请求的头信息实现步骤
2012/12/16 PHP
PHP 与 UTF-8 的最佳实践详细介绍
2017/01/04 PHP
phpStudy2016 配置多个域名期间遇到的问题小结
2017/10/19 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
PHP hebrev()函数用法讲解
2019/02/21 PHP
YII框架http缓存操作示例
2019/04/29 PHP
javascript时间自动刷新实现原理与步骤
2013/01/06 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
2013/11/07 Javascript
再谈Jquery Ajax方法传递到action(补充)
2014/05/12 Javascript
javascript中cookie对象用法实例分析
2015/01/30 Javascript
js实现动态加载脚本的方法实例汇总
2015/11/02 Javascript
AngularJS实现全选反选功能
2015/12/08 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
2016/03/08 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
2016/08/24 Javascript
利用JS轻松实现获取表单数据
2016/12/06 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
2017/02/06 Javascript
浅谈关于angularJs中使用$.ajax的注意点
2017/08/12 Javascript
详解关于react-redux中的connect用法介绍及原理解析
2017/09/11 Javascript
React Native使用百度Echarts显示图表的示例代码
2017/11/07 Javascript
vue+springmvc导出excel数据的实现代码
2018/06/27 Javascript
在Uni中使用Vue的EventBus总线机制操作
2020/07/31 Javascript
使用python在校内发人人网状态(人人网看状态)
2014/02/19 Python
对pycharm 修改程序运行所需内存详解
2018/12/03 Python
Python使用paramiko操作linux的方法讲解
2019/02/25 Python
解决Atom安装Hydrogen无法运行python3的问题
2019/08/28 Python
详解HTML5 Canvas标签及基本使用
2020/01/10 HTML / CSS
英国知名的皮手套品牌:Dents
2016/11/13 全球购物
保加利亚服装和鞋类购物网站:Bibloo.bg
2020/11/08 全球购物
文员个人的求职信范文
2013/09/26 职场文书
广播体操比赛口号
2014/06/10 职场文书
2014乡镇干部对照检查材料思想汇报
2014/09/26 职场文书
普通员工辞职信范文
2015/05/12 职场文书
教师读书笔记
2015/06/29 职场文书
2016年国培心得体会及反思
2016/01/13 职场文书
幼儿体育课教学反思
2016/02/16 职场文书
2016年大学光棍节活动总结
2016/04/05 职场文书