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 相关文章推荐
在Z-Blog中运行代码[html][/html](纯JS版)
Mar 25 Javascript
JavaScript判断用户是否对表单进行了修改的方法
Mar 18 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
Sep 09 Javascript
jquery+正则实现统一的表单验证
Sep 20 Javascript
JavaScript面向对象程序设计教程
Mar 29 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
Aug 05 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
Dec 20 Javascript
JavaScript省市级联下拉菜单实例
Feb 14 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
node.js基础知识小结
Feb 26 Javascript
vue实现计步器功能
Nov 01 Javascript
Vue 实例中使用$refs的注意事项
Jan 29 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
用ADODB来让PHP操作ACCESS数据库的方法
2006/12/31 PHP
PHP多线程抓取网页实现代码
2010/07/22 PHP
使用PHP实现阻止用户上传成人照片或者裸照
2014/12/25 PHP
php bootstrap实现简单登录
2016/03/08 PHP
如何在标题栏显示框架内页面的标题
2007/02/03 Javascript
原生js实现shift/ctrl/alt按键的获取
2013/04/08 Javascript
Jquery选择器中使用变量实现动态选择例子
2014/07/25 Javascript
AngularJS 服务详细讲解及示例代码
2016/08/17 Javascript
利用js获取下拉框中所选的值
2016/12/01 Javascript
JS正则子匹配实例分析
2016/12/22 Javascript
微信小程序 switch组件详解及简单实例
2017/01/10 Javascript
Bootstrap导航简单实现代码
2017/03/06 Javascript
JavaScript数据结构之数组的表示方法示例
2017/04/12 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
2017/05/19 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
2017/05/27 Javascript
js读取本地文件的实例
2017/12/22 Javascript
vue单页应用加百度统计代码(亲测有效)
2018/01/31 Javascript
微信小程序实现日历功能
2018/11/27 Javascript
实例讲解JS中pop使用方法
2019/01/27 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
2020/08/06 Javascript
[04:01]2014DOTA2国际邀请赛 TITAN告别Ohaiyo期望明年再战
2014/07/15 DOTA
Python面向对象class类属性及子类用法分析
2018/02/02 Python
TensorFlow损失函数专题详解
2018/04/26 Python
解决已经安装requests,却依然提示No module named requests问题
2018/05/18 Python
用Cython加速Python到“起飞”(推荐)
2019/08/01 Python
jupyter lab的目录调整及设置默认浏览器为chrome的方法
2020/04/10 Python
利用Python如何实时检测自身内存占用
2020/05/09 Python
EJB3.1都有哪些改进
2012/11/17 面试题
人事主管岗位职责范本
2013/12/04 职场文书
秋季运动会表扬稿
2014/01/16 职场文书
中学生爱国演讲稿
2014/09/05 职场文书
学校党委副书记个人对照检查材料思想汇报
2014/09/28 职场文书
个人融资协议书
2014/10/02 职场文书
污水处理保证书
2015/05/09 职场文书
肖申克救赎观后感
2015/06/02 职场文书
关于windows server 2012 DC 环境 重启后蓝屏代码:0xc00002e2的问题
2022/05/25 Servers