談談Javascript中的void操作符

由於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)'

寫在最後

回到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求值。