【javascript】高级语法——严格模式(详解)

简介: 【javascript】高级语法——严格模式(详解)

javaScript中的严格模式

一、认识严格模式

在ECMAScript5标准中,JavaScript提出了严格模式的感念:


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

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

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


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

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

严格模式禁用了在ECMAScript未来版本中可能会定义的一些语法。

二、开启严格模式

那么如何开启严格模式呢?严格模式支持粒度化的迁移:


可以支持在js文件中开启严格模式;

也支持对某一个函数开启严格模式;

三、严格模式限制

JavaScript被设计为新手开发者更容易上手,所以有时候本买错误语法,别认为也是可以正常被解析的;

但是这种方式可能给带来留下安全隐患;

在严格模式下,这种事务就会被当做错误,以便可以快速的发现和修正;

总结了一下几点常见的限制:


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

意外的创建全局变量的方式有两种:


全局不使用关键字直接声明全局变量

在函数内部不使用关键字声明变量 函数默认提升为全局变量

示例代码如下:

'use strict'
// 禁止意外创建全局变量
message = '意外创建全局变量'
console.log(message) // 报错信息为:Uncaught ReferenceError: message is not defined
function foo () {
    age = 20
    console.log(age)
}
foo() // ReferenceError: age is not defined

2.严格模式下会使引起静默失败的赋值操作报出错误异常

示例代码如下:

//开启严格模式,将问题直接转化为报错
'use strict'
const v = 100;//(定义常量)
v = 1.14;//重新赋值(为变量)
console.log(v); // Uncaught TypeError: Assignment to constant variable.

3.严格模式下试图删除不可删除的属性

严格模式下,不能对变量使用delect运算符。

(1).对变量使用delete关键字

  // 开启严格模式
'use strict'
var v = 100;
delete v;//非严格模式下:此处为静默失败,既没有报错也没有删除变量v
console.log(v);//100
//开启严格模式后,改为报错Delete of an unqualified identifier in strict mode.

(2).对数组和对方法属性使用delete关键字

严格模式下对数组和对方法属性使用delete关键字,效果不变。

// 开启严格模式
'use strict'
// 1、严格模式下删除数组内容
var arr = [1,2,3,4]
delete arr[0];
console.log(arr);//[ <1 empty item>, 2, 3, 4 ]
// 2、严格模式下delete函数的属性
var obj  =  {
    name : '猪猪侠 '
}
delete obj.name;
console.log(obj.name)//undefined

4.严格模式不允许函数参数有相同的名称

示例代码如下:

'use strict'
// 不允许函数有相同的参数名称
function foo2 (x, y, x) {
    console.log(x, y, x)
}
foo2(10, 20, 30) // SyntaxError: Duplicate parameter name not allowed in this context

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

示例代码如下:

// 不允许使用原先的八进制格式
var num1 = 0123
var num2 = 0o123 // 可以写成这种格式 八进制
var num3 = 0x123 // 可以写成这种格式 十六进制
var num4 = 0b100 // 可以写成这种格式 二进制
console.log(num1) // SyntaxError: Octal literals are not allowed in strict mode.
console.log(num2, num3, num4) // 83 291 4 

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

示例代码如下:

'use strict'
var message = 'Hello World';
var obj = { name: 'jam', age: 20 }
// with语句可以形成自己的作用域,在with语句中打印age时,会输出obj对象中的age属性,但在with语句中打印不存在的属性message时,会向外层的作用域一层一层去查找
function foo () {
    with (obj) {
        console.log(age) 
        console.log(message) 
    }
    console.log(message)
}
foo() // SyntaxError: Strict mode code may not include a with statement

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

示例代码如下:

var jsString = "var message = 'hello world';console.log(message)"
eval(jsString) // 输出  hello world
console.log(message) // 报错信息为:ReferenceError: message is not defined

开启严格模式 eval函数不会向上引用变量 所以全局作用域就没有message这个变量所以会报错

8.严格模式下,this绑定不会默认转成对象

示例代码如下:

'use strict'
// 在严格模式下,自执行函数(默认绑定)会指向undefined  ,非严格模式下会指向window
function foo () {
    console.log(this)
}
foo() // undefined

看完如果感觉文章写的还不错的话,点个赞吧。感谢大佬!


目录
相关文章
|
4月前
|
存储 JavaScript 前端开发
Node.js的基本语法
【8月更文挑战第12天】Node.js的基本语法
154 1
|
2月前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
|
3月前
|
JSON JavaScript 前端开发
JavaScript第五天(函数,this,严格模式,高阶函数,闭包,递归,正则,ES6)高级
JavaScript第五天(函数,this,严格模式,高阶函数,闭包,递归,正则,ES6)高级
|
2月前
|
JavaScript 前端开发 大数据
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
36 0
|
4月前
|
JavaScript 前端开发
JavaScript基础&实战(1)js的基本语法、标识符、数据类型
这篇文章是JavaScript基础与实战教程的第一部分,涵盖了JavaScript的基本语法、标识符、数据类型以及如何进行强制类型转换,通过代码示例介绍了JS的输出语句、编写位置和数据类型转换方法。
JavaScript基础&实战(1)js的基本语法、标识符、数据类型
|
3月前
|
Web App开发 JavaScript 前端开发
JavaScript 严格模式(use strict)
JavaScript 严格模式(use strict)
46 0
|
4月前
|
前端开发 JavaScript 程序员
前端 JavaScript 的 _ 语法是个什么鬼?
前端 JavaScript 的 _ 语法是个什么鬼?
|
5月前
|
缓存 JavaScript 前端开发
前端框架与库 - Vue.js基础:模板语法、数据绑定
【7月更文挑战第14天】Vue.js 是渐进式框架,以简洁API和高效数据绑定知名。本文聚焦模板语法与数据绑定,解释常见问题和易错点,助力初学者避坑。模板语法中,{{ expression }} 用于渲染值,v-bind/: 用于动态绑定属性。数据绑定涉及文本、属性和事件,注意v-model适用于表单元素,计算属性有缓存。理解正确用法,借助文档和IDE,可提升开发质量和效率。善用Vue.js,打造响应式UI。
169 4
|
5月前
|
存储 JavaScript 前端开发
|
5月前
|
前端开发 JavaScript
js【详解】Promise(含 Promise 的三种状态及其变化,创建 Promise, Promise.all 语法、Promise.all 实战范例、手写 Promise.all)
js【详解】Promise(含 Promise 的三种状态及其变化,创建 Promise, Promise.all 语法、Promise.all 实战范例、手写 Promise.all)
735 0