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

發表於 更新於 分類於 ，

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裡，看看會出現甚麼事情：

1
2
3
'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'，來看看差異：

1
2
3
'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 关键词