Deeply self reference an object's properties

Question

Is it possible to deeply self reference within a JS object?

I know it is possible to self reference at the same level, like so:

var foo = {
  a: 'bar',
  b: 'baz',
  c: () => {
    return this.a + this.b;
  }
};
console.log(foo.c()); // barbaz

I'm just curious if it would be possible to do so from deeper down...

var foo = {
  a: 'bar',
  b: 'baz',
  c: {
    ca: 'hello',
    cb: () => {
          return this.a + this.b;
        }
    }
};
console.log(foo.c.cb()); // barbaz

If not... How would one go about getting this to work?

`console.log(foo.c())` will *not* produce `barbaz` because you're attempting to use an arrow function in a [self-reference of an array initialiser](https://stackoverflow.com/questions/4616202/self-references-in-object-literals-initializers) — VLAZ, Dec 19 '19 at 14:53
use `c: function(){return this.a + this.b;}` instead as arrow function will return NaN — Krzysztof Krzeszewski, Dec 19 '19 at 14:54
@KrzysztofKrzeszewski That will not work, but it is indeed a helpful tip. — Mr. Polywhirl, Dec 19 '19 at 14:56
i'm just referring to the fact that the first code sample will not log what you think — Krzysztof Krzeszewski, Dec 19 '19 at 14:56

Nenad Vracar · Answer 1 · 2019-12-19T15:02:16.257

One solution is to call your cb method with foo object as a context then this will refer to foo and a and b will be found, but then you should use regular function instead of arrow function.

var foo = {
  a: 'bar',
  b: 'baz',
  c: {
    ca: 'hello',
    cb: function() {
      return this.a + this.b;
    }
  }
};

console.log(foo.c.cb.call(foo));

Another solution is to turn c into getter and then you can use arrow functions as context will be context of the getter which is root object in this case.

var foo = {
  a: 'bar',
  b: 'baz',
  get c() {
    return {
      ca: 'hello',
      cb: () => {
        return this.a + this.b;
      }
    }
  }
};

console.log(foo.c.cb());

alternatively you can just reference foo direct instead of relying on `this` like `return foo.a + foo.b;` — Rikin, Dec 19 '19 at 14:57

Mr. Polywhirl · Answer 2 · 2019-12-19T15:00:47.477

0

You would have to create a function that returns a referenced "self".

You can apply the new properties to this by referencing the scope at the top level.

let foo = createFoo();
let bar = Object.assign(createFoo(), {
  a : 'zam',
  b : 'zip'
});

console.log(foo.c.cb()); // barbaz
console.log(bar.c.cb()); // zamzip (extended foo)

function createFoo() {
  let self = {}; // Create a new scope.
  return Object.assign(self, {
    a: 'bar',
    b: 'baz',
    c: {
      ca: 'hello',
      cb: () => self.a + self.b
    }
  });
}

edited Dec 19 '19 at 15:00

answered Dec 19 '19 at 14:55

Mr. Polywhirl

42,981
12
84
132

@Caramiriel no, `this` === `window` in loose mode. In strict mode, this code will just fail to run with a TypeError, since `this` will be `undefined`. – VLAZ Dec 19 '19 at 14:59
@Caramiriel Updated, clarified mutation. – Mr. Polywhirl Dec 19 '19 at 15:01
@VLAZ I addressed this issue. – Mr. Polywhirl Dec 19 '19 at 15:01

Deeply self reference an object's properties

2 Answers2

Linked