JavaScript淺嚐紀錄No.1-JS寬鬆模式V.S嚴格模式

更新 發佈閱讀 4 分鐘

JavaScript跟前端的關係?

MDN中的介紹:

JavaScript是一種准許你在網頁上實現複雜事物的程式語言 — 每次網頁要做的不只是停在那裏,並顯示靜態信息給你— 及時顯示內容更新、交互式地圖、繪製2D/3D 動畫圖形以及滾動視訊點唱機等等。— 你會發現 JavaScript 幾乎無處不在。它是標準網頁技術蛋糕的第三層。

通常會先使用HTML跟CSS建構一個靜態的網頁,而JS可以讓這個網頁「動」起來,所以在把JavaScript文件檔匯入到HTML時,請將JavaScript文件檔放在</body>前,以確保HTML跟CSS已經將網頁的結構跟樣式建構好了,才會執行JavaScript。在之後會更加詳細的解釋JavaScript如何利用DOM跟BOM操控改變網頁內容。

JavaScript寬鬆模式V.S嚴格模式

寬鬆模式

又稱一般模式 (non-strict mode)、草率模式(sloppy mode)。試著將下面這段程式碼放入Chrome DevTool裡,看看會出現甚麼事情:

'use non-strict'

x = 'I am a non-strict mode'

console.log(x)

注意到 x 其實沒有被宣告,就被直接賦值了,竟然還能被使用,這是因為 x 直接變成全域變數了,這樣一來很容易引發許多名稱衝突問題(可能你用的變數名稱在window裡已經被使用了),使用var宣告變數也會有相同問題,所以建議使用ES6中的let或是const來宣告變數。

重點就是建立良好習慣,好好「宣告」變數。

嚴格模式(strict mode)

嚴格模式可以在以下兩個地方宣告:

  • 整份文件的最上方
  • 函式 (function) 的開頭

use non-strict改為'use strict',來看看差異:

'use strict'

x = 'I am a strict mode'

console.log(x)

看出區別了,在嚴謹模式下,未經宣告卻被直接賦值得x ,只會得到錯誤訊息:x未經宣告,也因此可以避免很多錯誤。

strict mode的使用限制

  • 變數(或物件)一定要先宣告,才能使用,如上。
  • 不能刪除(delete)已經宣告的變數(或物件)或函式。
  • 在變數宣告時不能定義重複的名稱,或是在同一個函式中有重複名稱的參數。另外原本不能在物件中重複使用相同屬性名的限制已經被取消了,使用相同屬性名的話,取值時會顯示最後的那個屬性名的值(Duplicate property name in object literal is allowed in ES6 strict mode)。
  • 不能使用八進位的數值,如010、01000之類的。
  • 不能使用 with 語法(這個我也不懂,不過不能用就不研究了)。
  • 函式調用,在一般模式下,默認this是全局對象,但在嚴格模式中,因為不允許默認綁定,所以this會是 undefined
  • 還有很多可以再多多研究。

參考資料:

JavaScript 語言核心(3)你的變數 var 了嗎?

卡斯柏的JavaScript 的嚴格模式 “use strict”

Blackie的失敗筆記

W3school-JavaScript Use Strict

JavaScript this 关键词









留言
avatar-img
鍋灶的熱湯
1會員
13內容數
分享生活、旅行經驗,經驗是種解決問題的方式,方式不只一種歡迎大家一起分享經驗
鍋灶的熱湯的其他內容
2026/02/27
在了解 Callback Functions Hell ,必須先知道甚麼是 Callback Functions ,而 Callback Functions 怎麼造成 Callback Functions Hell。 Callback Functions 其實有寫過 JS 的 都應該有用過 Ca
2026/02/27
在了解 Callback Functions Hell ,必須先知道甚麼是 Callback Functions ,而 Callback Functions 怎麼造成 Callback Functions Hell。 Callback Functions 其實有寫過 JS 的 都應該有用過 Ca
2026/02/27
先來了解一下一個專有名詞 「AJAX」(非同步 JavaScript 及 XML,Asynchronous JavaScript and XML),這個名詞主要用來描述利用 JS 中數個方法來向伺服器取得資料,且不需要更新畫面即可及時取得最新內容,而這一篇主要是介紹如何使用 XMLHttpReque
Thumbnail
2026/02/27
先來了解一下一個專有名詞 「AJAX」(非同步 JavaScript 及 XML,Asynchronous JavaScript and XML),這個名詞主要用來描述利用 JS 中數個方法來向伺服器取得資料,且不需要更新畫面即可及時取得最新內容,而這一篇主要是介紹如何使用 XMLHttpReque
Thumbnail
2026/02/26
一直以來都不是很了解 promise 、 fetch 、 async await 等等的區別及運用,所以特地用這一系列的筆記加深自己的印象。 Synchronous JavaScript(同步 JS )的概念 JavaScript 是 single threaded (單執行緒 / 單線程),
2026/02/26
一直以來都不是很了解 promise 、 fetch 、 async await 等等的區別及運用,所以特地用這一系列的筆記加深自己的印象。 Synchronous JavaScript(同步 JS )的概念 JavaScript 是 single threaded (單執行緒 / 單線程),
看更多
你可能也想看
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這篇文章深入淺出地解釋 JavaScript 中表達式 (expression) 與陳述式 (statement) 的差異,並以 React 中 JSX 的應用為例,說明為何大括號 {} 內只能放入表達式。文章以類比人類語言的句子結構來幫助理解,並提供相關參考資料連結。
Thumbnail
這篇文章深入淺出地解釋 JavaScript 中表達式 (expression) 與陳述式 (statement) 的差異,並以 React 中 JSX 的應用為例,說明為何大括號 {} 內只能放入表達式。文章以類比人類語言的句子結構來幫助理解,並提供相關參考資料連結。
Thumbnail
為什麼 JavaScript 中的字串無法修改?為什麼複製變數後,改變其中一個會影響另一個?本文將深入解析 JavaScript 的原生值 (primitive values) 與物件 (objects) 的運作機制,說明傳值與傳參考的差異,避免非預期的程式行為,提升開發效率!!
Thumbnail
為什麼 JavaScript 中的字串無法修改?為什麼複製變數後,改變其中一個會影響另一個?本文將深入解析 JavaScript 的原生值 (primitive values) 與物件 (objects) 的運作機制,說明傳值與傳參考的差異,避免非預期的程式行為,提升開發效率!!
Thumbnail
這一集用最新的Vite工具去創建初始檔案。Vite用於創建和構建Web應用程序,具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。
Thumbnail
這一集用最新的Vite工具去創建初始檔案。Vite用於創建和構建Web應用程序,具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文章提供前端開發的完整知識地圖,涵蓋 JavaScript 基礎概念、進階概念、前端開發基礎、前端框架與工具、系統設計與架構,以及開發工具與實作等面向,並以 SEO 友善的方式撰寫,適合想學習前端開發或準備面試的讀者。
Thumbnail
本文章提供前端開發的完整知識地圖,涵蓋 JavaScript 基礎概念、進階概念、前端開發基礎、前端框架與工具、系統設計與架構,以及開發工具與實作等面向,並以 SEO 友善的方式撰寫,適合想學習前端開發或準備面試的讀者。
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News