javascript严格模式详解(含严格模式与非严格模式的区别)

 更新时间:2019年11月12日 09:12:56   作者:jm365  
这篇文章主要介绍了javascript严格模式详解(含严格模式与非严格模式的区别),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

严格模式的优缺点

优点:

  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()

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 微信小程序开发(一):服务器获取数据列表渲染操作示例

    微信小程序开发(一):服务器获取数据列表渲染操作示例

    这篇文章主要介绍了微信小程序开发服务器获取数据列表渲染操作,结合实例形式分析了微信小程序后台获取服务器数据及前台列表渲染相关操作实现技巧,需要的朋友可以参考下
    2020-06-06
  • javascript操作select元素实例分析

    javascript操作select元素实例分析

    这篇文章主要介绍了javascript操作select元素的方法,可实现针对select元素选中元素时动态改变html元素的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • 利用JavaScript实现创建虚拟键盘的示例代码

    利用JavaScript实现创建虚拟键盘的示例代码

    这篇文章主要为大家详细介绍了如何利用JavaScript实现创建虚拟键盘,文中的示例代码讲解详细,对我们学习JavaScript有一定帮助,需要的可以参考一下
    2022-09-09
  • JavaScript动态添加数据到表单并提交的几种方式

    JavaScript动态添加数据到表单并提交的几种方式

    这篇文章主要介绍了JavaScript动态添加数据到表单并提交,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-06-06
  • 微信小程序input抖动问题的修复方法

    微信小程序input抖动问题的修复方法

    这篇文章主要给大家介绍了关于微信小程序input抖动问题的修复方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • 详解JavaScript如何设置私有属性

    详解JavaScript如何设置私有属性

    这篇文章主要为大家详细介绍了在JavaScript中如何设置私有属性,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考下
    2024-03-03
  • ECharts柱状排名图柱子上方显示文字与图标代码实例

    ECharts柱状排名图柱子上方显示文字与图标代码实例

    我们在绘制柱状图时如果想要柱条上显示文字,可以参考本文,这篇文章主要给大家介绍了关于ECharts柱状排名图柱子上方显示文字与图标的相关资料,需要的朋友可以参考下
    2023-11-11
  • 浅谈webpack打包过程中因为图片的路径导致的问题

    浅谈webpack打包过程中因为图片的路径导致的问题

    下面小编就为大家分享一篇浅谈webpack打包过程中因为图片的路径导致的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • iscroll实现下拉刷新功能

    iscroll实现下拉刷新功能

    这篇文章主要介绍了iscroll实现下拉刷新功能的相关代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • JavaScript 代码压缩工具小结

    JavaScript 代码压缩工具小结

    为了使页面更快的完成加载,经常需要对javascript/css代码进行压缩以减小体积,这里简单列一下用过的压缩工具,同时也作为存档
    2012-02-02

最新评论