JavaScript(JS)严格模式详解

103 阅读 0 评论 0 点赞

上一节我们学习了JS中的类型转换，本节我们将详细讲解JS中的”严格模式“。那什么是严格模式呢？顾名思义，就是对JS代码进行约束，如果有那些地方非法引用变量或对变量进行非法赋值行为，则直接报错，以此来提高代码的规范性和安全性。

怎么使用”严格模式“？

严格模式可分为两种，要么全局严格，要么局部严格:

全局严格需要在JS代码区域第一行写上'use strict':

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<h1>全局严格</h1>
</body>
<script>
'use strict'//想要实现全局严格，只能写在<script>的下一行，其他地方无效！！！
 
</script>
</html>

局部严格：可以是函数也可以是块级（if语句、for循环等）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<h1>局部严格</h1>
</body>
<script>
function f()
{
  'use strict'//开始函数级严格
}
if(true)
{
  'use strict'//开始块级严格
}
 
</script>
</html>

”严格模式“具体这么约束JS代码？

这里笔者枚举了7个例子来详细说明：

1. 使用未声明变量报错：

<script>
'use strict'
n=1
</script>

2. 使用delete删除变量和函数。（冷知识：delete只能删除对象的属性）

<script>
'use strict'
let s = 'Dotcpp'
function f()
{
}
delete s
delete f
 
</script>

3. 函数参数重名报错：

<script>
'use strict'
function f(s , s)
{
}
 
</script>

4. 普通函数中this在非严格模式下指向window，严格模式下返回undefined。

<script>
'use strict'
function f()
{
 return this;//指向函数调用者，这里指得是浏览器最大的对象window
}
 console.log(f());//严格模式下，返回undefined
 
</script>

5. 严格模式下禁止使用with语句

<script>
'use strict'
// 创建Dotcpp用户
const dotcpp_user = {
 nickName: "dotcpp_user",
 signature:"学习使人进步",
 grade:100,
 degree:'P1',
  greet: function() {
    return `你好，我是${this.nickName}`;//此处this指向调用该方法的对象
  }
};
/*严格模式下直接报错*/
with(dotcpp_user)
{
  console.log(nickName);
  console.log(signature);
  console.log(grade)
  console.log(degree);
}
 
</script>

6. 严格模式下禁止八进制字面量：

<script>
'use strict'
/*禁止八进制字面量*/
// 非严格模式下的问题
var a = 010;     // 开发者以为是 10，实际上是 8
var b = 0010;    // 开发者以为是 10，实际上是 8
</script>

7. 严格模式下分割arguments对象：

非严格模式下双向绑定：

<script>
/* 非严格模式下双向绑定*/
function nonStrictFunc(a, b) {
    console.log("修改前:", a, arguments[0]); // 1, 1
    
    a = 100;                    // 修改参数
    console.log("修改参数后:", a, arguments[0]); // 100, 100 - arguments 也变了！
    
    arguments[0] = 200;         // 修改 arguments
    console.log("修改arguments后:", a, arguments[0]); // 200, 200 - 参数也变了！
}
nonStrictFunc(1, 2);
</script>

严格模式下各自独立：

<script>
// 严格模式下各自独立
'use strict';
function strictFunc(a, b) {
    console.log("修改前:", a, arguments[0]); // 1, 1
    
    a = 100;                    // 修改参数
    console.log("修改参数后:", a, arguments[0]); // 100, 1 - arguments 不变！
    
    arguments[0] = 200;         // 修改 arguments
    console.log("修改arguments后:", a, arguments[0]); // 100, 200 - 参数不变！
}
strictFunc(1, 2);
 
</script>

总结：使用严格模式，可以使得我们的JS代码更加规范。推荐在新项目里使用严格模式，养成编码规范；老项目里考虑到兼容性问题最好别使用严格模式。