JavaScript"严格模式"的特点是什么?

front end technologyjavascriptobject oriented programming

本教程将向您解释 JavaScript"严格模式"的不同特点。因此，JavaScript 中有两种不同的编程模式。

默认情况下，启用简单模式或有时称为松散模式。在这种模式下，我们在编写代码时不需要遵循严格的规则。
另一方面，严格模式也存在。此模式在环境中启用一些严格规则。严格模式不是松散模式的子集，但它的语义也与普通代码不同。

语法

可以在不同的范围内启用严格模式。语法如下:

脚本的严格模式:将整个脚本转换为严格模式

'use strict';

函数的严格模式:将函数转换为严格模式

function function_name(){
'use strict';
// function body
}

JavaScript 类已经处于严格模式，我们不需要为它们编写任何内容。

在 JavaScript 中启用严格模式后会发生什么变化?

在不严谨的 JavaScript 中，它有时会隐藏错误并在执行时使它们保持静默。例如，如果我们之前没有声明变量，我们可以为未声明的变量分配一些值。它将在该初始化语句之后自动创建一个全局变量。但在严格模式下，它会引发错误，因为我们正在为未声明的变量分配值。还有其他一些变化，如下所示 -

严格模式会抛出一些错误，这些错误在草率模式下会变成静默错误。
有时严格模式代码比相同的草率模式代码运行得更快，因为修复错误对于 JavaScript 引擎执行任何优化来说变得更加困难。

当严格模式抛出许多错误并使我们的环境更加严格时，我们为什么要进入这种模式?好吧，它也有一些优点。

严格模式帮助我们编写安全的 JavaScript 代码。
草率的 JavaScript 代码可能会默默接受错误的语法。这在严格模式下会变成真正的错误。这有助于在 JavaScript 中编写更好的代码。
当变量不可写时，无论严格模式是否向开发人员反馈错误消息，草率的 JavaScript 变体都不会返回任何错误。
在严格模式下，当我们尝试将某个值分配给不可写属性、仅 getter 属性或不存在的属性时，它会引发错误。

示例

让我们看一些示例来了解在严格模式下哪些是不允许的 -

源代码


<!DOCTYPE html>
<html>
<head>
   <title>HTML Console</title>
</head>
<body>
   <h3> Output Console </h3>
   <p> Output: </p>
   <div id = "output" >
   </div>
   <script>
      "use strict" // enabling strict mode
      var content = ''
      var opDiv = document.querySelector( '#output' )
      // actual javascript code
      try{
         // Assigning to a variable that is not declared beforehand a = 2.5;
         content = "Value of variable a = " + a;
      }
      catch (err) {
         content = err
         opDiv.style.color = '#ff0000'
      }
      finally{
         // display on output console
         opDiv.innerHTML = content
      }
   </script>
</body>
</html>

因此，声明一个变量并使用它

源代码


<!DOCTYPE html>
<html>
<head>
   <title>HTML Console</title>
</head>
<body>
   <h3> Output Console </h3>
   <p> Output: </p>
   <div id="output">
   </div>
   <script>
      "use strict" // enabling strict mode
      var content = ''
      var opDiv = document.querySelector('#output')
      // actual javascript code
      try {
         var a
         a = 2.5;
         var b = 5.7;
         content = "Value of variable a: " + a + "<br>";
         content += "Value of variable b: " + b;
      }
      catch (err) {
         content = err
         opDiv.style.color = '#ff0000'
      }
      finally {
         // display on output console
         opDiv.innerHTML = content
      }
   </script>
</body>
</html>

在严格模式下不允许删除变量。

源代码


<!DOCTYPE html>
<html>
<head>
   <title>HTML Console</title>
</head>
<body>
   <h3> Output Console </h3>
   <p> Output: </p>
   <div id="output">
   </div>
   <script>
      "use strict" // enabling strict mode
      var content = ''
      var opDiv = document.querySelector('#output')
      // actual javascript code
      try {
         let a = 2.5;
         content += 'Value of a:' + a + '<br>';
         delete a;
      }
      catch (err) {
         content += err
         opDiv.style.color = '#ff0000'
      }
      finally {
         // display on output console
         opDiv.innerHTML = content
      }
   </script>
</body>
</html>

输出(此错误无法通过 HTML 页面在线控制台显示。复制上述代码并创建一个 HTML 文件到本地机器，然后尝试运行此 HTML 文件，然后检查页面控制台以获取此错误:

不允许写入只读对象。

源代码


<!DOCTYPE html>
<html>
<head>
   <title>HTML Console</title>
</head>
<body>
   <h3> Output Console </h3>
   <p> Output: </p>
   <div id="output">
   </div>
   <div id="opError" style = "color : #ff0000">
   </div>
   <script>
      "use strict" // enabling strict mode
      var content = ''
      var error = ''
      var opDiv = document.querySelector('#output')
      var opErrDiv = document.querySelector('#opError')
      // actual javascript code
      try {
         const obj = {};
         Object.defineProperty(obj, "a", { value: 10, writable: false });
         content += "The value of obj.a: " + obj.a + "<br>"
         obj.a = 5.27;
      }
      catch (err) {
         error += err
      }
      finally {
         // display on output console
         opDiv.innerHTML = content
         opErrDiv.innerHTML = error
      }
   </script>
</body>
</html>

不允许创建与保留关键字同名的变量−

源代码


<!DOCTYPE html>
<html>
<head>
   <title>HTML Console</title>
</head>
<body>
   <h3> Output Console </h3>
   <p> Output: </p>
   <div id="output">
   </div>
   <div id="opError" style = "color : #ff0000">
   </div>
   <script>
      "use strict" // enabling strict mode
      var content = ''
      var error = ''
      var opDiv = document.querySelector('#output')
      var opErrDiv = document.querySelector('#opError')
      // actual javascript code
      try {
         let public = 15;
         content += "The value of public: " + public + "<br>"
      }
      catch (err) {
         error += err
      }
      finally {
         // display on output console
         opDiv.innerHTML = content
         opErrDiv.innerHTML = error
      }
   </script>
</body>
</html>

在松散模式下，我们可以使用"With"关键字，这在严格模式下是不允许的 -

源代码


<!DOCTYPE html>
<html>
<head>
   <title>HTML Console</title>
</head>
<body>
   <h3> Output Console </h3>
   <p> Output: </p>
   <div id="output">
   </div>
   <div id="opError" style = "color : #ff0000">
   </div>
   <script>
      // Sloppy Mode
      var content = ''
      var error = ''
      var opDiv = document.querySelector('#output')
      var opErrDiv = document.querySelector('#opError')
      // actual javascript code
      try {
         with (Math){a = sqrt(64)};
         content += "The value of a: " + a + "<br>"
      }
      catch (err) {
         error += err
      }
      finally {
         // display on output console
         opDiv.innerHTML = content
         opErrDiv.innerHTML = error
      }
   </script>
</body>
</html>

源代码


<!DOCTYPE html>
<html>
<head>
   <title>HTML Console</title>
</head>
<body>
   <h3> Output Console </h3>
   <p> Output: </p>
   <div id="output">
   </div>
   <div id="opError" style = "color : #ff0000">
   </div>
   <script>
      "use strict" // enabling strict Mode
      var content = ''
      var error = ''
      var opDiv = document.querySelector('#output')
      var opErrDiv = document.querySelector('#opError')
      
      // actual javascript code
      try {
         with (Math){a = sqrt(64)};
         content += "The value of a: " + a + "<br>"
      }
      catch (err) {
         error += err
      }
      finally {
         // display on output console
         opDiv.innerHTML = content
         opErrDiv.innerHTML = error
      }
   </script>
</body>
</html>

结论

JavaScript 严格模式为 JavaScript 开发提供了一个安全的环境。在此模式下，它不允许语法错误的代码，并且还限制了从草率模式进行的隐式转换。JavaScript 优化代码以减少编译时的错误，但在严格模式下，优化程度要低得多。有时，在严格模式下编写的代码比在草率模式下编写的类似代码运行得更快。

技术文章和资源

热门类别

JavaScript"严格模式"的特点是什么?

语法

在 JavaScript 中启用严格模式后会发生什么变化?

示例

源代码

源代码

源代码

源代码

源代码

源代码

源代码

结论

相关文章

颜色选择器

读后有收获微信请站长喝咖啡

错误报告

您的建议:

感谢您的帮助！