如何访问嵌套对象中的父对象

Question

I'm looking for a way to get access to parent object when I use nested objects, I have a complex situation so I can't offer a real example here.

I wrote a very simple example instead, here's what I do:

1. I get a JavaScript object by queryselector().
2. Then I add my own property named get to it which is an object itself.
3. I want to get access to parent JavaScript object when the nested object is called, I mean elem in elem.get.text() the time when execution reaches inside text() function:

 //***** Initialization: var get = { text: function(){ //Here I want to know what was the elem return elem.textContent; }, foo: function(){}, bar:{ text: function(){ //And also here which is one level deeper return elem.textContent; } } }; var elem = document.querySelector("#elem"); elem.get = Object.create(get); //***** function getText(e){ var elem = e.target; alert(elem.get.text()); } 

 <input type="button" id="elem" onclick="getText(event)" value="Get Text"/> 

I emphasis again that it's merely a simple example so don't criticize that I could get the text of input through a much easier way.

In fact I want to know how to get access to a when it reaches to b in ab() without using a global variable.

Answer 1

You could save the reference to elem when creating new get instance using Object.create .

 //***** Initialization: var get = { text: function() { //Here I want to know what was the elem return this.elem.value; // use this.elem to access element }, foo: function() {}, bar: function() {} }; var elem = document.querySelector("#elem"); elem.get = Object.create(get, { elem: { // keep current element ref value: elem } }); //***** function getText(e) { var elem = e.target; console.log(elem.get.text()); } 

 <input type="button" id="elem" onclick="getText(event)" value="Get Text" /> 

Also I've update text to use value instead of textContent for demo purposes because input has no text content.