Question

我正在尝试理解Javascript OOP。我正在尝试覆盖类中的方法。在进行“点击”时，该类具有默认功能。我想覆盖那个函数，所以当点击时会发生新的事情。

我有一个类似这样的Javascript类：

AlertModal = function(){
  var x = *this is my close object;

  x.onclick = destoryAlert;

  function destroyAlert(){
    console.log('destroy');
  }
}

我的HTML文件显示：

<script type="text/javascript">
  window.alert = function (message) {
    var newAlert = new AlertModal();
    newAlert.destroyAlert = function(){
      console.log('new alert destroy');
    };

    newAlert.destroyAlert();
  };

我得到'新警报摧毁'这很棒。但是当我点击“x”时，它也表示会破坏。所以它被覆盖了，但不是吗？！就像它在调用它时创建一个新的'destroyAlert'函数，但保留默认值。

任何人都可以告诉我如何做到这一点，创建一个具有默认功能的类，但如果需要，如何覆盖它？

我习惯用Java和Actionscript编程，扩展类和覆盖公共/受保护的方法，但是这样做Javascript似乎有很大的不同，我无法理解这样做的逻辑。

谢谢，

Answer 1

您可以覆盖实例级别的方法：

AlertModal = function() {
    this.init();
};

AlertModal.prototype.init = function() {
    var modal = this;
    var x = ...;
    x.onclick = function() {
        // Note that I'm not using `this` here, because it would
        // reference `x` instead of the modal. But we can pass the modal
        // from the outer scope. This is called a lexical closure.
        modal.destroy();
    };
};

AlertModal.prototype.destroy = function() {
    console.log('destroy');
};

var myalert = new AlertModal();
myalert.destroy = function() {
    console.log('new destroy');
};

myalert.destroy();

但是如果你想在多个地方做同样的覆盖，那么通过继承AlertModal类创建一个专门的OtherAlertModal可能会更好。这是一种很好的JavaScript继承方法：http://ejohn.org/blog/simple-javascript-inheritance/

Answer 2

x.onclick = destroyAlertl

将x的onclick处理程序设置为引用本地函数

，而

newAlert.destroyAlert = ...

将此对象的destroyAlert属性设置为其他函数。不会更改x.onclick中存储的引用。

您需要将“默认”功能放在prototype的{{1}}上：

AlertModal

并以不同方式注册处理程序：

AlertModal.prototype.destroyAlert = function() {
     ...
}

如果您随后覆盖此类对象的var self = this; x.onclick = function() { self.destroyAlert(); }属性，则会调用新函数。

使用默认行为覆盖类外的Javascript方法

2 个答案: