(void 0) 與 undefined 之間的小九九

前言

原文連接

源碼地址

這是underscore.js源碼分析的第一篇文章，爲何選擇寫這篇文章呢？其實主要有兩點

1. 下劃線源碼中通篇可見這樣的判斷obj === void 0,初次看這樣的寫法徹底不知道什麼意思，因此想整明白它。
2. 決定寫一個系列把下劃線分析完整，但願由淺入深，柿子撿軟的捏，先從簡單的開始入手(😀)

寫完這篇文章但願達到什麼樣的效果呢？

1. 說明白爲何用(void 0)代替undefined

2. (void 0)的一些簡單應用

https://user-gold-cdn.xitu.io/2017/5/9/ee6837151ae5b8737445980b3841cdce

void 0是個啥

void 0是個啥，爲毛它能夠直接代替undefined關鍵字來作判斷呢？咱們能夠看下mdn上的解釋

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

void 運算符 對給定的表達式進行求值，而後返回 undefined

啥？去執行了一段表達式，最後卻獲得undefined，那要是表達式執行的結果是二、三、八、毛主席萬歲，也是返回undefined嗎？答案是：對的。他就是這麼個東西，無論你表達式裏寫的是個啥，我最後就是給你個undefined。

黑人問號

undefined又是啥

undefined是js原始類型值之一，也是全局對象window的屬性，在部分低級別的瀏覽器中能夠被修改，在局部做用域中也能夠被修改。

首先咱們來看這一段斷碼

var undefined = 'qianlongo'
alert(undefined)複製代碼

最後console出來的是啥呢？undefined : qianlongo,
沒圖你說個js，接下來截取部分瀏覽器運行後的截圖

ie7

ie7

ie8

ie8

ie9

測試結果爲undefined

ie10

ie10

chrome

在最新的版本58.0.3029.81測試結果爲undefined

firefox

在最新的版本52.0.2測試結果爲undefined

歐朋瀏覽器

在最新的版本39.0.2256.48測試結果爲undefined

你看ie老版本中就是那麼任性，在全局做用域中能夠直接改寫undefined，也就是說當你想知道一個變量是否是等於undefined的時候直接這樣判斷已經不安全了。

if (obj === undefined) {
  // xxx
}複製代碼

接下來咱們再看一段js

var testUndefined = function () {
  var obj = {}
  var undefined = 'underscore'
  var window = {
    'undefined': 'qianlongo'
  }
  console.log(window) // {'undefined': 'qianlongo'}
  console.log(undefined) // underscore
  console.log(window.undefined) // qianlongo
  console.log(obj.name === undefined) // false
  console.log(obj.name === window.undefined) // false
  console.log(obj.name === (void 0)) // true
}

testUndefined()複製代碼

能夠得出，window，undefined自己在局部做用域中是能夠被重寫掉的，一樣的道理，若是你在局部做用域中一樣用如下代碼來判斷obj是否是undefined，是有風險的。

if (obj === undefined) {
  // xxx
}複製代碼

爲啥要用void 0來代替undefined

爲啥要用void 0來代替undefined，基於以上介紹，緣由就在這裏了，void 0不管什麼時候何地，後面跟了什麼，結果都獲得undefined，這正好是咱們須要的。因此將上面的判斷改寫一下

固然了還要另外一個緣由void 0 比undefined短

if (obj === void 0) {
  // xxx
}複製代碼

void 0的一些其餘應用

1. 填充a標籤的href

<div style="height: 10000px;"></div>
<a href="#">xxxx</a>
<script>
  console.log('xxxx')
</script>複製代碼

上面這段代碼使用一個#號來填充a標籤的href屬性，這實際上是有一些弊端的，好比用戶點擊的時候，頁面會回到頂部(網上有人說會刷新頁面，可是本身試了好像不會)，試想我好不容易滾啊滾啊滾到xxxx這幾個文字的地方，一不留神手賤點了一下，瞬間頁面又回到頂部了，是否是要哭死😭。

因此常見的解決方法是

<div style="height: 10000px;"></div>
<a href="javascript:void(0)">xxxx</a>
<script>
  console.log('xxxx')
</script>複製代碼

1. What's the valid way to include an image with no src?,在這個問題中提到用void 0去替代image標籤的空src屬性會減小頁面請求(是否屬實有待考證)

結尾

第一篇暫時寫完了，歡迎你們吐槽和提意見。

參考文章連接：

What does 「javascript:void(0)」 mean?

difference between 「void 0 」 and 「undefined」

void operator