Вызвать родительскую функцию внутри события click

Question

Я попытался создать приложение на JavaScript, которое просто создает и удаляет объект, но я пытаюсь реализовать его с помощью классов. Код выглядит следующим образом:

Мой первый файл:

class GeneralObject { 
 

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

Мой второй файл:

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")); 
 
    }

Моя цель - удалить объект, который я создал, с функцией щелчка, но я не могу получить доступ к родительской функции в этом экземпляре. Я получаю эту ошибку:

'super' keyword unexpected here

Надеюсь, вы можете сказать мне, как вызвать мою родительскую функцию в этой функции щелчка. Также я с нетерпением жду комментария об этой реализации с помощью ключевого слова «class», потому что я вижу везде только конструкции класса с «прототипом». Что такое «правильный/лучший» способ?

Спасибо за чтение этого поста

Answer 1

super доступна только в методах экземпляра. Ваша внутренняя анонимная функция не является методом экземпляра, поэтому у нее нет доступа к ней.

Однако, поскольку вы используете наследование, функция будет доступна с this. Поэтому вы можете применить решение от this answer для доступа к this из внутренней функции.

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")); 
} 

Поскольку вы только выполнение одной функции внутри этой click функции, вы можете в качестве альтернативы передать ссылку на функцию в качестве параметра:

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

Answer 2

Я думаю, вы должны использовать что-то вроде этого. Это будет работать нормально.

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

Вы не можете использовать супер внутри функции document.ready, потому что это не функция того же класса в now.And это не несут ту же сферу класса specificobject.

Answer 3

Помните, что это только прототип основан в конце концов:

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")); 
    } 
}