養成一個好習慣:在嚴格模式下開發Javascript

edithfang發表於2014-06-22


前言

坦白說對於Javascript所謂的嚴格模式在今年早些時候我還一無所知,真正在開發中應用也就幾個月.對於這個ECMAScript5就已經引入的東西,已經不能算新了,對於這個東西一直處在字面的理解上,就是"更加嚴格,規範的限制Javscript程式碼的書寫",今天打算結合使用的經驗好好研究下它到底是怎麼回事.

正文

Javascript中如果你想你的程式碼在嚴格模式下執行,非常簡單,只要在程式碼的第一行,也就是首行加上"use strict"指令即可.對於那些不支援ECMAScript5的瀏覽器來說它沒有任何影響,所以如果想它生效要確定一下你的瀏覽器,不是所有瀏覽器都支援,畢竟我們給力的國情決定IE還是市場主力,IE10一下的同學要注意了.

使用"use strict"能給開發帶來什麼好處?

其實如果你一直在Chrome環境下開發,並且程式碼書寫算規範,那麼你幾乎不會感覺到有任何變化.但是確實有一些顯而易見的好處,我也從中受益所以和大家分享一下.

(1) 錯誤提示更加準確

Javascript的錯誤提示一直是個比較傷心的問題,鬆散的語言結構在賦予格外靈活的同時也讓他像調皮的孩子一樣難以管教.在Javascript應用越來越重的今天,這會明顯拖延我們的開發進度,影響開發的感覺.

"use strict"模式下可以更加明確的提示你的程式碼出了什麼樣的錯誤,這讓你可以更加快速並且專注的去解決問題.

(2) 變數必須宣告

 在非嚴格模式如果你沒有宣告一個變數就使用它,那麼它會被當做一個全域性變數,在嚴格模式下則報錯並丟擲異常.我一直認為先宣告後使用是一個好習慣,並且一直堅持.

(3) 屬性或者引數不再可重複

雖然沒有寫過,不過我確實看過類似的程式碼:

var a = {
  aaa: 'dddddd',
  bbb: 'dddddd',
  aaa: 'cccccc'
}

雖然不算是驚呆了,不過我就想問,哥們你是從CSS轉到JS的嗎...屬性覆蓋都來了.在非嚴格模式下這樣書寫可能不會報錯,如果你用"use strict"那麼抱歉,瀏覽器會丟擲異常.

(4) with被禁用

這個雖然是一個重要的改變,相當於API層次的禁用,不過貌似日常編碼中我們使用with的時候並不多,所以影響不大

(5) Function中this不再是window

這一點算是嚴格模式下的一個很嚴謹的地方,經常在呼叫的函式中我們用this指向window這類全域性變數.但是在嚴格模式下,這樣的this的值是undefined.

(6) 變數刪除

相比較與屬性刪除我們可能很少或者幾乎不會去進行變數刪除的操作,在嚴格模式下變數的刪除是不允許的.而對於屬性的刪除,只有configurable設為true的屬性才能被刪除.

"use strict";
  var x;
  delete x; // 語法錯誤
  var o = Object.create(null, 'x', {
      value: 1,
      configurable: true
  });
  delete o.x; // 刪除成功

(7) 函式宣告只能在頂層

這個改變非常可能對舊有的程式碼或者原本書寫就不規範的程式碼造成影響,以前我們定義function可以說是隨心所欲,不管在if還是for中,都是想怎麼樣就怎麼樣.

在"use strict"模式下,為了與以後ECMAScript6接軌,規定了函式的宣告只能在全域性作用域或者函式作用域的頂層進行宣告.

(8) arguments物件不再神奇

在嚴格模式中,函式裡的arguments物件擁有傳入函式值的靜態副本.而在非嚴格模式下,arguments物件的陣列元素和函式引數都指向同一個值的引用.這種限制會使得很多神奇的程式碼不再可用.

結論:

上面這幾點是我感覺使用了"use strict"後變化最大的地方,另外需要注意"use strict"的使用也是有風險的,並不是萬金油.尤其是在舊有的專案中,如果想使用嚴格模式要非常謹慎,一旦你在檔案首行加入了"use strict"那麼整個檔案都會受到這個限制,如果你合併所有檔案,這一點要格外注意.

當然你也可以靈活的使用"use strict",比如在函式內部的首行,或者在匿名函式作用域的首行去使用.注意這裡之所以強調是首行,因為瀏覽器對於指令碼程式碼以及函式體中第一條常規語句後的內容都不會當作指令去解析,也就是說如果你的"use strict"寫在了var a=0;之後,那麼瀏覽器只會將其當作一個普通的表示式語句.

最後,希望大家在開發時條件允許的情況下儘量使用"use strict"開發,它最大的好處就是幫助你更快的定位錯誤!詳細的提示資訊讓你更好的糾錯.

本文轉載自:http://my.oschina.net/blogshi/blog/279422

評論(0)

相關文章