Question

我尝试在JavaScript中创建一个只创建和删除对象的应用程序，但我尝试用类实现它。代码如下所示：

我的第一个文件：

＆＃13;

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

＆＃13;

我的第二个档案：

＆＃13;

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

＆＃13;

我的目标是使用点击功能删除已创建的对象，但在此实例中我无法访问父功能。我收到这个错误：

＆＃39;超＆＃39;关键字意外在这里

我希望你能告诉我如何在这个点击功能中调用我的父函数。此外，我期待通过＆＃34; class＆＃34;对此实现发表评论。关键字，因为我看到只有类＆＃34;原型＆＃34;的类构造。什么是＆＃34;正确/更好＆＃34;方式？

感谢您阅读此帖

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 {

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

Answer 3

我认为你应该使用这样的东西。这样可以正常工作。

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

你不能使用super inside document.ready函数，因为它现在不是同一个类的函数。它没有携带类特定对象的相同范围。

在click事件中调用父函数

3 个答案: