Javascript 使用Object.create（）时，如何使用其他对象键引用对象键

我试图通过制作一个人工计算器模块来学习Object.create。我尝试了

bind

我尝试了删除

此

，但没有结果

问题：

<div id="calc">
  <button class="btns" value="1">1</button>
  <button class="btns" value="2">2</button>
</div>

如何在元素的另一个属性中引用对象的属性，就像在类中一样。或者我的示例不是一个很好的模式？如果是这样，我应该如何构造计算器对象，以便在

创建时提供事件侦听器

Calculator.js

const Calculator = {
  inputArr: [],
  init: (selector)=> {
    const el = document.querySelector(selector);
    el.addEventListener('click', this.pushValue); // this wont work.
    return this;
  },
  pushValue: (e) => {
    let val = e.target.value;
    if(val){
      this.inputArr.push(val);
      console.log(e.target, this.inputArr); // this wouldn't work.
    }
  }
};

const adder = Object.create(Calculator).init('#calc');

HTML:

<div id="calc">
  <button class="btns" value="1">1</button>
  <button class="btns" value="2">2</button>
</div>


1.
2.
该代码中的问题是您使用了箭头函数，但关闭了错误的
此
。箭头函数在定义它们的
这个
上关闭，而不是在调用它们时设置它。在您的例子中，它在全局范围内结束了
此

如果您使用
init
和
pushValue
普通函数，并通过对通过
object.create创建的对象的引用调用它们，则将使用正确的
this
调用它们：

const Calculator = {
  inputArr: [],
  init: function(selector) {                                 // ****
    const el = document.querySelector(selector);
    el.addEventListener('click', this.pushValue.bind(this)); // ****
    return this;
  },
  pushValue: function(e) {                                   // ****
    let val = e.target.value;
    if(val){
      this.inputArr.push(val);
      console.log(e.target, this.inputArr);
    }
  }
};

const adder = Object.create(Calculator).init('#calc');

您确实需要从事件侦听器
bind
调用
pushValue
（否则，
此
将引用元素）。或者，用箭头将其包裹起来：

el.addEventListener('click', e => this.pushValue(e));

使用
this.pushValue
上的箭头包装器的工作示例：


const计算器={
inputArr:[]，
init:函数（选择器）{//****
const el=document.querySelector（选择器）；
el.addEventListener（'click'，e=>this.pushValue（e））；//****
归还这个；
},
pushValue:函数（e）{//****
设val=e.target.value；
if（val）{
这个.inputArr.push（val）；
log（e.target，this.inputArr）；
}
}
};
常量加法器=Object.create（Calculator.init（'#calc'）

1.
2.
该代码中的问题是您使用了箭头函数，但关闭了错误的
此
。箭头函数在定义它们的
这个
上关闭，而不是在调用它们时设置它。在您的例子中，它在全局范围内结束了
此

如果您使用
init
和
pushValue
普通函数，并通过对通过
object.create创建的对象的引用调用它们，则将使用正确的
this
调用它们：

const Calculator = {
  inputArr: [],
  init: function(selector) {                                 // ****
    const el = document.querySelector(selector);
    el.addEventListener('click', this.pushValue.bind(this)); // ****
    return this;
  },
  pushValue: function(e) {                                   // ****
    let val = e.target.value;
    if(val){
      this.inputArr.push(val);
      console.log(e.target, this.inputArr);
    }
  }
};

const adder = Object.create(Calculator).init('#calc');

您确实需要从事件侦听器
bind
调用
pushValue
（否则，
此
将引用元素）。或者，用箭头将其包裹起来：

el.addEventListener('click', e => this.pushValue(e));

使用
this.pushValue
上的箭头包装器的工作示例：


const计算器={
inputArr:[]，
init:函数（选择器）{//****
const el=document.querySelector（选择器）；
el.addEventListener（'click'，e=>this.pushValue（e））；//****
归还这个；
},
pushValue:函数（e）{//****
设val=e.target.value；
if（val）{
这个.inputArr.push（val）；
log（e.target，this.inputArr）；
}
}
};
常量加法器=Object.create（Calculator.init（'#calc'）

1.
2.
啊，这么简单。该死的肥箭，啊，这么简单。该死的肥箭。