javascript中的严格模式

认识严格模式:

在ECMAScript5标准中,JavaScript提出了严格模式的概念(Strict Mode):

  严格模式很好理解,是一种具有限制性的JavaScript模式,从而是代码隐式的脱离了“懒散(sloppy)模式”;

  支持严格模式的浏览器在检测到代码有严格模式时,会以更加严格的方式对代码进行检测和执行; 

严格模式对正常的JavaScript语义进行了一些限制:

  严格模式通过抛出错误来消除一些原有的静默(silent)错误;

  严格模式让JS引擎在执行代码时可以进行更多的优化(不需要对一些特殊的语法进行处理);

  严格模式禁用了在ECMAScript未来版本中可能会定义的一些语法(保留字等);

严格模式限制:

 JavaScript被设计为新手开发者更容易上手,所以有时候本来语法错误,被认为也是可以正常被解析的;但是这种方式可能带来留下安全隐患;在严格模式下,这种失误就会被当作错误,以便可以快速的发现和修正

这里列一些相对比较常见的几个严格模式下的严格语法限制:

1. 无法意外的创建全局变量

 什么是意外的创建变量?看下面这段儿代码:

message = 'Hello World'
console.log(message)

function foo() {
  age = 18
}

foo()
console.log(age)

这是非严格模式下,都是可以打印出来的,严格来讲这种就是错误语法,我都没定义message和age,为什么能直接赋值。这就是意外创建了变量,这在严格模式下是不允许的:开启严格模式只需要在添加 “use strict” 就可以了,如下:

"use strict"

message = 'Hello World'
console.log(message)

function foo() {
  age = 18
}

foo()
console.log(age)

加上之后,再运行就会报错了: 

2. 不允许函数有相同的参数名称

function foo(x, y, x) {
  console.log(x, y, x)
}

foo(10, 20, 30)

上面是非严格模式下,是可以正常执行的,且会打印 30 20 30,后面的x会把前面的x覆盖掉。但是在严格模式下是会抛出错误的,如下: 

"use strict"

function foo(x, y, x) {
  console.log(x, y, x)
}

foo(10, 20, 30)

这是严格模式,执行报错如下: 

3.  严格模式下会使引起静默失效(silently fail:不报错也没有任何效果)的赋值操作抛出异常

看下下面代码示例:

true.name = '哈哈哈'

NaN = '124'

console.log(true.name)
console.log(NaN)

这是非严格模式下,我们给布尔值添加name属性,对NaN进行赋值操作,当然平时开发中是不太可能写这种代码的,我们看下打印结果: 

可以看到代码可以正常执行,且进行了打印,但我们代码种的赋值操作并没有任何效果 

但是在严格模式下是不允许有这种操作的: 

"use strict"

true.name = '哈哈哈'

NaN = '124'

console.log(true.name)
console.log(NaN)

直接报错: 

4. 严格模式下视图删除不可删除的属性,或者视图修改不可修改的属性 

 测试代码如下(非严格模式):

var obj = {}

Object.defineProperty(obj, 'name', {
  configurable: false,
  writable: false,
  value: 'wft'
})

obj.name = '小王'

console.log(obj.name)

delete obj.name

console.log(obj.name)

看下控制台: 

我们上面指定了obj中的name属性不可修改的,也不可删除的,但是我们尝试对其赋值、删除操作,发现运行并无报错,只不过是我们的操作并没有任何效果,但是在严格模式下会直接报错: 

"use strict"

var obj = {}

Object.defineProperty(obj, 'name', {
  configurable: false,
  writable: false,
  value: 'wft'
})

obj.name = '小王'

console.log(obj.name)

delete obj.name

console.log(obj.name)

运行 报错如下: 

5. 不允许0的八进制语法 

在非严格模式下,我们可以使用 0123 来设置八进制的 

"use strict"

// 不允许使用原先的八进制格式 0123

var num8 = 0o123 // 八进制
var num16 = 0x123 // 十六进制
var num2 = 0b100 // 二进制

console.log(num8, num16, num2) // 83 291 4

6. 严格模式下,不允许使用with语句 

说起with语句大多数小伙伴可能对这个不太熟悉啊,其实就是个语句,它可以有自己独立的作用域,我们平时在函数中用到一个变量时,会现在自己的作用域中找,找不到会接上去上层作用域找,直到找不到,但是使用了with语句,它不会像上层找了,直接就找自己的作用域,什么意思呢,看下面代码: 

let obj = { name: 'WFT' }

function foo() {
  const name = '小王'
  function bar() {
    with(obj) {
      console.log(name) // WFT
    }
  }
  bar()
}

foo()

然后这是非严格模式,with中的obj可不是形参哦! 会发现打印出来的name是‘WFT’,而不是‘小王’ ,可以理解为他把obj结构了,在with语句中可以直接访问其中的属性,上面例子中作用域就是直接会去obj中找name属性了,而不会去上层找foo中的name属性,这个也做个了解就好了,真是开发基本不会使用这个with语句的,况且这个在严格模式下是不允许使用with语句的:

严格模式(在编辑器中这么写with下面直接会有波浪线提示不允许这么写的): 

"use strict"

let obj = { name: 'WFT' }

function foo() {
  const name = '小王'
  function bar() {
    with(obj) {
      console.log(name) // WFT
    }
  }
  bar()
}

foo()

运行代码也是直接报错: 

 

7.  严格模式下,eval不再为上层引用变量

eval也是js中的一个自带的函数,可以直接调用 ,可以传入一个字符串,如果是js语句的话,它会直接执行这段儿代码,当然平时开发也不建议去使用它

非严格模式示例代码: 

var jsString = 'var message = "Hello World"; console.log(message)'

eval(jsString)

console.log(message)

我们可以看到控制台会打印两次的,下面的console.log也会打印出message的 

 

但是在严格模式下,只会打印eval中的语句 ,不再为上层引用变量

"use strict"

var jsString = 'var message = "Hello World"; console.log(message)'

eval(jsString)

console.log(message)

控制台: 

 

8. 严格模式下,this绑定不会默认转成对象(this指向有点儿区别) 

看下下面的代码示例: 

"use strict"

// 在严格模式下,自执行函数会指向undefined
// 在非严格模式下,自执行函数 this会直接去引用window
function foo() {
  console.log(this)
}

var obj = {
  name: 'wft',
  foo: foo
}

foo()

obj.foo() // 这样调用的话和非严格模式是一样的  都是会指向调用者 obj

var bar = obj.foo

bar()

控制台打印: 

还有一种是 call apply调用函数的时候,如果在非严格模式下,我们第一个参数传递个null,或者undefined,this都会指向window的,但是在严格模式下,我们传入什么this就会指向什么,传入null,this就指向null,传入undefined,this就指向undefined。 

"use strict"

function foo() {
  console.log(this)
}

foo.call(null) // null
foo.apply(null) // null
foo.call(undefined) // undefined
foo.apply(undefined) // undefined

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/17671.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

软件测试实战,Web测试详细总结 (覆盖所有测试点),你要的都有

目录:导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜) 前言 Web自动化测试&…

在技术圈超卷的当下,学历到底是敲门砖还是枷锁?

前言 最近,突然之间被“孔乙己文学”刷屏了,短时间内“孔乙己文学”迅速走红,孔乙己是中国文学中的一位经典人物,他的长衫被认为是他的象征之一,孔乙己的长衫折射出很多现象,既有社会的,也有教育…

Android平台播放透明视频

Android平台播放透明视频 思路 设计一种特殊的视频,它的一半内容存储alpha信息,另一半内容存储rgb信息,接着通过OpenGL获取每个像素点的alpha值和rgb值进行混合,最后出来的画面就是带有透明效果的视频了。 可以上下的分&#xf…

服务器中了勒索病毒,升级后的Malox勒索病毒特征,勒索病毒解密数据恢复

Mallox勒索病毒是网络上较为流行的勒索病毒,但是随着黑客加密技术的不断升级,Mallox勒索病毒的新升级版本Malox勒索病毒已经开始出现。Malox勒索病毒是一种最近在网络上广泛传播的恶意软件,其感染方式多种多样,主要以加密受害人的…

基于zookeeper实现分布式锁

目录 zookeeper知识点复习 相关概念 java客户端操作 实现思路分析 基本实现 初始化链接 代码落地 优化:性能优化 实现阻塞锁 监听实现阻塞锁 优化:可重入锁 zk分布式锁小结 zookeeper知识点复习 Zookeeper(业界简称zk&#xff…

Zookeeper系统模型介绍

目录 一、数据模型 二、 节点的类型 (1)持久节点 (2)持久顺序节点 (3)临时节点 (4)临时顺序节点 三、客户端命令行 (1)创建节点 (2&…

最新VUE面试题

前言 本文以前端面试官的角度出发,对 Vue 框架中一些重要的特性、框架的原理以问题的形式进行整理汇总,意在帮助作者及读者自测下 Vue 掌握的程度。 本文章节结构以从易到难进行组织,建议读者按章节顺序进行阅读,当然大佬级别的…

操作系统——进程管理

0.关注博主有更多知识 操作系统入门知识合集 目录 0.关注博主有更多知识 4.1进程概念 4.1.1进程基本概念 思考题: 4.1.2进程状态 思考题: 4.1.3进程控制块PCB 4.2进程控制 思考题: 4.3线程 思考题: 4.4临界资源与临…

【分布式技术专题】「授权认证体系」OAuth2.0协议的入门到精通系列之授权码模式

这里写目录标题 OAuth2.0是什么OAuth2.0协议体系的Roles角色OAuth定义了四个角色资源所有者资源服务器客户端授权服务器 传统的客户机-服务器身份验证模型的问题 协议流程认证授权授权码 OAuth2.0是什么 OAuth 2.0是用于授权的行业标准协议。OAuth 2.0专注于简化客户端开发人员…

一文介绍Linux EAS

能量感知调度(Energy Aware Scheduling,简称EAS)是目前Android手机中Linux线程调度器的基础功能,它使调度器能预测其决策对CPU能耗的影响。依靠CPU的能量模型(Energy Model,简称EM),…

疑难问题定位案例复盘(三)

今天我们分享一个数据库被异常改写的案例,通过该案例我们可以学习总结出常规的文件被改写问题定位思路。 问题现象 1、测试环境在进行特定压力测试时发现页面登陆异常,且调试日志多个进程持续打印“数据库打开失败”日志。 2、测试环境在进行多个压力测…

【机器学习】决策树(实战)

决策树(实战) 目录 一、准备工作(设置 jupyter notebook 中的字体大小样式等)二、树模型的可视化展示1、通过鸢尾花数据集构建一个决策树模型2、对决策树进行可视化展示的具体步骤3、概率估计 三、决策边界展示四、决策树的正则化…

PyCharm2023.1下载、安装、注册以及简单使用【全过程讲解】

在使用PyCharm IDE之前,请确保自己的计算机里面安装了Python解释器环境,若没有下载和安装可以看看我之前的文章>>>Python环境设置>>>或者还可以观看视频讲解。 注意:本文软件的配置方式仅供个人学习使用,如有侵…

02- 目标检测基础知识及优化思路汇总 (目标检测)

要点: 参考综述:深度学习目标检测最全综述 - 爱码网参考表达:https://www.cnblogs.com/xjxy/p/13588772.html 一 发展历程 分类网络是目标检测的基础,必须熟练掌握。 1.1 传统算法 V.J Detector 19年前,P. Viola 和 …

【java】Java 异常处理的十个建议

文章目录 前言一、尽量不要使用e.printStackTrace(),而是使用log打印。二、catch了异常,但是没有打印出具体的exception,无法更好定位问题三、不要用一个Exception捕捉所有可能的异常四、记得使用finally关闭流资源或者直接使用try-with-resource五、捕获…

全注解下的SpringIoc 续4-条件装配bean

Spring Boot默认启动时会加载bean,如果加载失败,则应用就会启动失败。但是部分场景下,我们希望某个bean只有满足一定的条件下,才允许Spring Boot加载,所以,这里就需要使用Conditional注解来协助我们达到这样…

Java面试题总结 | Java面试题总结10- Feign和设计模式模块(持续更新)

文章目录 Feign项目中如何进行通信Feign原理简述 设计模式spring用到的设计模式项目的场景中运用了哪些设计模式写单例的时候需要注意什么工厂模式的理解设计模式了解么工厂设计模式单例设计模式代理设计模式策略模式**模板方法模式**观察者模式**适配器模式**观察者模式**适配…

HNU-操作系统OS-实验Lab2

OS_Lab2_Experimental report 湖南大学信息科学与工程学院 计科 210X wolf (学号 202108010XXX) 前言 实验一过后大家做出来了一个可以启动的系统,实验二主要涉及操作系统的物理内存管理。操作系统为了使用内存,还需高效地管理…

【算法与数据结构】顺序表

顺序表 数据结构 结构定义结构操作 顺序表:结构定义 一个数组,添加额外的几个属性:size, count等 size: 数组有多大 count: 数组中当前存储了多少元素 顺序表三部分: 一段连续的存储区:顺序表存储元素的地方整型…

利用css实现视差滚动和抖动效果

背景: 前端的设计效果,越来越炫酷,而这些炫酷的效果,利用css3的动画效果和js就可以实现,简单的代码就能实现非常炫酷的效果。 原理: 利用 js监控scrollTop的位置,通过 top定位图片的位置&#x…