JavaScript 有多靈活？

阮一峰發表於2015-02-10
JavaScript

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

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

首先，在 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

（完）

相關文章