严格模式 丨JavaScript 函数进阶
Posted 黑马程序员官方
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了严格模式 丨JavaScript 函数进阶相关的知识,希望对你有一定的参考价值。
1、什么是严格模式
javascript 除了提供正常模式外,还提供了严格模式(strict mode)。ES5 的严格模式是采用具有限制性
JavaScript 变体的一种方式,即在严格的条件下运行 JS 代码。
严格模式在 IE10 以上版本的浏览器中才会被支持,旧版本浏览器中会被忽略。
严格模式对正常的 JavaScript 语义做了一些更改:
1. 消除了 Javascript 语法的一些不合理、不严谨之处,减少了一些怪异行为。
2. 消除代码运行的一些不安全之处,保证代码运行的安全。
3. 提高编译器效率,增加运行速度。
4. 禁用了在 ECMAScript 的未来版本中可能会定义的一些语法,为未来新版本的 Javascript 做好铺垫。比如一些保留字如:class, enum, export, extends, import, super 不能做变量名
2、 开启严格模式
严格模式可以应用到整个脚本或个别函数中。因此在使用时,我们可以将严格模式分为为脚本开启严格模式和 为函数开启严格模式两种情况。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 为整个脚本(script标签)开启严格模式 -->
<script>
'use strict';
// 下面的js 代码就会按照严格模式执行代码
</script>
<script>
(function()
'use strict';
)();
</script>
<!-- 为某个函数开启严格模式 -->
<script>
// 此时只是给fn函数开启严格模式
function fn()
'use strict';
// 下面的代码按照严格模式执行
function fun()
// 里面的还是按照普通模式执行
</script>
</body>
</html>
2.1 为脚本开启严格模式
为整个脚本文件开启严格模式,需要 在所有语句之前放一个特定语句“use strict”;(或‘use strict’;) 。![](https://image.cha138.com/20230305/42fa383ba27f4487afc5e671d4fe86e4.jpg)
因为"use strict"加了引号,所以老版本的浏览器会把它当作一行普通字符串而忽略。
有的 script 基本是严格模式,有的 script 脚本是正常模式,这样不利于文件合并,所以可以将整个脚本文件放在一个立即执行的匿名函数之中。这样独立创建一个作用域而不影响其他 script 脚本文件。![](https://image.cha138.com/20230305/ca15adc6f45f460e815cfa752f4b1be0.jpg)
2.2为函数开启严格模式
要给某个函数开启严格模式,需要 把“use strict”; (或 'use strict'; ) 声明放在函数体所有语句之前。
![](https://image.cha138.com/20230305/c79ba809f8184ff4b41fbc2a31769042.jpg)
2.3 严格模式中的变化
严格模式对 Javascript 的语法和行为,都做了一些改变。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
'use strict';
// 1. 我们的变量名必须先声明再使用
// num = 10;
// console.log(num);
var num = 10;
console.log(num);
// 2.我们不能随意删除已经声明好的变量
// delete num;
// 3. 严格模式下全局作用域中函数中的 this 是 undefined。
// function fn()
// console.log(this); // undefined。
//
// fn();
// 4. 严格模式下,如果 构造函数不加new调用, this 指向的是undefined 如果给他赋值则 会报错.
// function Star()
// this.sex = '男';
//
// // Star();
// var ldh = new Star();
// console.log(ldh.sex);
// 5. 定时器 this 还是指向 window
// setTimeout(function()
// console.log(this);
// , 2000);
// a = 1;
// a = 2;
// 6. 严格模式下函数里面的参数不允许有重名
// function fn(a, a)
// console.log(a + a);
// ;
// fn(1, 2);
function fn()
</script>
</body>
</html>
2.3.1. 变量规定
- 在正常模式中,如果一个变量没有声明就赋值,默认是全局变量。严格模式禁止这种用法,变量都必须先用var 命令声明,然后再使用。
- 严禁删除已经声明变量。例如,delete x; 语法是错误的。
2.3.2 严格模式下 this 指向问题
① 以前在全局作用域函数中的 this 指向 window 对象。 ② 严格模式下全局作用域中函数中的 this 是 undefined。 ③ 以前构造函数时不加 new也可以 调用,当普通函数,this 指向全局对象 ④ 严格模式下,如果 构造函数不加new调用, this 指向的是undefined 如果给他赋值则 会报错 ⑤ new 实例化的构造函数指向创建的对象实例。 ⑥ 定时器 this 还是指向 window 。 ⑦ 事件、对象还是指向调用者。
2.3.3. 函数变化
更多JavaScript内容:
黑马程序员JavaScript全套教程,Web前端必学的JS入门教程,零基础JavaScript入门 |
黑马前端专栏干货多多,关注再学,好方便~
2023年前端学习路线图:课程、源码、笔记,技术栈另外此线路图实时更新!需要课后资料的友友们,可以直接告诉我喔~
以上是关于严格模式 丨JavaScript 函数进阶的主要内容,如果未能解决你的问题,请参考以下文章
ReactNative进阶(二十三):Javascript 严格模式详解