深入理解javascript严格模式(Strict Mode)

yizhihongxing

深入理解JavaScript严格模式

JavaScript严格模式(Strict Mode)是ECMAScript 5引入了一种新的执行模式,主要用于消除JavaScript语言的一些不合理、不严谨之处,减少一些怪异行为。

启用严格模式

全局启用严格模式

要想在全局范围启用严格模式,需要在JavaScript源码文件的顶部添加如下代码:

"use strict";

整个源码文件都会进入严格模式,包括该文件导入的所有模块也会进入严格模式。

局部启用严格模式

对于某个JS函数或某个代码块,也可以开启独立的严格模式。需要在函数或代码块的开头添加如下代码:

function strictModeExample1() {
  "use strict";
  // 代码块
}
(function(){
  "use strict";
  // 代码块
})();

严格模式带来的变化

1. 变量必须先声明,再使用

在非严格模式下,如果直接使用未经声明的变量,JavaScript会隐式地将其创建为一个全局变量,导致在某些情况下出现意外的变量名冲突。严格模式下,如果直接使用未经声明的变量,JavaScript直接抛出一个引用错误(ReferenceError)。

function strictModeExample2() {
  "use strict";
  var a = 1;
  b = 2; // 直接使用未经声明的变量,在严格模式下,JavaScript抛出一个ReferenceError错误。
  console.log(a, b);
}
strictModeExample2(); // 引用错误:b is not defined

2. 对象字面量中定义的重复属性会报错

在非严格模式下,如果一个对象字面量中定义了多个同名属性,则只会保留最后一个属性的值,其它属性都被忽略。在严格模式下,如果一个对象字面量中定义了多个同名属性,JavaScript会抛出一个语法错误(SyntaxError)。

function strictModeExample3() {
  "use strict";
  var data = {
    name: 'Lucy',
    email: 'lucy@example.com',
    name: 'Lily' // 对象字面量中定义的重复属性,在严格模式下,JavaScript会抛出一个SyntaxError错误。
  };
  console.log(data);
}
strictModeExample3(); // 语法错误:Duplicate data property in object literal not allowed in strict mode

3. eval函数不会在其所在的作用域中作为本地变量绑定

非严格模式下,eval函数所执行的代码字符串中声明的变量会被添加到eval函数所在的作用域中。在严格模式下,eval函数不会在其所在的作用域中作为一个本地变量绑定,而是在一个新的、私有的作用域中执行,这意味着eval函数不能读写执行环境中的本地变量。

function strictModeExample4() {
  "use strict";
  eval('var foo = 1');
  console.log(foo); // 严格模式下,变量foo不会添加到当前作用域中,JavaScript会抛出一个引用错误。
}
strictModeExample4(); // 引用错误:foo is not defined

4. 函数的参数名不能重复

在非严格模式下,如果两个参数的名称相同,JavaScript会默认忽略第二个参数的定义,这可能导致意料之外的行为。在严格模式下,如果两个参数名称相同,JavaScript会抛出一个语法错误(SyntaxError)。

function strictModeExample5(arg1, arg1) { // 在函数参数中定义的重复变量名称,在严格模式下,JavaScript会抛出一个SyntaxError错误。
  "use strict";
  console.log(arg1, arg1);
}
strictModeExample5(1, 2); // 语法错误:Duplicate parameter name not allowed in strict mode

5. 禁止this关键字指向全局对象

在非严格模式下,如果一个函数在全局上下文中调用,函数内部的this关键字会被绑定到全局对象上。在严格模式下,如果一个函数在全局上下文中调用,函数内部的this关键字会被绑定到undefined。

function strictModeExample6() {
  "use strict";
  console.log(this); // 在全局作用域中调用函数,严格模式下,函数内部的this关键字会被绑定到undefined。
}
strictModeExample6.call(null); // 输出:undefined

6. 运行eval或Function代码时,不会在其所在的外层作用域中创建新的变量或函数

在非严格模式下,eval或Function代码所在的作用域可以动态地创建新的变量或函数,这可能导致应用程序安全性方面的隐患。在严格模式下,eval或Function代码执行时,不会在其所在的外层作用域中创建新的变量或函数。

function strictModeExample7() {
  "use strict";
  var data = '0000';
  eval('var data = "1111"');
  console.log(data); // 在非严格模式下,data变量的作用域被改变,输出结果为1111。但在严格模式下,eval代码不会在其外层作用域中创建新的变量,输出结果仍为0000。
}
strictModeExample7(); // 输出:0000

示例

示例1:禁止使用with语句

严格模式下禁止使用with语句,因为该语句会增加程序的安全隐患,且容易出现引用错误。

function strictExample1() {
  "use strict";
  var myObject = {foo: 'bar'};
  with(myObject) { // 严格模式下,使用with语句会抛出一个语法错误
    console.log(foo);
  }
}
strictExample1(); // 抛出语法错误:Strict mode code may not include a with statement

示例2:禁止在非函数代码块内声明函数

在非严格模式下,在if或for语句块中声明的函数会被提升到当前作用域的顶部,可能会覆盖同名的函数或变量。严格模式下,如果在非函数代码块内声明函数,JavaScript会抛出一个语法错误。

function strictExample2() {
  "use strict";
  if(true) {
    function myFunction() { // 在严格模式下,函数不能在非函数代码快中定义。这里会抛出一个语法错误
      console.log('Hello, Strict Mode!');
    }
    myFunction();
  }
}
strictExample2(); // 抛出语法错误:In strict mode code, functions can only be declared at top level or inside a block.

结论

通过严格模式,JavaScript增加了许多新特性,去除了大量的不规范、不守规矩的操作,帮助开发者编写更加简洁、高效、可靠的代码。在能够掌握严格模式的基础上,开发者可以避免一些常见的JavaScript陷阱,提高代码的可读性和可维护性。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:深入理解javascript严格模式(Strict Mode) - Python技术站

(0)
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • JavaScript观察者模式(经典)

    JavaScript观察者模式是一种常见的软件设计模式,被广泛应用于JavaScript代码中。其核心思想是,当某个对象(主题对象)发生变化时,能够通知订阅了它的观察者对象,并且观察者对象能够得到主题对象的变化信息并进行相应的处理。 简单来说,观察者模式可以使多个对象之间产生松耦合关系,让代码具备更好的可维护性和可扩展性。 以下是详细的攻略: 观察者模式的基…

    JavaScript 2023年6月10日
    00
  • JavaScript创建一个欢迎cookie弹出窗实现代码

    下面是JavaScript创建一个欢迎cookie弹出窗实现的代码攻略。 1. 设计思路 首先,我们需要确认弹出窗的内容、样式、位置等,然后创建一个模态框来实现弹出窗。考虑到欢迎弹出窗的出现与用户的cookie状态有关,我们还需要使用cookie以及相关的JS库来实现。 具体的设计思路如下: 确认欢迎弹出窗的内容、样式和位置 判断用户的cookie状态,若未…

    JavaScript 2023年6月11日
    00
  • JS常用正则表达式及验证时间的正则表达式

    JS常用正则表达式及验证时间的正则表达式 一、常用正则表达式 1. 邮箱验证正则表达式 /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/ 该正则表达式验证邮箱是否合法,以多段分别用@和.连接。 [a-zA-Z0-9_-]+表示特殊字符_-、数字、大小写字母可以重复出现一次或多次。 (\.[a-zA-Z0…

    JavaScript 2023年6月10日
    00
  • JavaScript 匿名函数(anonymous function)与闭包(closure)

    JavaScript 匿名函数(anonymous function)与闭包(closure)是 JavaScript 语言中比较常用且常误解的概念。在本文中,我们将详细介绍匿名函数与闭包的概念、用法及其注意事项。 匿名函数 概念 匿名函数是指没有函数名的函数。在 JavaScript 中,我们通常通过函数表达式来定义匿名函数。如下所示: const add…

    JavaScript 2023年5月27日
    00
  • JavaScript 截取字符串代码实例

    下面是“JavaScript 截取字符串代码实例”的完整攻略。 什么是字符串截取? 在编程中,字符串截取是指在一个字符串中截取一段指定长度的字符或某一范围内的字符。在 JavaScript 中,通过截取字符串可以获取到需要使用的部分内容,这在字符串处理中是很常见的操作。 JavaScript 截取字符串的方法 JavaScript 提供了几种截取字符串的方法…

    JavaScript 2023年5月28日
    00
  • JS中switch的四种写法示例

    下面我将详细讲解JS中switch的四种写法示例。 简述 switch是一个条件语句,用于测试变量是否等于多个值中的某一个值。在JS中,switch有四种使用方式,分别是: 没有 break 关键字; 有 break 关键字; 每个 case 都使用 return; 使用对象的方法进行判断。 没有 break 关键字 示例代码如下: var myAnswer…

    JavaScript 2023年5月28日
    00
  • BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)

    BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)攻略 BOM(Browser Object Model)提供了一些和浏览器本身相关的对象,在前端开发中常用的就是定时器。定时器提供了一种方式来在指定时间间隔内调用函数。 setInterval() 和 setTimeout() 在定时器应用中,最常使用的是 setInterval() 和 setTime…

    JavaScript 2023年6月11日
    00
  • 兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现

    要实现检测页面装载完毕的功能,可以使用Ext.onReady函数。该函数是ExtJS框架提供的,用于在页面元素完全加载之后执行给定的函数。 具体步骤如下: 引入ExtJS的库文件。在HTML页面的标签中加入以下代码: <script type="text/javascript" src="path/to/extjs/ext…

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部