如何在ES6或更高版本的子对象获取器中捕获父类“ this”？

Question

Here is a simple JavaScript code:

class Test {
  constructor(val) {
    this._value = val;
    this.child = {
      get value() { return this._value; },
      getValue: () => { return this._value; }
    };
  }
}

let o = new Test(1);
console.log(o.child.value);
console.log(o.child.getValue());

The output:

undefined
1

In the child object child , I want to make the getter get value() to produce the same value as the lambda getValue() , ie to capture the parent's this properly and produce 1 rather than undefined .

Is there an elegant way of doing it within the class ? Or should I use the lambda and give up on the getter?

I could probably do this:

    this.child = {
      parent: this, 
      get value() { return this.parent._value; },
    };

However I don't want to expose child.parent , only child.value .

Answer 1

Answering to myself, it can simply be done by capturing this inside constructor :

class Test {
  constructor(val) {
    const self = this;
    this._value = val;
    this.child = {
      get value() { return self._value; }
    };
  }
}

Answer 2

The value and child are defined in the constructor, and value should be private, and accessed only via child . You can set value as a normal variable in the closure, and access it via the child getter and setter:

 class Test { constructor(val) { let value = val; this.child = { get value() { return value; }, set value(v) { value = v; }, }; } } let o = new Test(1); console.log(o.child.value); o.child.value = 5; console.log(o.child.value); 

If you need the value inside Test , you can always access it via the child :

 class Test { constructor(val) { let value = val; this.child = { get value() { return value; }, set value(v) { value = v; }, }; } get value() { return this.child.value; } set value(v) { this.child.value = v; } } let o = new Test(1); console.log(o.value); o.value = 5; console.log(o.value);