js嚴(yán)格模式和非嚴(yán)格模式區(qū)別小結(jié)
好的,這是一個(gè)非?;A(chǔ)且重要的概念。我們來詳細(xì)解析一下 JavaScript 中的嚴(yán)格模式(Strict Mode)和非嚴(yán)格模式(Sloppy Mode)。
可以把它想象成參加一場考試:
- 非嚴(yán)格模式:就像是開卷、不計(jì)時(shí)的隨堂測驗(yàn),規(guī)則很寬松,寫得不那么標(biāo)準(zhǔn)也能得分,老師會(huì)盡量“猜測”你的意圖。
- 嚴(yán)格模式:就像是正式的閉卷大考,有嚴(yán)格的規(guī)范,任何不符合規(guī)則的寫法都會(huì)被立刻標(biāo)記為錯(cuò)誤,不留任何情面。
1. 什么是嚴(yán)格模式?
嚴(yán)格模式 (Strict Mode) 是在 ECMAScript 5 (ES5) 中引入的一種選擇性加入(opt-in)的機(jī)制,它為 JavaScript 代碼選擇了一種更嚴(yán)格、更受限的語法和錯(cuò)誤處理規(guī)則。
它的本質(zhì)是讓 JavaScript 引擎以一種更“嚴(yán)謹(jǐn)”的方式來解析和執(zhí)行你的代碼,從而提高代碼的健壯性和安全性。
非嚴(yán)格模式 (Sloppy Mode) 則是 JavaScript 默認(rèn)的、向后兼容的、更“寬容”的模式。
2. 為什么需要嚴(yán)格模式?
JavaScript 最初被設(shè)計(jì)為一門非常寬容的語言,為了讓網(wǎng)頁在各種意外情況下都能勉強(qiáng)運(yùn)行(而不是直接崩潰)。但這種寬容性也導(dǎo)致了一些問題:
- 靜默錯(cuò)誤 (Silent Errors):一些本該是錯(cuò)誤的操作,在非嚴(yán)格模式下不會(huì)報(bào)錯(cuò),只會(huì)靜默失敗,這使得調(diào)試變得異常困難。
- 不安全的行為: 某些語法可能存在安全隱患或?qū)е乱馔獾娜肿兞课廴尽?/li>
- 阻礙引擎優(yōu)化: 一些“壞語法”讓 JavaScript 引擎難以對(duì)代碼進(jìn)行性能優(yōu)化。
- 為未來做準(zhǔn)備: 禁止一些未來可能被用作新關(guān)鍵字的保留字。
嚴(yán)格模式的誕生就是為了解決這些歷史遺留問題。
3. 如何開啟嚴(yán)格模式?
開啟嚴(yán)格模式非常簡單,只需在代碼的特定位置添加一個(gè)字符串字面量:
"use strict";
根據(jù)你放置的位置,它的作用域也不同:
全局嚴(yán)格模式: 將 "use strict"; 放在腳本文件的最頂部。
// my-script.js "use strict"; // 整個(gè)文件都將以嚴(yán)格模式運(yùn)行 let x = 10; // ...
函數(shù)內(nèi)嚴(yán)格模式: 將 "use strict"; 放在函數(shù)體的最頂部。
function myStrictFunction() {
"use strict";
// 只有這個(gè)函數(shù)內(nèi)部是以嚴(yán)格模式運(yùn)行的
let y = 20;
// ...
}
一個(gè)非常重要的現(xiàn)代知識(shí)點(diǎn):
在 ES6 模塊 (import/export) 和 class 的代碼塊中,嚴(yán)格模式是默認(rèn)開啟的,你無需手動(dòng)添加 "use strict";。這就是為什么在現(xiàn)代前端框架(如 React, Vue)的開發(fā)中,你很少看到這行代碼,因?yàn)槟銓懙拇a基本上都已經(jīng)是運(yùn)行在嚴(yán)格模式下的模塊了。
4. 嚴(yán)格模式與非嚴(yán)格模式的主要區(qū)別
下面是一些最直觀和重要的區(qū)別,通過代碼對(duì)比會(huì)非常清晰:
a. 禁止意外創(chuàng)建全局變量
這是最經(jīng)典的區(qū)別。
非嚴(yán)格模式:
function createGlobal() {
mistake = "I am a global variable!"; // 忘記寫 let/const/var
}
createGlobal();
console.log(window.mistake); // "I am a global variable!" (在瀏覽器中)
// 變量泄漏到了全局作用域,這是一個(gè)非常危險(xiǎn)的副作用。
嚴(yán)格模式:
"use strict";
function createGlobal() {
mistake = "This will cause an error";
}
// createGlobal(); // 這一行會(huì)直接拋出 ReferenceError,程序會(huì)中斷
結(jié)論:嚴(yán)格模式將一個(gè)常見的“靜默錯(cuò)誤”變成了“拋出錯(cuò)誤”,讓你能立刻發(fā)現(xiàn)問題。
b. 禁止對(duì)只讀屬性或不可擴(kuò)展對(duì)象進(jìn)行修改
非嚴(yán)格模式:
const obj = {};
Object.defineProperty(obj, 'readOnly', { value: 10, writable: false });
obj.readOnly = 20; // 嘗試修改只讀屬性
console.log(obj.readOnly); // 10 (修改靜默失敗,不會(huì)報(bào)錯(cuò))
嚴(yán)格模式:
"use strict";
const obj = {};
Object.defineProperty(obj, 'readOnly', { value: 10, writable: false });
// obj.readOnly = 20; // 這一行會(huì)拋出 TypeError
結(jié)論: 嚴(yán)格模式同樣將靜默失敗的操作變成了明確的錯(cuò)誤。
c.this的指向不同
我們?cè)谥暗木毩?xí)中已經(jīng)遇到過。
非嚴(yán)格模式:
function showThis() {
console.log(this);
}
showThis(); // 在瀏覽器中,會(huì)輸出全局的 window 對(duì)象
嚴(yán)格模式:
"use strict";
function showThis() {
console.log(this);
}
showThis(); // 輸出 undefined
結(jié)論: 嚴(yán)格模式下的 this 行為更安全,避免了意外地污染全局對(duì)象。
d. 禁止重復(fù)的參數(shù)名
非嚴(yán)格模式:
function sum(a, a, b) { // 不會(huì)報(bào)錯(cuò)
return a + a + b; // 實(shí)際上是第二個(gè) a 生效
}
console.log(sum(1, 2, 3)); // 2 + 2 + 3 = 7
嚴(yán)格模式:
"use strict";
// function sum(a, a, b) { // 這一行在代碼解析階段就會(huì)拋出 SyntaxError
// return a + b;
// }
結(jié)論: 嚴(yán)格模式在語法層面就杜絕了這種不合理的代碼。
總結(jié)與建議
| 特性 | 非嚴(yán)格模式 (Sloppy Mode) | 嚴(yán)格模式 (Strict Mode) |
|---|---|---|
| 意外全局變量 | 允許,靜默創(chuàng)建 | 禁止,拋出 ReferenceError |
| 修改只讀屬性 | 靜默失敗 | 禁止,拋出 TypeError |
| 全局函數(shù)this | 指向全局對(duì)象 (window) | undefined |
| 重復(fù)參數(shù)名 | 允許(最后一個(gè)生效) | 禁止,拋出 SyntaxError |
最終建議:始終使用嚴(yán)格模式!
在今天,你沒有任何理由不使用嚴(yán)格模式。它能幫你寫出更健壯、更安全、更規(guī)范的代碼,并且能讓你避免很多難以調(diào)試的“幽靈bug”。
鑒于現(xiàn)代 JavaScript 的模塊和類已經(jīng)默認(rèn)開啟了嚴(yán)格模式,將 "use strict"; 放在所有非模塊化的老腳本的頂部,應(yīng)該成為你的一個(gè)標(biāo)準(zhǔn)習(xí)慣。
到此這篇關(guān)于js嚴(yán)格模式和非嚴(yán)格模式區(qū)別小結(jié)的文章就介紹到這了,更多相關(guān)js 嚴(yán)格模式 非嚴(yán)格模式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
confirm的用法示例用于按鈕操作時(shí)確定是否執(zhí)行
這篇文章主要介紹了confirm的用法,confirm一般用于按鈕操作時(shí)確定是否執(zhí)行,需要的朋友可以參考下2014-06-06
JavaScript?中的?parseInt()?函數(shù)詳解
parseInt函數(shù)將其第一個(gè)參數(shù)轉(zhuǎn)換為一個(gè)字符串,對(duì)該字符串進(jìn)行解析,然后返回一個(gè)整數(shù)或?NaN,這篇文章主要介紹了JavaScript?的?parseInt()?函數(shù),需要的朋友可以參考下2023-05-05
BootStrap使用file-input插件上傳圖片的方法
這篇文章主要介紹了BootStrap使用file-input插件上傳圖片的方法,bootstrap的圖片上傳框架 file-input 插件非常不錯(cuò),下面小編通過本文介紹下這個(gè)插件的使用方法,感興趣的朋友一起看看吧2016-09-09
JavaScript實(shí)現(xiàn)清除首尾空白字符再進(jìn)行空白匹配
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)清除首尾空白字符再進(jìn)行空白匹配的相關(guān)方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下2025-12-12
詳解JavaScript到TypeScript的轉(zhuǎn)換過程
JavaScript是一門強(qiáng)大而靈活的編程語言,TypeScript作為JavaScript的超集,為開發(fā)人員提供了靜態(tài)類型檢查、更好的協(xié)作能力和面向?qū)ο缶幊痰闹С郑疚膶⒃敿?xì)講解如何將JavaScript代碼轉(zhuǎn)換為TypeScript,并寫一些代碼示例參考2023-06-06
JS集成fckeditor及判斷內(nèi)容是否為空的方法
這篇文章主要介紹了JS集成fckeditor及判斷內(nèi)容是否為空的方法,涉及fckeditor的設(shè)置及頁面元素的操作技巧,并分析了php環(huán)境下配置文件上傳的注意事項(xiàng),需要的朋友可以參考下2016-05-05
JavaScript中創(chuàng)建類/對(duì)象的幾種方法總結(jié)
這篇文章主要是對(duì)JavaScript中創(chuàng)建類/對(duì)象的幾種方法進(jìn)行了詳細(xì)的總結(jié)介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-11-11
Javascript實(shí)現(xiàn)圖片輪播效果(一)讓圖片跳動(dòng)起來
圖片輪播效果,在各大網(wǎng)站的首頁都能看到,比較常見,下面腳本之家小編給大家介紹Javascript實(shí)現(xiàn)圖片輪播效果(一)讓圖片跳動(dòng)起來,需要的朋友參考下2016-02-02

