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

novo 發(fā)布于2019-08-29 12:34 / 2724人閱讀

摘要：又是啥是原始類型值之一，也是全局對象的屬性，在部分低級別的瀏覽器中可以被修改，在局部作用域中也可以被修改。所以常見的解決方法是在這個問題中提到用去替代標簽的空屬性會減少頁面請求是否屬實有待考證結尾第一篇暫時寫完了，歡迎大家吐槽和提意見。

前言

原文鏈接

源碼地址

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

下劃線源碼中通篇可見這樣的判斷obj === void 0,初次看這樣的寫法完全不知道什么意思，所以想整明白它。

決定寫一個系列把下劃線分析完整，希望由淺入深，柿子撿軟的捏，先從簡單的開始入手(?)

寫完這篇文章希望達到什么樣的效果呢？

說明白為什么用(void 0)代替undefined

(void 0)的一些簡單應用

void 0是個啥

void 0是個啥，為毛它可以直接代替undefined關鍵字來做判斷呢？我們可以看下mdn上的解釋

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

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

啥？去執(zhí)行了一段表達式，最后卻得到undefined，那要是表達式執(zhí)行的結果是2、3、8、毛主席萬歲，也是返回undefined嗎？答案是：對的。他就是這么個東西，不管你表達式里寫的是個啥，我最后就是給你個undefined。

undefined又是啥

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

首先我們來看這一段斷碼

var undefined = "qianlongo"
alert(undefined)

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

ie7

ie8

ie9

測試結果為undefined

ie10

chrome

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

firefox

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

歐朋瀏覽器

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

你看ie老版本中就是那么任性，在全局作用域中可以直接改寫undefined，也就是說當你想知道一個變量是不是等于undefined的時候直接這樣判斷已經(jīng)不安全了。

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的一些其他應用

填充a標簽的href


xxxx

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

所以常見的解決方法是


xxxx

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

云服務器 GPU云服務器大數(shù)據(jù)與共享經(jīng)濟之間的聯(lián)系 undefined與null區(qū)別 centos與主機之間復制粘貼 linux之間的訪問

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111987.html

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

摘要：又是啥是原始類型值之一，也是全局對象的屬性，在部分低級別的瀏覽器中可以被修改，在局部作用域中也可以被修改。所以常見的解決方法是在這個問題中提到用去替代標簽的空屬性會減少頁面請求是否屬實有待考證結尾第一篇暫時寫完了，歡迎大家吐槽和提意見。前言原文鏈接源碼地址這是underscore.js源碼分析的第一篇文章，為什么選擇寫這篇文章呢？其實主要有兩點下劃線源碼中通篇可見這樣的判斷...

Arno 2019-08-20 16:25 評論0 收藏0
面向?qū)ο?em>的小九九

摘要：由構造函數(shù)返回的對象就是表達式的結果。如果構造函數(shù)沒有顯式返回一個對象，則使用步驟創(chuàng)建的對象。運算符返回一個布爾值，表示對象是否為某個構造函數(shù)的實例。面向?qū)ο?本人能力有限，有誤請斧正本文旨在復習面向?qū)ο?不包含es6) 本文學習思維創(chuàng)建對象的方式，獲取對象屬性構造函數(shù),構造函數(shù)的new 做了什么原型與原型對象原型鏈繼承(借用構造繼承、原型繼承、組合繼承、寄生組合繼承)...

時飛 2019-08-22 18:16 評論0 收藏0
教你認清這8大殺手锏

摘要：但縱使如此，我也要技術這條路上一路走到黑。接下來你想不想一起看下下劃線是怎么實現(xiàn)的。這個迭代傳遞個參數(shù)和迭代的或者和最后一個引用的整個是從右側開始組合的元素的函數(shù)使用案例我們來看一下上面的執(zhí)行過程是怎樣的。希望這篇文章對大家有點作用。前言 underscore.js源碼分析第三篇,前兩篇地址分別是那些不起眼的小工具？ (void 0)與undefined之間的小九九本篇原文鏈接 ...

Elle 2019-08-29 12:35 評論0 收藏0
教你認清這8大殺手锏

摘要：但縱使如此，我也要技術這條路上一路走到黑。接下來你想不想一起看下下劃線是怎么實現(xiàn)的。這個迭代傳遞個參數(shù)和迭代的或者和最后一個引用的整個是從右側開始組合的元素的函數(shù)使用案例我們來看一下上面的執(zhí)行過程是怎樣的。希望這篇文章對大家有點作用。前言 underscore.js源碼分析第三篇,前兩篇地址分別是那些不起眼的小工具？ (void 0)與undefined之間的小九九本篇原文鏈接 ...

alin 2019-08-22 11:04 評論0 收藏0