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

Question

我正在寻找一种在使用嵌套对象时访问父对象的方法，我的情况很复杂，所以我无法在这里提供真实的示例。

我写了一个非常简单的例子，这就是我所做的:

1. 我通过 queryselector() 获取了一个 JavaScript 对象。
2. 然后我向其中添加我自己的名为 get 的属性，该属性本身就是一个对象。
3. 我想在调用嵌套对象时访问父 JavaScript 对象，我的意思是 elem.get.text() 中的 elem 执行到达内部的时间text() 函数:

//***** 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"/>

我再次强调，这只是一个简单的例子，所以不要批评我可以通过更简单的方式获取输入文本。

事实上，我想知道当 a 到达 a.b() 中的 b 时，如何在不使用全局变量的情况下访问 a .

Answer 1

使用 Object.create 创建新的 get 实例时，您可以保存对 elem 的引用。

//***** 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" />

此外，出于演示目的，我还更新了 text 以使用 value 而不是 textContent，因为 input 没有文本内容。