javascript - 在对象字面量内的函数内调用函数

Question

这个问题已经有答案了:

How does the "this" keyword work, and when should it be used? (22 个回答)

How to access the correct `this` inside a callback (15 个回答)

已关闭 5 年前。

所以我正在根据我在网上找到的一个视频制作一个教程。在该教程中，他使用 IIFE 创建 mvc 模型，而不是对象文字。

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

这是我现在遇到的问题，我不确定问题是什么。我怀疑这与范围问题有关。

这是 Controller 的代码，最后我启动 init()。

var model ={ //Code }
var view = {//Code}

var controller = {
    dom: view.getDom(),
    setEventHandler: function(){
       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();

现在，当我按 Enter 键调用该事件时，我从控制台收到错误。它指出:

“未捕获类型错误:this.addItem 不是 HTMLDocument 中的函数。[匿名]”

问题:为什么它无法识别 addItem()？

当我尝试调用 this.updateMethod() 时，addItem() 中也会出现相同的错误消息。

我发现在事件监听器中调用 this.addItem() 的一种方法是使用 () => 而不是使用常规的匿名函数声明。

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

Answer 1

在 JavaScript 中，this 的值由函数的调用方式决定。在您的示例中，this 指的是绑定(bind)事件的元素。

有几种方法，

1. 使用 Function#bind
2. 使用 Arrow Function
3. 将this保存在变量中

Using Function#bind

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

Using Arrow Function:

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();

Using variable holding this context

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();