一文带你了解一下JavaScript中什么是严格模式

 更新时间:2023年11月18日 09:55:23   作者:Minfai  
严格模式是 ECMAScript 5 引入的一种运行模式,可以让 JavaScript 在更加严格的条件下运行,本文主要为大家详细介绍了JavaScript中严格模式的使用,需要的可以参考下

前言

JavaScript 是一门动态弱类型的编程语言,同其他语言一样,有它自身的语法,数据类型,表达式。但是它有着一些缺陷,由于采用的是弱类型,对使用的数据类型未作出严格的要求,最初开发时并未考虑周全及设计阶段过于仓促,相对于 Java,其设计简单紧凑,并未考虑到复杂应用的需要。所以为了解决这个问题,出现了严格模式。

什么是严格模式

严格模式是 ECMAScript 5 引入的一种运行模式,可以让 JavaScript 在更加严格的条件下运行。该模式为 Js 定义了一种不同的解析与执行。

ECMAScript 是由 Ecma 国际在标准 ECMA-262 中定义的脚本语言规范,也可以理解为 JavaScript 的一个标准

它通过添加一个特定的编译指示符(即 "use strict")来启用。严格模式可以让代码中一些不安全的行为被禁用,从而使 JavaScript 引擎在执行代码时更加严格,更严格的条件去检查开发者的代码错误,减少出现潜在问题的可能性,能让我们的代码更合理、更安全、更严谨。

<script>
  // 开启严格模式
  "use strict";
  x = 10
  console.log(x)
</script>

在控制台打印过程中报错

它可以全局使用,也可以在局部中使用。如下面例子中在函数内部使用严格模式:

  x = 10
  console.log(x)

  function fun() {
    "use strict";
    y = 20
    console.log(y)
  }
  fun()

未在严格模式下的 x 成功打印出来,而在严格模式下 fun 函数里的 y 就会报错提示 y 没有定义

作用

变量声明

在正常模式中,一个变量没有声明赋值,该变量就提升为全局变量。而在严格模式中,变量一定要声明。

"use strict";
let name = '小明'
console.log(x)

// error
name = '小明'
console.log(x) // name is not defined

禁止删除变量

在正常模式中,可以使用 delete 来删除变量。而在严格模式下,只能删除对象属性。

"use strict";
let a = 1
delete a // 'delete' cannot be called on an identifier in strict mode.

并且严格模式下,对删除不可删除属性、对象只读属性进行赋值、getter方法读取的属性进行赋值等都会报错

函数参数

在严格模式下参数名不能重复,Duplicate parameter name not allowed in this context 意思是 此上下文中不允许有重复的参数名称

  "use strict";
  function fun(name, name, name) { // Duplicate parameter name not allowed in this context
    console.log(111)
  }

函数 this

在正常模式下,在全局调用情况中函数内部的值为全局对象。在严格模式下,函数内部的 this 值为 undefined

"use strict";
function fun() {
  console.log(this); // 输出 undefined
}
fun();

// 正常模式
function fun() {
  console.log(this); // 输出 window 对象
}
fun();

禁用 with

with 可以按序检索的对象列表,通过它可以进行变量名的解析。with 语句用于临时拓展作用域链。

"use strict";
var obj = { name: '小明' };
with (obj) {
  console.log(name); // 'with' statements are not allowed in strict mode.
}

禁用 eval

eval() 函数会计算 JavaScript 字符串,并把它作为脚本代码来执行。

eval("var x = 10");

arguments

arguments 传递进函数的参数列表,它是一个类数组对象,它的属性名是按照传入参数的顺序列来的,既然是类数组对象,就是它还有个 length 属性。在严格模式下,对 arguments 有着一些限制。

严格模式下,arguments 不再追踪参数的变化

"use strict";
function fun(name) {
  name = '张三'
  return [name, arguments[0]]
}
console.log(fun('小明')) // [ 张三 小明 ]

// 正常模式
function fun(name) {
  name = '张三'
  return [name, arguments[0]]
}
console.log(fun('小明')) // [ 张三 张三 ]

在正常模式下,打印 arguments

function fun(name) {
    return arguments
}
console.log(fun('小明'))

如图显示 arguments 有着 callee 该属性,该属性是一个指针,指向拥有这个 arguments 对象的函数。

而在严格模式下无法调用 callee

"use strict";
function fun(name) {
    return arguments
}
console.log(fun('小明'))

callee 属性中报错,表示不能在严格模式函数或对其进行调用的arguments对象上访问“caller”、“callee”和“arguments”属性

总结

严格模式让我们的代码更加规范,它可以帮助开发者避免一些常见的错误和降低代码的不确定性,提高编译器效率,增加运行速度。它给我们代码增加了一些限制和检查,会对项目的代码带来一些影响,所以我们要根据项目决定是否来使用严格模式。

到此这篇关于一文带你了解一下JavaScript中什么是严格模式的文章就介绍到这了,更多相关JavaScript严格模式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • CSS、JS文件无法正确加载至页面问题与解决办法分享

    CSS、JS文件无法正确加载至页面问题与解决办法分享

    这篇文章主要给大家介绍了关于CSS、JS文件无法正确加载至页面问题与解决办法,文中通过图文以及代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2024-01-01
  • js html实现计算器功能

    js html实现计算器功能

    这篇文章主要为大家详细介绍了js html实现计算器功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • javascript简单实现类似QQ头像弹出效果的方法

    javascript简单实现类似QQ头像弹出效果的方法

    这篇文章主要介绍了javascript简单实现类似QQ头像弹出效果的方法,可实现简单的页面元素弹出效果,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • 获取DOM对象的几种扩展及简写

    获取DOM对象的几种扩展及简写

    获取DOM对象的几种扩展及简写...
    2006-10-10
  • 小程序实现事件绑定的方法步骤

    小程序实现事件绑定的方法步骤

    本文主要介绍了小程序实现事件绑定的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • JavaSctit 利用FileReader和滤镜上传图片预览功能

    JavaSctit 利用FileReader和滤镜上传图片预览功能

    FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件内容,使用 File或 Blob对象指定要读取的文件或数据。下面通过本文给大家分享JavaSctit 利用FileReader和滤镜上传图片预览功能,需要的朋友参考下吧
    2017-09-09
  • js模块加载方式浅析

    js模块加载方式浅析

    这篇文章主要为大家详细介绍了js模块加载方式的初级学习资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • 详解A标签中href=

    详解A标签中href=""的几种用法

    这篇文章主要介绍了a标签中href=""的几种用法 ,需要的朋友可以参考下
    2017-08-08
  • 世界上最短的数字判断js代码

    世界上最短的数字判断js代码

    本文给大家分享世界上最短的数字判断js代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • Ajax 加载数据 练习代码

    Ajax 加载数据 练习代码

    这篇文章主要介绍了Ajax 加载数据,主要是为了查询表的显示,不用嵌入php通过ajax调用,现在手机端的更多显示功能都是通过ajax实现的
    2017-01-01

最新评论