JavaScript 有多靈活?
JavaScript 是一種靈活的語言,表達(dá)力極強(qiáng),我來舉一個例子,保證讓很多人大吃一驚。
本文受到了 Kyle Simpson 的文章《Iterating ES6 Numbers》的啟發(fā)。
首先,在 Number.prototype 對象上,部署一個 add 方法。
Number.prototype.add = function (x) { return this + x;};
上面代碼為 Number 的實例定義了一個 add 方法。(如果你對這種寫法不熟悉,建議先閱讀我寫的《JavaScript 面向?qū)ο缶幊獭贰#?/p>
由于 Number 的實例就是數(shù)值,在數(shù)值上調(diào)用某個方法,數(shù)值會自動轉(zhuǎn)為實例對象,所以就得到了下面的結(jié)果。
8['add'](2)// 10
上面代碼中,調(diào)用方法之所以寫成8['add'],而不是8.add,是因為數(shù)值后面的點,會被解釋為小數(shù)點,而不是點運算符。
將數(shù)值放在圓括號中,就可以使用點運算符調(diào)用方法了。
(8).add(2)// 10
其實,還有另一種寫法。
8..add(2)// 10
上面代碼的第一個點解釋為小數(shù)點,第二個點解釋為點運算符。為了語義清晰起見,下面我統(tǒng)一采用圓括號的寫法。
由于add方法返回的還是數(shù)值,所以可以鏈?zhǔn)竭\算。
Number.prototype.subtract = function (x) { return this - x;};(8).add(2).subtract(4)// 6
上面代碼在Number對象的實例上部署了subtract方法,它可以與add方法鏈?zhǔn)秸{(diào)用。
如果使用方括號調(diào)用屬性,寫法會很古怪。
8["add"](2)["subtract"](4)// 6
我們還可以部署更復(fù)雜的方法。
Number.prototype.iterate = function () { var result = []; for (var i = 0; i <= this; i++) { result.push(i); } return result;};(8).iterate()// [0, 1, 2, 3, 4, 5, 6, 7, 8]
上面代碼在 Number 對象的原型上部署了 iterate 方法,可以將一個數(shù)值自動擴(kuò)展為一個數(shù)組。
總之,現(xiàn)在我們可以在數(shù)值上直接調(diào)用方法了,但是后面一對圓括號看著有點礙眼,有沒有可能去掉圓括號呢?也就是說,能不能將下面的表達(dá)式
(8).double().square()
寫成另一種樣子?
(8).double.suqare
這是可以做到的。
ES5規(guī)定,每個對象的屬性都有一個取值方法get,用來自定義該屬性的讀取操作。
Number.prototype = Object.defineProperty( Number.prototype, "double", { get: function (){return (this + this)} });Number.prototype = Object.defineProperty( Number.prototype, "square", { get: function (){return (this * this)} });
上面代碼在 Number.prototype 上定義了兩個屬性 double 和 square ,以及它們的取值方法 get 。
因此,在任一數(shù)值上,讀取這兩個屬性,就可以寫成下面的樣子。
(8).double.square// 256
也可以改用方括號運算符。
8["double"]["square"]// 256
via:ruanyifeng
相關(guān)文章:
1. 將properties文件的配置設(shè)置為整個Web應(yīng)用的全局變量實現(xiàn)方法2. phpstudy apache開啟ssi使用詳解3. CSS可以做的幾個令你嘆為觀止的實例分享4. IE6/IE7/IE8/IE9中tbody的innerHTML不能賦值的完美解決方案5. 怎樣才能用js生成xmldom對象,并且在firefox中也實現(xiàn)xml數(shù)據(jù)島?6. ASP中解決“對象關(guān)閉時,不允許操作。”的詭異問題……7. xpath簡介_動力節(jié)點Java學(xué)院整理8. 詳解ABP框架中的日志管理和設(shè)置管理的基本配置9. 小技巧處理div內(nèi)容溢出10. JSP之表單提交get和post的區(qū)別詳解及實例
