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

上記コードの最初のドットは小数点として解釈され、2番目のドットはドット演算子として解釈されます。意味を明確にするために、以下では括弧を使用します。

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()

を別の言い方で書けますか？

できるよ。

ES5では、各オブジェクトの属性には、属性の読み取り操作をカスタマイズするために使用される値メソッドgetがあることが規定されています。

(8).double.suqare

上記のコードは、Number.prototype の 2 つのプロパティ double と square と、その値のメソッド get を定義しています。

したがって、どの値でも、これら 2 つの属性を読み取ると、次のように書くことができます。

Number.prototype = Object.defineProperty(
  Number.prototype, "double", {
    get: function (){return (this + this)} 
  }
);
Number.prototype =  Object.defineProperty(
  Number.prototype, "square", {
    get: function (){return (this * this)} 
  }
);

代わりに角括弧演算子を使用することもできます。