Protected properties in ES6 classes (using Symbols?)

Question

Question:

How would you implement protected properties in ES6 classes in an elegant way? (that can be accessed only from inside the child class)

I am not searching a response like "ES don't have protected/package properties". It is already known. I want a nice and cleaner workaround to emulate protected properties.

I don't want to add security. Only a cleaner exposed interface to all the end users of the API.

---

Example:

I have the following API: (node)

my-class.js:

let Symbols = {
    _secret: Symbol("_secret")
};
class MyClass {
    constructor() {
        this.public = "This is public";
        this[Symbols._secret] = "This is private";
    }
}
// Set the Symbols to a static propietry so any class can access it and extend it
MyClass[Symbol.for("_Symbols")] = Symbols;
module.exports = MyClass

my-child-class.js:

let MyClass = require("./my-class.js");

// extends protected properties with own properties
Symbols = Object.assign({}, MyClass[Symbol.for("_Symbols")] , {
    _childSecret = Symbol("_childSecret")
});

class MyChildClass extends MyClass {
    constructor() {
        super();
        this[Symbols._childSecret] = "This is also private";
        console.log(this[Symbols._secret]); //logs "this is private"
        console.log(this[Symbols._childSecret]); //logs "this is also private"
    }
}
// Set the Symbols to a static propietry so any class can access it and extend it
MyClass[Symbol.for("_Symbols")] = Symbols;
module.exports = MyChildClass;

To use the class:

let MyChildClass = require("./my-child-class.js");
var c = new MyChildClass();

The advantages:

• The exposed API is cleaner. And the end user of the API can view the exposed methods.

The problem:

• The code is "pretty" in the base class, but not that pretty in the child class. Is there any way to improve the order?

• Anyone that can access to Symbol.for("_Symbols") can access to all the protected/private properties of the API. (EDIT: I don't mind this. This is not a problem for me since if someone want to break the API accessing the internal symbols, it is they fault)

Answer 1

Declaration: Using modules and symbols is an information hiding technique in ES2015+ (but Class attributes using Symbols will be hidden, not strictly private - as per the OP question and assumption).

A lightweight information hiding can be achieved through a combination of ES2015 modules (which would only export what you declare as exported) and ES2015 symbols. Symbol is a new built-in type. Every new Symbol value is unique. Hence can be used as a key on an object.

If the client calling code doesn't know the symbol used to access that key, they can't get hold of it since the symbol is not exported. Example:

vehicle.js

const s_make = Symbol();
const s_year = Symbol();

export class Vehicle {

  constructor(make, year) {
    this[s_make] = make;
    this[s_year] = year;
  }

  get make() {
    return this[s_make];
  }

  get year() {
    return this[s_year];
  }
}

and to use the module vehicle.js

client.js

import {Vehicle} from './vehicle';
const vehicle1 = new Vehicle('Ford', 2015);
console.log(vehicle1.make); //Ford
console.log(vehicle1.year); // 2015

However, symbols although unique, are not actually private since they are exposed via reflection features like Object.getOwnPropertySymbols...

const vals = Object.getOwnPropertySymbols(vehicle1);
vehicle1[vals[0]] = 'Volkswagon';
vehicle1[vals[1]] = 2013;
console.log(vehicle1.make); // Volkswagon
console.log(vehicle1.year); // 2013

Please bear that in mind, although where obfuscation is enough, this approach might be considered.

Answer 2

Protected properties are possible in ES6 using a variation of the WeakMap method for private properties.

The basic technique is:

1. Store a private weak reference to instance protected data for each class.
2. Create the protected data in the super constructor.
3. Pass the protected data down from the super constructor to the subclass constructor.

Simple demonstration (aiming for clarity but not ideal functionality, see below for an improvement). This sets protected data in the parent class and accesses it in the child class. If no methods expose it nothing outside the classes can access it:

// Define parent class with protected data
const Parent = (()=>{

  const protData = new WeakMap();
  
  class Parent {
    constructor () {
      // Create and store protected data for instance
      protData.set(this,{
        prop: 'myProtectedProperty',
        meth () { return 'myProtectedMethod'; }
      });
      
      // If called as super pass down instance + protected data
      if(new.target!==Parent){
        this.prot = protData.get(this);
      }
    }
    
    setText (text) {
      const prot = protData.get(this);
      prot.text = text;
    }
    
    getText () {
      const prot = protData.get(this);
      return prot.text;
    }
  }
  
  return Parent; // Expose class definition

})();

// Define child class with protected data
const Child = (()=>{

  const protData = new WeakMap();
  
  class Child extends Parent {
    constructor (...args) {
      super(...args);
      protData.set(this,this.prot); // Store protected data for instance
      this.prot = undefined; // Remove protected data from public properties of instance
    }
    
    getTextChild () {
      const prot = protData.get(this);
      return prot.text;
    }
  }
  
  return Child; // Expose class definition

})();

// Access protected data
const child = new Child();
child.setText('mytext');
console.log(child.getText()); // 'mytext'
console.log(child.getTextChild()); // 'mytext'

There are a couple details here that could be improved:

1. This will not work for further subclasses. We clear the protected data in the first subclass so further constructors will not receive it.
2. The new instance has 'prot' in its keys. We cleared the property in the subclass constructor but it will still enumerate. It's tempting to use delete here but delete is very slow.

Solving for any number of subclasses is easy. Just leave the protected data in if we were called as super:

if(new.target!==Child)this.prot=undefined;

For the property remnant the solution I like is to create a brand new instance in the base class and use the bound this to pass the instance and protected data separately. Then you have a completely clean instance and no delete performance hits. There are some idioms you have to use in your constructors to make it work but it's fully possible.

Here's a final solution with those issues resolved:

// Protected members in ES6

// Define parent class with protected data
const Parent = (()=>{

  const protData = new WeakMap();
  
  let instanceNum = 0;
  
  class Parent {
  
    constructor (...args) {
      // New instance since we will be polluting _this_
      //   Created as instance of whichever class was constructed with _new_
      const inst = Object.create(this.constructor.prototype);
      // .. do normal construction here *on inst*
      
      // If called as super pass down instance + protected data
      if(new.target!==Parent){
        protData.set(inst,{  // Create and store protected data for instance
          instanceNum: ++instanceNum
        });
        this.inst=inst; // Pass instance
        this.prot=protData.get(inst); // Pass protected data
      }
      
      // If called directly return inst as construction result
      //   (or you could raise an error for an abstract class)
      else return inst;
    }
    
    sayInstanceNum () {
      const prot = protData.get(this);
      console.log('My instance number is: '+prot.instanceNum);
    }
  
    setInstanceNumParent (num) {
      const prot = protData.get(this);
      prot.instanceNum = num;
    }
  
  }
  
  return Parent; // Expose class definition

})();

// Define child class with protected data
const Child = (()=>{

  const protData = new WeakMap();
  
  class Child extends Parent {
  
    constructor (...args) {
      super(...args);
      protData.set(this.inst,this.prot); // Store protected data for instance
      
      // If called directly return inst as construction result,
      //   otherwise leave inst and prot for next subclass constructor
      if(new.target===Child)return this.inst;
    }
    
    celebrateInstanceNum () {
      const prot = protData.get(this);
      console.log('HONKYTONK! My instance number is '+prot.instanceNum+'! YEEHAWW!');
    }
    
    setInstanceNumChild (num) {
      const prot = protData.get(this);
      prot.instanceNum = num;
    }
  
  }
  
  return Child; // Expose class definition

})();

// Define grandchild class with protected data
const Grandchild = (()=>{

  const protData = new WeakMap();
  
  class Grandchild extends Child {
  
    constructor (...args) {
      super(...args);
      protData.set(this.inst,this.prot); // Store protected data for instance
      
      // If called directly return inst as construction result,
      //   otherwise leave inst and prot for next subclass constructor
      if(new.target===Grandchild)return this.inst;
    }
    
    adoreInstanceNum () {
      const prot = protData.get(this);
      console.log('Amazing. My instance number is '+prot.instanceNum+' .. so beautiful.');
    }
    
    setInstanceNumGrandchild (num) {
      const prot = protData.get(this);
      prot.instanceNum = num;
    }
  
  }
  
  return Grandchild; // Expose class definition

})();

// Create some instances to increment instance num
const child1 = new Child();
const child2 = new Child();
const child3 = new Child();
const grandchild = new Grandchild();

// Output our instance num from all classes
grandchild.sayInstanceNum();
grandchild.celebrateInstanceNum();
grandchild.adoreInstanceNum();

// Set instance num from parent and output again
grandchild.setInstanceNumParent(12);
grandchild.sayInstanceNum();
grandchild.celebrateInstanceNum();
grandchild.adoreInstanceNum();

// Set instance num from child and output again
grandchild.setInstanceNumChild(37);
grandchild.sayInstanceNum();
grandchild.celebrateInstanceNum();
grandchild.adoreInstanceNum();

// Set instance num from grandchild and output again
grandchild.setInstanceNumGrandchild(112);
grandchild.sayInstanceNum();
grandchild.celebrateInstanceNum();
grandchild.adoreInstanceNum();

Answer 3

Use # for private (eg #someProperty), use _ for protected (eg _someProperty), no prefix for public.

Answer 4

Your approach is pointless.

Symbols do not provide any security because they are public. You can get them so easily with Object.getOwnPropertySymbols.

So if you don't care about security and just want simplicity, use a normal _secret property.

class MyClass {
  constructor() {
    this.public = "This is public";
    this._secret = "This is private";
  }
}
module.exports = MyClass;

let MyClass = require("./my-class.js");
class MyChildClass extends MyClass {
  constructor() {
    super();
    this._childSecret = "This is also private";
    console.log(this._secret); // "this is private"
    console.log(this._childSecret); // "this is also private"
  }
}
module.exports = MyChildClass;