資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究JavaScript "嚴格模式" 的特點是什麼？
本教程將向您解釋 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 最佳化程式碼以在編譯時減少錯誤，但在嚴格模式下，最佳化級別要低得多。有時，用嚴格模式編寫的程式碼執行速度比用寬鬆模式編寫的類似程式碼快。
更新於： 2022年8月22日
442 次瀏覽
廣告