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
本文章提供前端開發的完整知識地圖,涵蓋 JavaScript 基礎概念、進階概念、前端開發基礎、前端框架與工具、系統設計與架構,以及開發工具與實作等面向,並以 SEO 友善的方式撰寫,適合想學習前端開發或準備面試的讀者。
Thumbnail
本文章提供前端開發的完整知識地圖,涵蓋 JavaScript 基礎概念、進階概念、前端開發基礎、前端框架與工具、系統設計與架構,以及開發工具與實作等面向,並以 SEO 友善的方式撰寫,適合想學習前端開發或準備面試的讀者。
Thumbnail
這篇文章深入淺出地解釋 JavaScript 中表達式 (expression) 與陳述式 (statement) 的差異,並以 React 中 JSX 的應用為例,說明為何大括號 {} 內只能放入表達式。文章以類比人類語言的句子結構來幫助理解,並提供相關參考資料連結。
Thumbnail
這篇文章深入淺出地解釋 JavaScript 中表達式 (expression) 與陳述式 (statement) 的差異,並以 React 中 JSX 的應用為例,說明為何大括號 {} 內只能放入表達式。文章以類比人類語言的句子結構來幫助理解,並提供相關參考資料連結。
Thumbnail
若說易卜生的《玩偶之家》為 19 世紀的女性,開啟了一扇離家的窄門,那麼《海妲.蓋柏樂》展現的便是門後的窒息世界。本篇文章由劇場演員 Amily 執筆,同為熟稔文本的演員,亦是深刻體察制度縫隙的當代女性,此文所看見的不僅僅是崩壞前夕的最後發聲,更是女人被迫置於冷酷的制度之下,步步陷入無以言說的困境。
Thumbnail
若說易卜生的《玩偶之家》為 19 世紀的女性,開啟了一扇離家的窄門,那麼《海妲.蓋柏樂》展現的便是門後的窒息世界。本篇文章由劇場演員 Amily 執筆,同為熟稔文本的演員,亦是深刻體察制度縫隙的當代女性,此文所看見的不僅僅是崩壞前夕的最後發聲,更是女人被迫置於冷酷的制度之下,步步陷入無以言說的困境。
Thumbnail
全新版本的《三便士歌劇》如何不落入「復刻經典」的巢臼,反而利用華麗的秀場視覺,引導觀眾在晚期資本主義的消費愉悅之中,而能驚覺「批判」本身亦可能被收編——而當絞繩升起,這場關於如何生存的黑色遊戲,又將帶領新時代的我們走向何種後現代的自我解構?
Thumbnail
全新版本的《三便士歌劇》如何不落入「復刻經典」的巢臼,反而利用華麗的秀場視覺,引導觀眾在晚期資本主義的消費愉悅之中,而能驚覺「批判」本身亦可能被收編——而當絞繩升起,這場關於如何生存的黑色遊戲,又將帶領新時代的我們走向何種後現代的自我解構?
Thumbnail
本文深度解析賽勒布倫尼科夫的舞臺作品《傳奇:帕拉贊諾夫的十段殘篇》,如何以十段殘篇,結合帕拉贊諾夫的電影美學、象徵意象與當代政治流亡抗爭,探討藝術在儀式消失的現代社會如何承接意義,並展現不羈的自由靈魂。
Thumbnail
本文深度解析賽勒布倫尼科夫的舞臺作品《傳奇:帕拉贊諾夫的十段殘篇》,如何以十段殘篇,結合帕拉贊諾夫的電影美學、象徵意象與當代政治流亡抗爭,探討藝術在儀式消失的現代社會如何承接意義,並展現不羈的自由靈魂。
Thumbnail
長期以來,西方美學以《維特魯威人》式的幾何比例定義「完美身體」,這種視覺標準無形中成為殖民擴張與種族分類的暴力工具。本文透過分析奈及利亞編舞家庫德斯.奧尼奎庫的舞作《轉轉生》,探討當代非洲舞蹈如何跳脫「標本式」的文化觀看。
Thumbnail
長期以來,西方美學以《維特魯威人》式的幾何比例定義「完美身體」,這種視覺標準無形中成為殖民擴張與種族分類的暴力工具。本文透過分析奈及利亞編舞家庫德斯.奧尼奎庫的舞作《轉轉生》,探討當代非洲舞蹈如何跳脫「標本式」的文化觀看。
Thumbnail
這一集用最新的Vite工具去創建初始檔案。Vite用於創建和構建Web應用程序,具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。
Thumbnail
這一集用最新的Vite工具去創建初始檔案。Vite用於創建和構建Web應用程序,具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。
Thumbnail
為什麼 JavaScript 中的字串無法修改?為什麼複製變數後,改變其中一個會影響另一個?本文將深入解析 JavaScript 的原生值 (primitive values) 與物件 (objects) 的運作機制,說明傳值與傳參考的差異,避免非預期的程式行為,提升開發效率!!
Thumbnail
為什麼 JavaScript 中的字串無法修改?為什麼複製變數後,改變其中一個會影響另一個?本文將深入解析 JavaScript 的原生值 (primitive values) 與物件 (objects) 的運作機制,說明傳值與傳參考的差異,避免非預期的程式行為,提升開發效率!!
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News