JavaScript 有多靈活?

jopen 9年前發布 | 10K 次閱讀 JavaScript開發 JavaScript

JavaScript 是一種靈活的語言,表達力極強,我來舉一個例子,保證讓很多人大吃一驚。

本文受到了 Kyle Simpson 的文章 《Iterating ES6 Numbers》 的啟發。

JavaScript 有多靈活?

首先,在 Number.prototype 對象上,部署一個 add 方法。

Number.prototype.add = function (x) { return this + x;
};

上面代碼為 Number 的實例定義了一個 add 方法。(如果你對這種寫法不熟悉,建議先閱讀我寫的 《JavaScript 面向對象編程》 。)

由于 Number 的實例就是數值,在數值上調用某個方法,數值會自動轉為實例對象,所以就得到了下面的結果。

8['add'](2) // 10 

上面代碼中,調用方法之所以寫成8['add'],而不是8.add,是因為數值后面的點,會被解釋為小數點,而不是點運算符。

將數值放在圓括號中,就可以使用點運算符調用方法了。

(8).add(2) // 10 

其實,還有另一種寫法。

8..add(2) // 10 

上面代碼的第一個點解釋為小數點,第二個點解釋為點運算符。為了語義清晰起見,下面我統一采用圓括號的寫法。

由于add方法返回的還是數值,所以可以鏈式運算。

Number.prototype.subtract = function (x) { return this - x;
};

(8).add(2).subtract(4) // 6 

上面代碼在Number對象的實例上部署了subtract方法,它可以與add方法鏈式調用。

如果使用方括號調用屬性,寫法會很古怪。

8["add"](2)["subtract"](4) // 6 

我們還可以部署更復雜的方法。

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 方法,可以將一個數值自動擴展為一個數組。

總之,現在我們可以在數值上直接調用方法了,但是后面一對圓括號看著有點礙眼,有沒有可能去掉圓括號呢?也就是說,能不能將下面的表達式

(8).double().square()

寫成另一種樣子?

(8).double.suqare

這是可以做到的。

ES5規定,每個對象的屬性都有一個 取值方法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 。

因此,在任一數值上,讀取這兩個屬性,就可以寫成下面的樣子。

(8).double.square // 256 

也可以改用方括號運算符。

8["double"]["square"] // 256 

(完)

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!