ES2022 クラスインスタンスのプライベートのフィールドについて

Question

functionとprototypeで記述された関数をclassを使って書き換えてみました。
ES2015の書き方では問題なく作動しましたが、 ES2022のプライベートのフィールドを
設定した所、作動してくれなくなりました。エラーメッセージはありません。
どうしてなのか原因が分かりません。教えて頂けないでしょうか。よろしくお願い致します。

「改訂新版jQuery本格入門 P290リスト6-51」より。コードは私が編集を加えました。

  const Counter = function(initial, step) {
    this.count = !Number.isNaN(initial) && Number(initial) || 0; // 初期値
    this.step  = !Number.isNaN(step)    && Number(step)    || 1; // 増分
  };

  Counter.prototype = { // thisはCounterインスタンスを表す
    inc() { this.count += this.step; }
  };

  const LimitCounter = function(counter, limit) {
    this.counter  = counter;
    this.count    = this.counter.count;
    this.deferred = $.Deferred(); // resolve実行のためのDeferredオブジェクト
    this.limit    = limit;
    // このオブジェクトにPromiseの機能を追加。($.whenや.promise()を記述しなくて済む)
    this.deferred.promise(this); 
  };

  LimitCounter.prototype = {
    inc() {
      if (!this.deferred.state() !== 'resolved') { 
        this.counter.inc(); 
        this.count = this.counter.count;

        if (this.counter.step > 0 && this.counter.count >= this.limit ||
            this.counter.step < 0 && this.counter.count <= this.limit) {

          // 限度に達したらresolveを実行
          this.deferred.resolve(this.limit, this.count);
        }
      }
    }
  };

  const counter = new LimitCounter(new Counter(1, 2), 4);

  // カウンタの値が限度に達したらdoneで登録された処理を実行
  counter.done(function(limit, count) {
    alert(`カウンタの値が${ limit }に達しました(${ count })`);
  });

  // カウンタの値を表示する処理(thisと引数は$.proxyにて設定)
  const adapter = function(tag) { $(tag).text(this.count); };

  // ボタンのクリックでカウンタを増やせるようにする
  $(':button').bind({                              // inc, setはカスタムイベント
    inc : $.proxy(counter, 'inc'),                 // カウンタを増やす
    set : $.proxy(adapter, counter, $('#count')),  // カウンタの値を表示
    click() { // カスタムイベントの発火(thisはクリックされた要素)
      $(this)
        .trigger('inc')
        .trigger('set');
    }
  });

  // カウンタの初期値を表示
  adapter.call(counter, $('#count'));

  class Counter { // ES2015 作動する。他の部分は変更していない。
    constructor(initial, step) {
      this.count = !Number.isNaN(initial) && Number(initial) || 0; // 初期値
      this.step  = !Number.isNaN(step)    && Number(step)    || 1; // 増分
    }

    inc() { this.count += this.step; } // thisはCounterインスタンスを表す
  }

class Counter { // ES2022 作動せず。
  #count;
  #step;

  constructor(initial, step) {
    this.#count = !Number.isNaN(initial) && Number(initial) || 0; // 初期値
    this.#step  = !Number.isNaN(step)    && Number(step)    || 1; // 増分
  }

  inc() { this.#count += this.#step; } // thisはCounterインスタンスを表す
}

Comments

[maisumakun]

> ES2022 作動せず

他の部分のコードはどのようになっているのでしょうか？

[taka_oct092018]

maisumakun様、返信ありがとうございます。
最初のコードの10行目以降は全く同じです。

[yambejp]

jQuery関係なくないですか？
問題点をしぼって質問したほうが回答が付きやすいと思います

Answer 1

• プライベートクラス機能 - JavaScript | MDN

ハッシュ接頭辞へのアクセスはセッタ/ゲッタを利用しすればよいでしょう

class Counter {
  #count;
  #step;
  constructor(initial, step) {
    this.count = Number(initial)||0;
    this.step  = Number(step)||1;
  }
  inc() { this.count += this.step; }
  get count(){
    return this.#count;
  }
  set count(num){
    this.#count=num;
  }
  get step(){
    return this.#step;
  }
  set step(num){
    this.#step=num;
  }
}
const c=new Counter(5,3);
console.log(c.count); // 5
c.inc();
console.log(c.count); // 8

Comments

[think49]

> ハッシュ接頭辞へのアクセスはセッタ/ゲッタを利用しすればよいでしょう

その実装の場合、ハッシュ接頭辞(プライベートプロパティ)にする必要がなくなるのではないでしょうか。

[yambejp]

> ハッシュ接頭辞(プライベートプロパティ)にする必要がなくなる

普通にカプセル化の手法だと思いますが、セッタ/ゲッタの構成でアクセスを絞ることができるメリットがあると思います。もともとプライベート宣言がなく、アンダーバー接頭辞を無理やり使って実現していたわけですし
https://teratail.com/questions/18728

[taka_oct092018]

yambejp様、いつもアドバイスをありがとうございます。

具体的に挙げて頂いたコードは教科書の例題のように分かりやすいです。
普段はセッターとゲッターは使ってないので勉強になりました。

Answer 2

最初のコードの10行目以降は全く同じです。

countと#countは別のプロパティです。そして、#countにクラス外からアクセスする方法はありません。

Comments

[taka_oct092018]

maisumakun様、いつもアドバイスをありがとうございます。

その2つを完全に同一視しておりました。
また基礎の部分を復習します。