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克隆对象深度介绍
Nov 20 Javascript
javascript if条件判断方法小结
May 17 Javascript
详解jquery中$.ajax方法提交表单
Nov 03 Javascript
jquery实现九宫格大转盘抽奖
Nov 13 Javascript
浅析JavaScript中的对象类型Object
May 26 Javascript
canvas实现图像布局填充功能
Feb 06 Javascript
微信小程序 input输入及动态设置按钮的实现
Oct 27 Javascript
vue通过点击事件读取音频文件的方法
May 30 Javascript
微信小程序图表插件wx-charts用法实例详解
May 20 Javascript
vue封装swiper代码实例解析
Oct 08 Javascript
ZK中使用JS读取客户端txt文件内容问题
Nov 07 Javascript
JavaScript常用进制转换及位运算实例解析
Oct 14 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
业余方法DIY电子管FM收音机
2021/03/02 无线电
使用ThinkPHP自带的Http类下载远程图片到本地的实现代码
2011/08/02 PHP
php结合redis高并发下发帖、发微博的实现方法
2016/12/15 PHP
基于php编程规范(详解)
2017/08/17 PHP
php之可变变量的实例详解
2017/09/12 PHP
jQuery图片轮播的具体实现
2013/09/11 Javascript
JQuery中使用on方法绑定hover事件实例
2014/12/09 Javascript
ECMAScript6函数默认参数
2015/06/12 Javascript
jQuery自定义滚动条完整实例
2016/01/08 Javascript
Web开发必知Javascript技巧大全
2016/02/23 Javascript
JS使用cookie设置样式的方法
2016/06/30 Javascript
基于JavaScript实现屏幕滚动效果
2017/01/18 Javascript
jQuery的$.extend 浅拷贝与深拷贝
2017/03/08 Javascript
详解Weex基于Vue2.0开发模板搭建
2017/03/20 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
2019/05/13 Javascript
Vue项目打包编译优化方案
2020/09/16 Javascript
微信小程序反编译的实现
2020/12/10 Javascript
基于JavaScript实现简单的轮播图
2021/03/03 Javascript
python实现维吉尼亚加密法
2019/03/20 Python
python 检查数据中是否有缺失值,删除缺失值的方式
2019/12/02 Python
django有外键关系的两张表如何相互查找
2020/02/10 Python
详解HTML5.2版本带来的修改
2020/05/06 HTML / CSS
史上最全面的Java面试题汇总!
2015/02/03 面试题
先进个人事迹材料
2014/01/25 职场文书
幼儿园中秋节活动反思
2014/02/16 职场文书
人事专员的岗位职责
2014/03/01 职场文书
家居装修公司创业计划书范文
2014/03/20 职场文书
《雕塑之美》教学反思
2014/04/24 职场文书
横幅标语大全
2014/06/17 职场文书
2014法院干警廉洁警示教育思想汇报
2014/09/13 职场文书
车辆年检委托书范本
2014/10/14 职场文书
硕士学位论文评语
2014/12/31 职场文书
安全员岗位职责
2015/02/10 职场文书
十月围城观后感
2015/06/08 职场文书
伊索寓言读书笔记
2015/06/30 职场文书
java解析XML详解
2021/07/09 Java/Android