如何从父对象构造函数访问对象

Question

我可以在子对象 (Todo) 的原型中访问父对象 (TodoList) 的列表对象吗

假设下一个设置：

index.js：

var todoList = new TodoList(form,holder);

tod​​olist.js：

function TodoList(form,holder){
  this.list = {};
  this.inputField = document.querySelector('input');
  this.submitButton = document.querySelector('button');
  this.todoHolder = holder;
  this.init();
}

TodoList.prototype.init = function(){
  this.submitButton.addEventListener('click',this.submitHandler.bind(this));
}

TodoList.prototype.submitHandler = function(e){
  var todo = new Todo(this.inputField.value, this.todoHolder);
}

tod​​o.js：

function Todo(value, holder){
  this.id = nr++;
  this.value = value;
  this.checked = false;
  this.holder = holder;
  this.todoElement = "";
  this.template = `
    <li id="todo-{{id}}">
      <span>{{value}}</span>
      <a href="#" class="delete"></a>
      <a href="#" class="check"></a>
    </li>`;
  this.add(this.value);
}

Todo.prototype.add = function(value){
  //addToDom
  var html = this.template;
  this.holder.insertAdjacentHTML('beforeend', html.replace('{{value}}',value).replace('{{id}}',this.id));
  this.setUpEventListeners();
  ////// QUESTION
  // HOW CAN I ACCESS THE TODOLIST.LIST object here
  // I KNOW I COULD DO todoList.list (but that is by the instance that was created. Is it possible by accessing parent or something like that....      
}

Answer 1

创建 TODO 的父对象应该添加一个引用，如下所示：

TodoList.prototype.submitHandler = function(e){
  var todo = new Todo(this.inputField.value, this.todoHolder);
  todo.parent = this
}

现在这在您当前的设置中不起作用，因为您的 add 方法在 todo.parent 设置之前的构造函数中被调用。

所以要解决这个问题，你应该在 Todo 的 init 中传递它

TodoList.prototype.submitHandler = function(e){
  var todo = new Todo(this, this.inputField.value, this.todoHolder);
}

这意味着这将是：

function Todo(parent, value, holder){
  this.parent = parent 
  // rest of logic...
}

Todo.prototype.add = function(value){
  console.log(this.parent)
}