Javascript 在对象文本内的函数内调用函数

所以我正在做一个在线视频教程。在那个教程中，他使用iLife创建mvc模型，而不是对象文本

我决定使用对象文本重新创建项目

这就是我现在面临的问题，我不确定问题是什么。我怀疑这与范围界定问题有关

这是控制器的代码，最后我启动init（）

现在，当我按下enter键调用事件时，我从控制台得到一个错误。它说：

“未捕获的TypeError:this.addItem不是HTMLDocument的函数。[匿名]”

问题： 为什么它不能识别addItem（）

当我尝试调用此.updateMethod（）时，addItem（）中也会出现相同的错误消息

我发现在事件侦听器中调用此.addItem（）的一种方法是使用（）=>而不是使用常规的匿名函数声明

document.addEventListener("keypress", (ev) => {
   if(ev.keyCode === 13){
      this.addItem();
   {
});

---

在JavaScript中，

this

的值由函数的调用方式决定。在您的示例中，

此

引用绑定事件的元素

有几种方法

使用

使用

将此

保持在变量中

使用

函数#bind

使用箭头功能：

使用变量保持此上下文

---

在JavaScript中，

this

的值由函数的调用方式决定。在您的示例中，

此

引用绑定事件的元素

有几种方法

使用

使用

将此

保持在变量中

使用

函数#bind

使用箭头功能：

使用变量保持此上下文

问题：为什么它不识别addItem（）

我发现在事件侦听器中调用此.addItem（）的一种方法是使用（）=>而不是使用常规的匿名函数声明

document.addEventListener("keypress", (ev) => {
   if(ev.keyCode === 13){
      this.addItem();
   {
});

因为在传统函数语法中，

this

的值是由调用方绑定的，因此它成为绑定元素。虽然箭头函数不绑定自己的

this

值，但它将使用

setEventHandler

方法中的

this

，该方法将作为对

控制器的引用

请注意，
init
调用
setupEventHandler
，但它应该是
setEventHandler

问题：为什么它不识别addItem（）


我发现在事件侦听器中调用此.addItem（）的一种方法是使用（）=>而不是使用常规的匿名函数声明

document.addEventListener("keypress", (ev) => {
   if(ev.keyCode === 13){
      this.addItem();
   {
});

因为在传统函数语法中，
this
的值是由调用方绑定的，因此它成为绑定元素。虽然箭头函数不绑定自己的
this
值，但它将使用
setEventHandler
方法中的
this
，该方法将作为对
控制器的引用

请注意，
init
调用
setupEventHandler
，但它应该是
setEventHandler
，有更多的方法：引用
控制器
，而不是
此
；使用箭头函数。@NaïmFavier-我正在编辑，先生：）谢谢……这真的只是javascript标记@charlietfl中链接最紧密的三个问题之一的复制品-耶！你说得对……费利克斯的回答也更详细。这就是为什么他创建了它作为一个规范的答案有更多的方法：参考
控制器
，而不是
这个
；使用箭头函数。@NaïmFavier-我正在编辑，先生：）谢谢……这真的只是javascript标记@charlietfl中链接最紧密的三个问题之一的复制品-耶！你说得对……费利克斯的回答也更详细。这就是为什么他创造了一个规范的答案
var model = {};
var view = {};
var controller = {
  dom: view.getDom(),
  setEventHandler: function() {
    document.addEventListener("keypress", (ev) => {
      if (ev.keyCode === 13) {
        this.addItem();
      }
    });
  },
  addItem: function() {
    this.updateMethod();
    // Code
  },
  init: function() {
    this.setupEventHandler();
  },
  updateMethod: function() {
    // Some code
  }
};
controller.init();

var model = {};
var view = {};
var controller = {
  dom: view.getDom(),
  setEventHandler: function() {
    var _this = this;
    document.addEventListener("keypress", function(ev) {
      if (ev.keyCode === 13) {
        _this.addItem();
      }
    });
  },
  addItem: function() {
    this.updateMethod();
    // Code
  },
  init: function() {
    this.setupEventHandler();
  },
  updateMethod: function() {
    // Some code
  }
};
controller.init();