JavaScript でも Ruby の Decorator 相当のことを試してみる

先日の Decorator の記事で Ruby での Decorator を試しました。
これに相当するものを、JavaScript でもできないだろうか？というメモです。

クラスベースで機能を付与するには、mixin に相当する実装でできるのは、以前の記事で確認できていました。

クラスについての機能付与できていましたが、インスタンスに動的にメソッド生やすには以下の方法でできました。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
class A {
  #num = 0;

  constructor(n) {
    this.#num = n;
  }
  set num(n) {
    this.#num = n;
  }
  get num() {
    return this.#num;
  }
}

a = new A(10);
console.log(a);
// => A {}
console.log(a.num);
// => 10

// ここまでは、ただのクラス定義

const decorateCalc = (src) => {
  src.add = (p) => {
    src.num = src.num + p;
  };
  src.mul = (p) => {
    src.num = src.num * p;
  };

  return src;
};

// 関数をかませて機能をインスタンスに付与する
decoratedA = decorateCalc(a);

console.log(decoratedA);
// => A { add: [Function], mul: [Function] }

console.log(decoratedA.num);
// => 10

decoratedA.add(20);
console.log(decoratedA.num);
// => 30

decoratedA.mul(2);
console.log(decoratedA.num);
// => 60

関数の中で機能付与しましたが、べつに直接 .add .mul を生やすことはできる。

場所を問わず関数を生やすと、内容を追いにくくなりそうだなぁ。
と感じるので、試してみたもののあまり使わない気がします。

JavaScript の Decorator って見かけたことがあるなと調べてみましたが、どうやら未だ正式仕様になっていないようです。
TypeScript は先んじて「実験的機能として」取り込んだもののどうなるのか？

ではでは。