Eine Funktion innerhalb einer Funktion in einem Objektliteral aufrufen

Question

Also mache ich ein Tutorial zu einem der Videos, die ich online gefunden habe. In diesem Tutorial verwendete er IIFE, um mvc-Modell anstelle von Objektliteralen zu erstellen.

ich beschlossen, das Projekt mit Objektliterale

Das ist das Problem, das ich jetzt mit bin neu und ich bin nicht sicher, was das Problem ist. Ich vermute, es hat etwas zu tun mit Scoping-Problem.

Dies ist der Code für den Controller und am Ende initiiere ich die 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(); 

Wenn ich jetzt die Enter-Taste drücken um das Ereignis aufzurufen, erhalte ich einen Fehler von der Konsole. Darin heißt es:

"Uncaught Typeerror: this.addItem keine Funktion bei Htmldocument ist [unbekannt]."

Frage: Warum ist es nicht die addItem erkennen()?

Die gleiche Fehlermeldung tritt innerhalb von AddItem() auf, wenn ich versuche, this.updateMethod() auch aufzurufen.

Eine Möglichkeit, wie ich this.addItem() im Ereignis-Listener aufrufen kann, ist die Verwendung von () =>, anstatt eine normale anonyme Funktionsdeklaration zu verwenden.

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

Answer 1

In JavaScript wird der Wert von this dadurch bestimmt, wie Funktion aufgerufen wird. In Ihrem Beispiel bezieht sich this auf ein Element, an das ein Ereignis gebunden ist.

Es gibt nur wenige Möglichkeiten,

1. Function#bind Mit
2. Mit Arrow Function
3. this Keeping in variable

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

Answer 2

Question: Why is it not recognizing the addItem()?

...

One way I found to have this.addItem() to get invoked in the event listener is by using() => rather than using a regular anonymous function declaration.

Da mit herkömmlicher Funktionssyntax, wird der Wert von this vom Anrufer gebunden ist, so wird es das gebundene Element. Während eine Pfeilfunktion ihren eigenen this Wert nicht bindet, wird sie die this aus der setEventHandler Methode verwenden, die eine Referenz auf controller sein wird.

Beachten Sie, dass initsetupEventHandler ruft aber es sollte setEventHandler sein.