prototypeからPrivateクラスフィールドを用いたclass構文に 書き換える方法が分かりません。

Privateクラスフィールドを使わないclass構文では意図した通り作動してくれますが、
クラスの変数をプライベート変数として設定しようとすると、上手く行きません。
エラーも出ないのでどこに不具合があるのかがよく分からないです。

「改訂新版jQuery本格入門_サンプルコード_P260より」 一部編集しています。

調べたサイト
MDN plus
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Classes/Private_class_fields

JavaScript Primer
https://jsprimer.net/basic/class/

HTML

<div> <input type="button" value="カウンタ"> <span id="count"></span> </div>

jQuery

$(function() { // 問題なく作動する // カウンターオブジェクト function Counter(initial, step) { this.count = !isNaN(initial) && Number(initial) || 0; // 初期値 this.step = !isNaN(step) && Number(step) || 1; // 増分 } // thisはCounterインスタンスを表す Counter.prototype = { increment() { this.count += this.step } }; // カウンタの値を表示する処理（thisと引数tagは$.proxyにて設定） function adapter(tag) { $(tag).text(this.count); } // 表示に用いるCounter()インスタンス const counter = new Counter(); // ボタンのクリックでカウンタを増やせるようにする // increment、setはカスタムイベント $('input[type="button"]').on({ increment : $.proxy(counter, 'increment'), // カウンタを増やす set : $.proxy(adapter, counter, $('#count')), // カウンタの値を表示 // カスタムイベントの発火（thisはクリックされた要素） click() { $(this) .trigger('increment') .trigger('set') } }); // カウンタの初期値を表示 adapter.call(counter, $('#count')); });

jQuery

// カウンターオブジェクトをclass構文で書き換えた // 問題なく作動 class Counter { constructor(count, step) { this.count = !isNaN(count) && Number(count) || 0; // 初期値 this.step = !isNaN(step) && Number(step) || 1; // 増分 } // thisはCounterインスタンスを表す increment() { this.count += this.step; } } // 以下は元のコードと同じ

jQuery

// 作動せず。 class Counter { #count; #step; constructor(count, step) { this.#count = count; this.#step = step; } get count() { return this.#count; } get step() { return this.#step; } set count(newCount) { this.#count = !isNaN(newCount) && Number(newCount) || 0; // 初期値 } set step(newStep) { this.#step = !isNaN(newStep) && Number(newStep) || 1; // 増分 } // thisはCounterインスタンスを表す increment() { this.count += this.step; } } // 以下は元のコードと同じ