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 相关文章推荐
JS面向对象、prototype、call()、apply()
May 14 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
Apr 15 Javascript
原生js制作简单的数字键盘
Apr 24 Javascript
jQuery中inArray方法注意事项分析
Jan 25 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
Mar 31 Javascript
javascript 广告移动特效的实现代码
Jun 25 Javascript
JS数组返回去重后数据的方法解析
Jan 03 Javascript
使用vue-cli编写vue插件的方法
Feb 26 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
Aug 09 Javascript
了解JavaScript中的选择器
May 24 Javascript
vue 组件简介
Jul 31 Javascript
基于react项目打包css引用路径错误解决方案
Oct 28 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
多重?l件?合查?(一)
2006/10/09 PHP
phpfans留言版用到的install.php
2007/01/04 PHP
PHP 获取目录下的图片并随机显示的代码
2009/12/28 PHP
PHP查询网站的PR值
2013/10/30 PHP
Windows下安装PHP单元测试环境PHPUnit图文教程
2014/10/24 PHP
PHP文件与目录操作示例
2016/12/24 PHP
laravel框架之数据库查出来的对象实现转化为数组
2019/10/23 PHP
编辑浪子版表单验证类
2007/05/12 Javascript
jquery 选项卡效果 新手代码
2011/07/08 Javascript
jQuery基础_入门必看知识点
2016/07/04 Javascript
jquery延迟对象解析
2016/10/26 Javascript
JavaScript中绑定事件的三种方式及去除绑定
2016/11/05 Javascript
BootStrap轮播HTML代码(推荐)
2016/12/10 Javascript
angular.fromJson与toJson方法用法示例
2017/05/17 Javascript
js原生方法被覆盖,从新赋值原生的方法
2018/01/02 Javascript
浅谈node中的cluster集群
2018/06/02 Javascript
JavaScript的Object.defineProperty详解
2018/07/09 Javascript
Vue中插入HTML代码的方法
2018/09/21 Javascript
微信小程序上传文件到阿里OSS教程
2019/05/20 Javascript
Vue使用axios出现options请求方法
2019/05/30 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
2019/06/24 Javascript
解决layui checkbox 提交多个值的问题
2019/09/02 Javascript
[01:33:25]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第一场 1月24日
2021/03/11 DOTA
python 文件操作api(文件操作函数)
2016/08/28 Python
Python实现动态加载模块、类、函数的方法分析
2017/07/18 Python
Django 5种类型Session使用方法解析
2020/04/29 Python
Python替换NumPy数组中大于某个值的所有元素实例
2020/06/08 Python
Canvas在超级玛丽游戏中的应用详解
2021/02/06 HTML / CSS
马来西亚领先的在线礼品店:Giftr
2018/08/23 全球购物
澳大利亚顶级美发和美容贸易超市:glamaCo
2020/01/19 全球购物
承兑汇票转让证明怎么写?
2014/11/30 职场文书
实施意见格式范本
2015/06/05 职场文书
大学学生会主席竞选稿
2015/11/19 职场文书
大学军训心得体会800字
2016/01/11 职场文书
导游词之包公祠
2019/11/25 职场文书
JS代码编译器Monaco使用方法
2021/06/11 Javascript