This question already has answers here:
Private properties in JavaScript ES6 classes
(41 answers)
Closed 4 years ago.
I am trying to have a private property inside my class. I have a class called Person and an instance of that class: person declared with let person = new Person('name1').
I would like to save the name in person's properties. I could simply do:
class Person {
constructor(name) {
this.name = name;
}
}
But I also want to perform some actions when changing this value, so I use a Setter:
class Person {
set name() {
// some actions
}
constructor(name) { }
}
But then how do I save the name? I would have to have another property for example _name that would be used to save the actual value
class Person {
set name(newName) {
// some actions
return this._name;
}
set name(newName) {
this._name = name;
// some actions
}
constructor(name) {
this._name = name;
}
}
The problem is that _name can be accessed outside with person._name.
Is there a way to make it not accessible from outside?
I took inspiration from this answer (which doesn't use a getter and setter) and tried to enclose _name when defining the getter and setter. The following code doesn't work:
class Person {
constructor(name) {
var _name = name;
Object.defineProperties(this, {
"name": {
"get": () => { return _name; },
"set": () => { _name = name; }
}
});
}
}
"set": () => { _name = name; }
You just have a small mistake here. Should be:
"set": (newName) => { _name = newName; }
Related
I am trying declare a private class variable for a super class and I seem to have trouble doing so. I there something I am missing? This is my code so far.
class Animal {
constructor(_name) {
this._name = _name;
}
name() {
console.log(`${this._name} is my name.`);
}
}
new Animal('Bob').name();
Private fields start with # but their scope will keep them hidden from subclasses.
class Animal {
#name
constructor(name) {
this.#name = name;
}
}
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_class_fields
Private class features are available in the following browsers:
Chrome
Edge
FireFox
Opera
Safari
74+
79+
90+
62+
14.1+
Here is an example of your class with a private instance field called name:
class Animal {
#name;
constructor(name) {
this.#name = name;
}
get name() {
return this.#name;
}
toString() {
return `${this.#name} is my name.`;
}
}
const bob = new Animal('Bob');
console.log(bob.name);
console.log(bob.toString());
// console.log(bob.#name); <-- SyntaxError
Is the following a valid strategy for implementing the composition pattern in Javascript? I want to use classes instead of constructor functions or plain objects, and I know that Mixins are not best practice. One concern is that in this approach, the methods added to Person objects are not attached to the prototype and therefore each require memory allocation. Thanks!
class Person {
name;
constructor(name) {
this.name = name;
}
}
function fly() {
return {
fly() {
console.log(`${this.name} can fly!`);
},
};
}
function swim() {
return {
swim() {
console.log(`${this.name} can swim!`);
},
};
}
function makeFlyingPerson(name) {
return Object.assign(new Person(name), fly());
}
function makeSwimmingPerson(name) {
return Object.assign(new Person(name), swim());
}
...the methods added to Person objects are not attached to the prototype and therefore each require memory allocation
True, but it's a trivial amount, the cost of one property per method per object (to hold the function reference for the method). Properties aren't nothing, but they aren't large. For the avoidance of doubt: The function object is reused by all instances, not copied.
There's no reason for fly and swim to be functions, though (at least, none that's apparent from the question), just use the objects directly:
class Person {
name;
constructor(name) {
this.name = name;
}
}
const flyMethods = {
fly() {
console.log(`${this.name} can fly!`);
},
};
const swimMethods = {
swim() {
console.log(`${this.name} can swim!`);
},
};
function makeFlyingPerson(name) {
return Object.assign(new Person(name), flyMethods);
}
function makeSwimmingPerson(name) {
return Object.assign(new Person(name), swimMethods);
}
Note that this is still using mixins, though (both your original and the above).
Unless you're going to reuse fly/flyMethods and swim/swimMethods with other classes than Person, though, using extends would seem simpler and would give you prototypical method reuse:
class FlyingPerson extends Person {
fly() {
// ...
}
}
If you are reusing fly/flyMethods, etc., with multiple classes, another option is to have factory-building functions that create a prototype from the various sets of methods and then reuse it:
class Person {
name;
constructor(name) {
this.name = name;
}
}
const flyMethods = {
fly() {
console.log(`${this.name} can fly!`);
},
};
const swimMethods = {
swim() {
console.log(`${this.name} can swim!`);
},
};
function extendWith(cls, name, ...mixins) {
// We use the wrapper object so that the class constructor's name is assigned from `name`
const obj = {
[name]: class extends cls {
}
};
Object.assign(obj[name].prototype, ...mixins);
return obj[name];
}
const FlyingPerson = extendWith(Person, "FlyingPerson", flyMethods);
const SwimmingPerson = extendWith(Person, "SwimmingPerson", swimMethods);
const FlyingSwimmingPerson = extendWith(Person, "FlyingSwimmingPerson", flyMethods, swimMethods);
const joe = new FlyingSwimmingPerson("Joe");
joe.fly();
joe.swim();
class Animal {
name;
type;
constructor(name, type) {
this.name = name;
this.type = type;
}
}
const FlyingSwimmingAnimal = extendWith(Animal, "FlyingSwimmingAnimal", flyMethods, swimMethods);
console.log(FlyingSwimmingAnimal.name); // FlyingSwimmingAnimal
const splippery = new FlyingSwimmingAnimal("Slippery");
splippery.fly();
splippery.swim();
I have a large code base where some class members are set twice - once as a method, and the other explicitly in the constructor.
Here is a an example of what this might look like:
class SuperHero {
public name: string;
constructor(name: string) {
this.name = name;
// This line is a problem.
this.hasCape = () => {
return this.name === 'Batman';
};
}
// I want this to be the canonical implementation.
public hasCape() {
return this.name === 'Batman' || this.name === 'Wonder Woman';
}
}
It looks like public readonly hasCape() is invalid syntax.
Is there a way to enforce the method declaration as canonical at the compiler or linter level?
Inspired by the comment from Aaron Beall. This makes hasCape a property, that's a function, that's readonly. The typescript compiler then throws an error when assigning it from the constructor.
public get hasCape() {
return () => this.name === 'Batman' || this.name === 'Wonder Woman';
}
I am learning JS and have came across an interesting article about object composition pattern in JS. What I am wondering in this code:
let Magic = (superclass) => class extends superclass {
shout() {
if (super.shout) super.shout();
console.log('Power and wisdom.');
}
};
let Fighting = (superclass) => class extends superclass {
shout() {
if (super.shout) super.shout();
console.log('Strength an courage.');
}
};
class Creature {
constructor(name) {
this.name = name;
}
shout() {
console.log(`I'm ${this.name}! Oorah!!`);
}
};
class DwarfWizard extends Fighting(Magic(Creature)) {
courseObjects(object = {}) {
object.curse = true;
return object;
}
}
new DwarfWizard('Thordalf').shout();
// "I'm Thordalf! Oorah!! Power and wisdom. Strength an courage."
What is the purpose of the function courseObjects in the DwarfWizard class?
courseObjects(object = {}) {
object.curse = true;
return object;
}
I still get the same result even when I comment out the function, so I am wondering what is it's purpose?
Here is my way I usually use to prevent to override name property.
let _name = Symbol('name');
class Cat {
constructor(name) {
this[_name] = name;
}
set name(newName) {
return this[_name];
}
get name() {
return this[_name];
}
}
// default name
let cat = new Cat('Hermione');
// new name
cat.name = 'Voldermort';
// testing
console.log(cat.name);
My idea: Saving the value of name property to another variable.
But if I have multiple class properties, like this:
that would be wasting to create a lot of variables for saving.
let _Min = Symbol('Min'), _Max = Symbol('Max'); // and so on
Is there another way to achieve this goal? Thank you!
In order to be read-only, the property should have no set accessor:
class Foo {
get bar() {
return 'bar';
}
}
If the property is supposed to be defined on construction, the descriptor can be defined too:
class Cat {
constructor(name) {
Object.defineProperty(this, name, {
get: () => name,
configurable: true
});
}
}
Or
class Cat {
constructor(name) {
Object.defineProperty(this, name, {
value: name,
writable: false,
configurable: true
});
}
}
Try following examples, which may solve your problem
Example 1:
class A {
a = () => {
console.log('A#a');
}
}
class B extends A {
// this will throw error as
// Class 'A' defines instance member property 'a', but extended class 'B'
// defines it as instance member function.
a() {
console.log('B#a')
}
}
new B().a()
/**
Error: Class 'A' defines instance member property 'a', but extended class 'B'
defines it as instance member function.
*/
Example 2:
class Renderer {
constructor(args) {
Object.defineProperty(this, 'render', {
writable: false,
configurable: true,
value: () {
return this.childRender();
}
});
}
childRender() {
throw Error('render() is already instance of Renderer. Did you mean? childRender()');
}
// do not define methodName() here
}
class Draw extends Renderer {
render() {
console.log('DrawB#render');
}
}
new Draw().render()
/**
VM1597:13 Uncaught Error: render() is already instance of Renderer. Did you mean? childRender()
at Drawee.childRender (<anonymous>:13:11)
at Drawee.value (<anonymous>:7:22)
at <anonymous>:25:14
*/
I hope this helps 🙂