How can I make a subclass access private fields from the superclass in javascript?

Question

I am trying to make a stack and queue classes, but I cant make the data field private without not being able to use inheritance. I get an Uncaught SyntaxError: Private field '#data' must be declared in an enclosing class error every time I try. how can I have the subclasses inherit the private field? code below:

class Datalist {
  #data
  constructor() {
    this.#data = Array.from(arguments)
    return this.#data
  }
  valueOf() {
    return this.#data
  }
  get size() {
    return this.#data.length
  }
  peek() {
    if (this.size > 0) {
      return this.#data[0]
    } else {
      return null
    }
  }
}

class Queue extends Datalist {
  constructor() {
    super(arguments)
  }
  enqueue() {
    this.#data = this.#data.concat(arguments)
  }
  dequeue() {
    return this.#data.shift()
  }
}
class Stack extends Datalist {
  constructor() {
    super(arguments)
    this.#data = this.#data.reverse()
  }
  push() {
    this.#data = this.#data.splice(0, 0, Array.from(...arguments).reverse)
  }
  pop() {
    return this.#data.shift()
  }
}

Subclasses inherit private fields but cannot access them directly, so `this.#data` in a subclass won't work. — GOTO 0, Feb 22 '22 at 11:53
In this specific case you could use `valueOf()`, like `return this.valueOf().shift();`, but generally there is no "protected" inheritance in JavaScript at the moment. Of course in this particular case you could just use the built-in `push()` and `pop()` functions anyway. — tevemadar, Feb 22 '22 at 12:19
@DevinMyers ... Regarding the so far sole answer / approach are there any questions left? — Peter Seliger, Mar 05 '22 at 10:38

Peter Seliger · Answer 1 · 2022-02-25T13:35:05.720

A possible workaround which keeps the approach of extended classes and prototypal methods together with private fields and protected data could be based on WeakMap because one can take advantage of working with a single shared reference for each instantiation regardless of the actual inheritance.

const privateListLookup = new WeakMap;

const getPrivateList = reference =>
  privateListLookup.get(reference);

const getClone = value =>
  (typeof structuredClone === 'function')
    ? structuredClone(value)
    : JSON.parse(JSON.stringify(value));

// const getCopy = value => [...value];


class DataList {
  constructor(...list) {
    // enable shared privacy via an instance's
    // `this` reference and a weak map.
    privateListLookup.set(this, list);
  }
  valueOf() {
    // ensure data protection by not exposing
    // the private `list` reference directly.
    return getClone(getPrivateList(this));

    // // make a decision, clone or shallow copy.
    // return getCopy(getPrivateList(this));
  }
  toString() {
    return String(getPrivateList(this));
  }
  // toJSON() {
  //   return JSON.stringify(getPrivateList(this));
  // }
  get size() {
    return getPrivateList(this).length;
  }
  peek() {
    return (this.size > 0)
      // ? getPrivateList(this).at(0)
      ? getPrivateList(this)[0]
      : null;
  }
}


class Queue extends DataList {
  constructor(...args) {
    super(...args);
  }
  enqueue(...args) {
    getPrivateList(this).push(...args);
  }
  dequeue() {
    return getPrivateList(this).shift();
  }
}

class Stack extends DataList {
  constructor(...args) {
    super(...args);

    getPrivateList(this).reverse();
  }
  push(...args) {
    getPrivateList(this).push(...args);
  }
  pop() {
    return getPrivateList(this).pop();
  }
}


const queue = new Queue(...['the', 'quick', 'brown', 'fox']);
const stack = new Stack('jumps', 'over', 'the', 'lazy', 'dog');

console.log({
  queue: queue.valueOf(),
  stack: stack.valueOf(),
});
console.log({
  queue: queue.toString(),
  stack: stack.toString(),
});

console.log(
  'queue.enqueue(stack.pop()) ...'
);
queue.enqueue(stack.pop());

console.log({
  queue: queue.toString(),
  stack: stack.toString(),
});

console.log(
  'queue.enqueue(stack.pop(), stack.pop()) ...'
);
queue.enqueue(stack.pop(), stack.pop());

console.log({
  queue: queue.toString(),
  stack: stack.toString(),
});

console.log(
  'stack.peek() ...', stack.peek()
)
console.log(
  'stack.push(queue.dequeue(), queue.dequeue()) ...'
);
stack.push(queue.dequeue(), queue.dequeue());

console.log({
  queue: queue.toString(),
  stack: stack.toString(),
});
console.log({
  queue: queue.valueOf(),
  stack: stack.valueOf(),
});

.as-console-wrapper { min-height: 100%!important; top: 0; }

How can I make a subclass access private fields from the superclass in javascript?

1 Answers1