ECMAScript 6 Class Properties Prefix Underline

Question

The class templates I saw around are very similar to the following:

class Foo { constructor(x, y, z) { this._x = x; this._y = y; this._z = z; } get x() { return this._x; } set x(value) { //I acctually do some stuff here this._x = value; } get y() { return this._y; } set y(value) { //I acctually do some stuff here this._y = value; } get z() { return this._z; } set z(value) { //I acctually do some stuff here this._z = value; } } 

console.log(new Foo('x', 'y', 'z')) execution output:

 Foo { _x: 'x', _y: 'y', _z: 'z' } 

console.log(JSON.stringify(new Foo('x', 'y', 'z'))) execution output:

 {"_x":"x","_y":"y","_z":"z"} 

Which gives me underscore of fields with a prefix, and I didn’t strive for this, how can I get fields that do not have an underscore prefix, and yet, with the help of getter and seters caused by instance.prop interaction.

Answer 1

You can add toJSON method to configure JSON.stringify output

 class Foo { constructor(x, y, z) { this._x = x; this._y = y; this._z = z; } get x() { return this._x; } set x(value) { this._x = value; } get y() { return this._y; } set y(value) { this._y = value; } get z() { return this._z; } set z(value) { this._z = value; } toJSON() { return { x: this._x, y: this._y, z: this._z }; } } var foo = new Foo('x', 'y', 'z'); console.log(JSON.stringify(foo)); 

outputs: "{"x":"x","y":"y","z":"z"}"

Answer 2

If your problem is really just an underscore, you can try using a naming convention more similar to C # properties, where the get / set methods use PascalCase, but the member variables use camelCase, for example:

 class Foo { constructor(x, y, z) { this.x = x; this.y = y; this.z = z; } get X() { return this.x; } set X(value) { this.x = value; } get Y() { return this.y; } set Y(value) { this.y = value; } get Z() { return this.z; } set Z(value) { this.z = value; } } 

Ultimately, because of how objects work in ECMAScript 6, there is no way to have both a member variable and get / set methods named 100% the same. In fact, therefore, the use of the underscore format is so common. The underscore tells someone who is looking at code that should have the "private" property. In ECMAScript 6, the concept of private members does not really exist.

Answer 3

If you want to skip underscore properties, define them as non-enumerable:

 class Foo { constructor(x, y, z) { this._x = x; this._y = y; this._z = z; Object.defineProperties(this, { _x: {enumerable: false}, _y: {enumerable: false}, _z: {enumerable: false} }); } get x() { return this._x; } set x(value) { this._x = value; } get y() { return this._y; } set y(value) { this._y = value; } get z() { return this._z; } set z(value) { this._z = value; } } console.log(JSON.stringify(new Foo('x', 'y', 'z'))) 

You can also consider characters instead of underlined properties:

 class Foo { constructor(x, y, z) { this[Foo.x] = x; this[Foo.y] = y; this[Foo.z] = z; } get x() { return this[Foo.x]; } set x(value) { this[Foo.x] = value; } get y() { return this[Foo.y]; } set y(value) { this[Foo.y] = value; } get z() { return this[Foo.z]; } set z(value) { this[Foo.z] = value; } } Foo.x = Symbol('x'); Foo.y = Symbol('y'); Foo.z = Symbol('z'); console.log(JSON.stringify(new Foo('x', 'y', 'z'))) 

Answer 4

As you said, you wanted to avoid using toJSON in every class (but I also think that using toJSON is the “right” thing).

Javascript allows you to do strange things, but at least you can manage it in a closed function area.

I think the regex can be refined, but I just wanted to show this idea, but not really, but should work.

 class Foo { constructor(x, y, z) { this._x = x; this._y = y; this._z = z; } get x() { return this._x; } set x(value) { //I acctually do some stuff here this._x = value; } get y() { return this._y; } set y(value) { //I acctually do some stuff here this._y = value; } get z() { return this._z; } set z(value) { //I acctually do some stuff here this._z = value; } } var originalJSON = JSON; var foo = new Foo('x', 'y', 'z'); (function () { var JSON = { stringify: function (obj) { var json = originalJSON.stringify(obj); return json.replace(/"_+(\w+)":/g, '"$1":'); }, parse: function(str) { return originalJSON.parse(str.replace(/"(\w+)":/g, '"_$1":')); } }; console.log('Weird hack'); var r = JSON.stringify(foo); console.log('stringify'); console.log(r); console.log('parse'); console.log(JSON.parse(r)); }).call(); console.log('\nBack to normal'); var r = JSON.stringify(foo); console.log('stringify'); console.log(r); console.log('parse'); console.log(JSON.parse(r)); 

Output:

 Weird hack stringify {"x":"x","y":"y","z":"z"} parse { _x: 'x', _y: 'y', _z: 'z' } Back to normal stringify {"_x":"x","_y":"y","_z":"z"} parse { _x: 'x', _y: 'y', _z: 'z' }