How do I access parent object from its function?

Question

So I'm trying something that seems tricky but can't get out of my mind.

I have an object like so:

var dummyObject = {
    src: 'Source code',
    fileExt: 'ejs',
}

And afterwards another function creates a copy of that object with a render() function, so essentially it would be:

{
    src: 'Source code',
    fileExt: 'ejs',
    render: function() {
        ...
    }
}

Let's say I define this copy of dummyObject to be one called copyObject. Is there any way to call copyObject.render() and have it access all of copyObject properties without passing it as an argument?

It's important to note that I won't be defining the function in the object declaration but rather defining and then assigning it programmatically, something like:

var copyObject = _clone(dummyObject)
copyObject.render = function() {...}

Thanks!

EDIT: Just in case my question is misinterpreted (I typed it when it was late and I was tired). dummyObject in this case should be ignored, since copyObject is a fresh new copy of it without any references. So basically I'm adding the method to copyObject and I need it to access itself. Like this:

function selectProcessor (obj) {
    var newObj = _clone(newObj)
    newObj.render = function () {
        console.log(this.src) // It doesn't make sense accessing this from here
    }
    return newObj
}

// At some point I execute this function
var copyObject = selectProcessor(dummyObject)

// Now I call its render function, and the behavior I want is to log its src property
copyObject.render()

```var copyObject = {x:1}; copyObject.render = function() {console.log(Reflect.ownKeys(this))}```you mean this? — xianshenglu, Apr 29 '18 at 04:18
Just use [`this` or `copyObject`](https://stackoverflow.com/questions/10711064/javascript-object-literal-reference-in-own-keys-function-instead-of-this) in the function body. Doesn't that work? — Bergi, Apr 29 '18 at 08:33
You're asking how to implement `render`, not how to implement `_clone`, right? — Bergi, Apr 29 '18 at 08:33
No, I have a _clone() function implemented. Also I have a set of predefined methods that then will be assigned to the object with a "render" key, either by direct assignment (copyObject.render = function () ) or by merging copyObject with an object with a single key which would be that function. The thing is that the source code is stored in copyObject and it's repetitive to call it like copyObject.render(copyObject). Maybe I'm just making everything more complicated than it should be. — Agustin Lleras, Apr 29 '18 at 13:45
@AgustinLleras The code in your edit does work, so I am unsure what you are asking for? Why do you think "*It doesn't make sense accessing this from here*"? — Bergi, Apr 29 '18 at 14:48
@Bergi Actually, when I execute that code and do console.log(this) I get the global object and not copyObject. It can't make sense of it because right there it does seem to be referring the global context. Thank you! — Agustin Lleras, Apr 29 '18 at 16:09
@AgustinLleras Not when you call the method with the syntax `copyObject.render()`. But just use `newObj` instead of `this`, see [here](https://stackoverflow.com/questions/10711064/javascript-object-literal-reference-in-own-keys-function-instead-of-this) — Bergi, Apr 29 '18 at 16:11

Sajib Khan · Answer 1 · 2018-04-29T08:47:31.483

0

You can use Object.create() method to create a new object and this new object can access dummyObject by prototype chain.

var copyObject = Object.create(dummyObject)
copyObject.render = function() {...}   // access render method of dummyObject

var dummyObject = {
  src: 'Source code',
  fileExt: 'ejs'
};

var copyObject = Object.create(dummyObject);

dummyObject.render = function() {
  console.log('render method of dummyObject');
}

copyObject.render();

See MDN

edited Apr 29 '18 at 08:47

answered Apr 29 '18 at 04:19

Sajib Khan

22,878
9
63
73

No, `__proto__` is not an own property. – Bergi Apr 29 '18 at 08:31
yes, I wanted to say that copyObject can get latest changes of dummyObject via `__proto__`. Because when any property is not available in an object it will go and find inside parent via _proto_ chain. Edited answer. – Sajib Khan Apr 29 '18 at 08:42
It's just called "prototype chain". The `__proto__` getter is deprecated, don't use it in explanations. – Bergi Apr 29 '18 at 08:44

score 0 · Answer 2 · answered Apr 29 '18 at 04:21

I cant tell if you have a typo in your post but if you don't, here's your answer. It almost seemed like you meant to say "access all of the original object properties" in which case no, not if they aren't on the prototype and you didn't create the object using Object.create(oldObj.prototype) etc

var obj = {
  a: true,
  b: 92
};

var changeIt = function ( o ) {
  return Object.assign({}, o, {
    render: function () {
      return this.b;
    }
  });
};

var newObj = changeIt(obj);

console.log(newObj.render()); // Prints 92 - value of obj.b and this.b

How do I access parent object from its function?

2 Answers2