談談Javascript中的void操作符

文章轉載自:https://segmentfault.com/a/1190000000474941

由於JS表達式偏囉嗦,於是最近便開始採用Coffeescript來減輕負擔。舉個栗子,當我想取屋子裏的第一條dog時,首先要判斷house對象是否存在,然後再判斷house.dogs是否存在,最後取house.dogs[0]。在JS需要這麼寫

var dog = (typeof house !== 'undefined && house !== null) && house.dogs && house.dogs[0]

在Coffee中,我只需要這麼寫:

dog = house?.dogs?[0];

寫到這裏,讀者會問,這跟標題《Javascript中的void》有一毛錢關係?Coffee的本質就是JS,之所以Coffee能工作的很好,是因爲它生成出了高效而且健壯的JS代碼,我們可以看看它的生成結果。

var dog, _ref;

dog = typeof house !== "undefined" && house !== null ? (_ref = house.dogs) != null ? _ref[0] : void 0 : void 0;

短短一行Coffee代碼生成出了如此長的JS代碼,看上去似乎比我最前面自己用JS寫的更靠譜更安全,末尾還出來了兩個void 0,這究竟是何方神聖?

結構化一下上面的例子:

dog = (typeof house !== "undefined" && house !== null) ? 
        ((_ref = house.dogs) != null ? _ref[0] : void 0 ) 
        : void 0;
  • 如果house未定義或house爲null時,返回void 0
  • 如果house.dogs爲null時,返回void 0

可void 0究竟是什麼值,這個倒很容易測試:

typeof void 0 //得到"undefined"
console.log(void 0) //輸出undefined

似乎void 0就是undefined了,但這樣子路數太野,也不夠嚴謹,即無法回答:void 100, void hello(), void i++這無數可能組合的值是什麼?

我們來瞅瞅規範是怎麼說的吧。

規範是這麼說的

在ECMAScript 262規範,有如下描述:

The void Operator

The production UnaryExpression : void UnaryExpression is evaluated as follows:

Let expr be the result of evaluating UnaryExpression.
Call GetValue(expr).
Return undefined.
NOTE: GetValue must be called even though its value is not used because it may have observable side-effects.

搬譯一下:

void操作符

產生式 UnaryExpression : void UnaryExpression 按如下流程解釋:

  • 令 expr 爲解釋執行UnaryExpression的結果。
  • 調用 GetValue(expr).
  • 返回 undefined.

注意:GetValue一定要調用,即使它的值不會被用到,但是這個表達式可能會有副作用(side-effects)。

重點在於:無論void後的表達式是什麼,void操作符都會返回undefined. 因此上面由Coffee編譯出來的代碼我們可以認爲是這樣的:

dog = (typeof house !== "undefined" && house !== null) ? 
        ((_ref = house.dogs) != null ? _ref[0] : undefined ) 
        : undefined ;

問題來了,既然(void 0) === undefined,那直接寫undefined不就行了麼?

爲什麼要用void?

因爲undefined在javascript中不是保留字。換言之,你可以寫出:

function joke() {
    var undefined = "hello world";
    console.log(undefined); //會輸出"hello world"
}
console.log(undefined); //輸出undefined

對的,你可以在一個函數上下文內以undefined做爲變量名,於是在這個上下文寫的代碼便只能通過從全局作用域來取到undefined,如:

window.undefined //瀏覽器環境
GLOBAL.undefined //Node環境

但要注意的是,即便window, GLOBAL仍然可以在函數上下文被定義,故從window/GLOBAL上取undefined並不是100%可靠的做法。如:

function x() {
   var undefined = 'hello world',
       f = {},
       window = {
           'undefined': 'joke'
       };
   console.log(undefined);// hello world
   console.log(window.undefined); //joke
   console.log(f.a === undefined); //false
   console.log(f.a === void 0); //true
}

於是,採用void方式獲取undefined便成了通用準則。如underscore.js裏的isUndefined便是這麼寫的:

_.isUndefined = function(obj) {
    return obj === void 0;
}

除了採用void能保證取到undefined值以外,還有其它方法嗎?有的,還有一種方式是通過函數調用。如AngularJS的源碼裏就用這樣的方式:

(function(window, document, undefined) {
    //.....
})(window, document);

通過不傳參數,確保了undefined參數的值是一個undefined。

其它作用

除了取undefined外,void還有什麼其它用處嗎?

還有一個常見的功能,填充href。下面是一個微博截圖,它的轉發, 收藏, 討論都是超鏈接,但是用戶並不希望點擊它們會跳轉到另一個頁面,而是引發出一些交互操作。

微博截圖

理論上而言,這三個超鏈接都是沒有URL的,但如果不寫的話,呵呵,點擊它會刷新整個頁面。於是便用上了href="javascript:void(0)的方式,確保點擊它會執行一個純粹無聊的void(0)

另一種情況是,如果我們要生成一個空的src的image,最好的方式似乎也是src='javascript:void(0)',參見StackOverflow上的這個問題:What’s the valid way to include an image with no src?

寫在最後

回到void的定義,有一句話特別讓人迷惑:

注意:GetValue一定要調用,即使它的值不會被用到,但是這個表達式可能會有副作用(side-effects)。

這是什麼意思?這表示無論void右邊的表達式是什麼,都要對其求值。這麼說可能不太明白,在知乎上winter大神有過闡述關於js中void,既然返回永遠是undefined,那麼GetValue有啥用?,我且拾人牙慧,代入一個場景,看代碼:

var happiness = 10;
var girl = {
    get whenMarry() {
        happiness--;
        return 1/0; //Infinity
    },
    get happiness() {
        return happiness;
    }
};

console.log(girl.whenMarry); //調用了whenMarry的get方法
console.log(girl.happiness); // 9

void girl.whenMarry; //調用了whenMarry的get方法
console.log(girl.happiness); // 8

delete girl.whenMarry; //沒有調用whenMarry的get方法
console.log(girl.happiness); //還是8

上述代碼定義了一個大齡文藝女青年,每被問到什麼時候結婚呀(whenMarry),happiness都會減1。從執行情況可以看出,無論是普通訪問girl.whenMarry,還是void girl.whenMarry都會使她的happiness–。而如果把void換成delete操作符寫成delete girl.whenMarry,她的happiness就不會減了,因爲delete操作符不會對girl.whenMarry求值。

總結

void有如下作用:

  • 通過採用void 0取undefined比採用字面上的undefined更靠譜更安全,應該優先採用void 0這種方式。
  • 填充<a>的href確保點擊時不會產生頁面跳轉; 填充的src,確保不會向服務器發出垃圾請求。
發佈了11 篇原創文章 · 獲贊 11 · 訪問量 2萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章