從用 void 0 代替 undefined 說起

Why underscore

最近開始看 underscore源碼,並將 underscore源碼解讀 放在了我的 2016計劃 中。

閱讀一些著名框架類庫的源碼,就好像和一個個大師對話,你會學到很多。爲什麼是 underscore?最主要的原因是 underscore 簡短精悍(約 1.5k 行),封裝了 100 多個有用的方法,耦合度低,非常適合逐個方法閱讀,適合樓主這樣的 JavaScript 初學者。從中,你不僅可以學到用 void 0 代替 undefined 避免 undefined 被重寫等一些小技巧 ,也可以學到變量類型判斷、函數節流&函數去抖等常用的方法,還可以學到很多瀏覽器兼容的 hack,更可以學到作者的整體設計思路以及 API 設計的原理(向後兼容)。

之後樓主會寫一系列的文章跟大家分享在源碼閱讀中學習到的知識。

歡迎圍觀~ (如果有興趣,歡迎 star & watch~)您的關注是樓主繼續寫作的動力


Why does void 0 replace undefined

說來慚愧,underscore 源碼解讀這個 Repo 放在 Github 都已經 20 天沒有更新了,要不是今天 “不小心” 注意到,我居然都快忘了(是不是 lu 多了),所以今晚無論如何都要 lu 出第一篇(畢竟萬事開頭難)。相對於其他源碼解讀的文章,基本都會從整體設計開始講起,樓主覺得 underscore 這個庫有點特殊,so 決定按照自己的思路,從用 void 0 代替 undefined 說起。

underscore 源碼沒有出現 undefined(注意,其實有出現一處,是爲 “undefined”,而不是 undefined),而用 void 0 代替之。爲什麼要這麼做?我們可以從兩部分解讀,其一是 undefined 哪裏不好了,你非得找個替代品?其二就是替代品爲毛要找 void 0?

我們先看第一點,答案很簡單,undefined 並不是保留詞(reserved word),它只是全局對象的一個屬性,在低版本 IE 中能被重寫。


var undefined = 10;

// undefined -- chrome

// 10 -- IE 8

alert(undefined);

事實上,undefined 在 ES5 中已經是全局對象的一個只讀(read-only)屬性了,它不能被重寫。但是在局部作用域中,還是可以被重寫的。


(function() {

  var undefined = 10;

  // 10 -- chrome

  alert(undefined);

})();

(function() {

  undefined = 10;

  // undefined -- chrome

  alert(undefined);

})();

接下來思考第二個問題,爲毛找的替代品是 void 0?

我們來看看 MDN 的解釋:


The void operator evaluates the given expression and then returns undefined.

意思是說 void 運算符能對給定的表達式進行求值,然後返回 undefined。也就是說,void 後面你隨便跟上一個表達式,返回的都是 undefined,都能完美代替 undefined!那麼,這其中最短的是什麼呢?毫無疑問就是 void 0 了。其實用 void 1,void (1+1),void (0) 或者 void “hello”,void (new Date()) 等等,都是一樣的效果。更重要的前提是,void 是不能被重寫的(cannot be overidden)。

那麼,ES5 大環境下,void 0 就沒有用武之地了嗎?答案是否定的,用 void 0 代替 undefined 能節省不少字節的大小,事實上,不少 JavaScript 壓縮工具在壓縮過程中,正是將 undefined 用 void 0 代替掉了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章