Aufruf der Elternfunktion innerhalb des Klickereignisses

Question

Ich habe versucht, eine Anwendung in JavaScript zu erstellen, die einfach ein Objekt erstellt und löscht, aber ich versuche, es mit Klassen zu implementieren. Der Code sieht wie folgt aus:

Meine erste Datei:

class GeneralObject { 
 

 
    constructor(elementName) { 
 
     this.domElement = elementName; 
 
    } 
 
    
 
    createObject() { 
 
     $(document.createElement('span')) 
 
     .html(this.domElement) 
 
     .appendTo($('#someOtherElement')); 
 
    } 
 
    
 
    deleteObject() { 
 
     this.domElement.remove(); 
 
    } 
 
}

Meine zweite Datei:

class SpecificObject extends GeneralObject { 
 
    
 
    create() { 
 
    
 
    // call the creator from parent class 
 
    super.createObject(); 
 
    
 
    // create a div 
 
    // i know the div has no expansion 
 
    $(document.createElement('div')) 
 
     .click(function() { 
 
     
 
     // trying to call the parent function remove 
 
     // here comes the error 
 
     super.removeObject(); 
 
     }) 
 
     .appendTo($("#someOtherElement")); 
 
    }

Mein Ziel ist es, das Objekt, das ich erstellt habe, mit der Klick-Funktion zu löschen, aber ich kann in dieser Instanz nicht auf die Elternfunktion zugreifen. Ich bekomme diesen Fehler:

'super' keyword unexpected here

Ich hoffe, Sie können mir sagen, wie ich meine Elternfunktion in dieser Klickfunktion aufrufen. Ich freue mich auch auf einen Kommentar zu dieser Implementierung über das Schlüsselwort "class", weil ich überall nur Klassenkonstrukte mit "Prototyp" sehe. Was ist der "richtige/bessere" Weg?

Vielen Dank für das Lesen dieser Post

Answer 1

super nur in Instanzmethoden zur Verfügung. Ihre innere anonyme Funktion ist keine Instanzmethode, daher hat sie keinen Zugriff darauf.

Da Sie jedoch Vererbung verwenden, ist die Funktion von this zugänglich. Daher können Sie die Lösung von this answer anwenden, um innerhalb einer inneren Funktion auf this zuzugreifen.

create() { 
    var self = this; // get a reference to `this` 

    super.createObject(); 

    $(document.createElement('div')) 
    .click(function() { 
     self.removeObject(); // `self` is `this` which inherits from `super` 
    }) 
    .appendTo($("#someOtherElement")); 
} 

Da Sie nur eine einzige Funktion innerhalb dieser click Funktion ausführen, können Sie alternativ die Funktionsreferenz als Parameter übergeben:

$(document.createElement('div')) 
    .click(super.removeObject) 
    .appendTo($("#someOtherElement")); 

Answer 2

Ich glaube, Sie so etwas wie diese verwenden soll. Das wird gut funktionieren.

class SpecificObject extends GeneralObject { 

    create() { 

    // call the creator from parent class 
    super.createObject(); 

    // create a div 
    // i know the div has no expansion 

    } 

    } 
    $(document.createElement('div')) 
     .click(function() { 

     // trying to call the parent function remove 
     // here comes the error 
     SpecificObject.removeObject(); 
     }) 
     .appendTo($("#someOtherElement")); 

Sie können nicht super innerhalb document.ready Funktion verwenden, da es Funktion nicht die gleiche Klasse ist now.and ist es nicht den gleichen Umfang der Klasse specificobject tragen.

Answer 3

es nur Prototypen schließlich basiert Denken Sie daran:

class SpecificObject extends GeneralObject { 

    constructor() { 
    super();// make sure to call super since you extend 
    } 

    create() { 

    // createObject is now available on this 
    this.createObject(); 

    // create a div 
    // i know the div has no expansion 
    $(document.createElement('div')) 
     // renamed from removeObject to deletedObject (typo ?) + fatArrow keep scope to the this of the instance 
     .click(() => this.deleteObject()) 
     .appendTo($("#someOtherElement")); 
    } 
}