由於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求值。