在 JavaScript 中从父级调用子方法

Posted 2023-02-23

【中文标题】在 JavaScript 中从父级调用子方法

【英文标题】：Calling child method from parent in JavaScript

【发布时间】：2013-04-01 13:48:57

【问题描述】：

我有一个 javascript 类，我想通过创建一个子类来覆盖父方法。但是，我正在努力弄清楚如何从父上下文中调用子方法。

这是我父母的精简版：

// "rules" is a global hash

function ForumFilter() 
    this.scanText = function(title, body) 
        // Save 'this' context, as each() overwrites it
        var that = this;
        // This is jQuery each()
        $.each(rules, function(ruleName, rule) 
            // rule.search is a regex
            var match = rule.search.test(body);
            if (match)
            
                that.isPassed = false;
                // ** I'd like to call a child method here,
                // ** but it only calls the method in this class
                that.setRuleFailed(ruleName);
            
        );
    

    this.setRuleFailed = function(ruleName) 
        this.failedRules.push(ruleName);
    

这是我对孩子的尝试：

ForumFilterTest.prototype = new ForumFilter();
ForumFilterTest.prototype.setRuleFailed = function(ruleName) 
    // Call parent
    ForumFilter.setRuleFailed(ruleName);
    // Record that this one has triggered
    this.triggered.push(ruleName);

这是我从子实例调用我的父方法：

var scanner = new ForumFilterTest();
scanner.scanText("Hello", "Hello");

因此，在scanText（仅存在于父级）中，它可能会调用setRuleFailed，它应该调用ForumFilterTest 中的版本，而后者又会调用它覆盖的类。因此，顾名思义，我试图向父级添加一个行为以进行测试，所以我当然希望在 ForumFilter 自己实例化时使用父级方法。

【参考方案1】：

在更好地了解您的问题后，这是我实际提出的更改。具体来说，您需要将您的ForumFilter 方法移动到它的prototype。这将允许ForumFilterTest 方法显式引用ForumFilter 方法。

第 1 步：将 ForumFilter 方法移至其 prototype。

function ForumFilter() 
ForumFilter.prototype.scanText = function(title, body) 
    // Save 'this' context, as each() overwrites it
    var that = this;
    // This is jQuery each()
    $.each(rules, function(ruleName, rule) 
        // rule.search is a regex
        var match = rule.search.test(body);
        if (match)
        
            that.isPassed = false;
            // ** I'd like to call a child method here,
            // ** but it only calls the method in this class
            that.setRuleFailed(ruleName);
        
    );
;
ForumFilter.prototype.setRuleFailed = function(ruleName) 
    this.failedRules.push(ruleName);
;

第2步：在需要时显式引用ForumFilter“父”方法：

// "child class" implementation
function ForumFilterTest() 
ForumFilterTest.prototype = new ForumFilter();
ForumFilterTest.prototype.setRuleFailed = function(ruleName) 
    // Call parent
    ForumFilter.prototype.setRuleFailed.call(this, ruleName);
    // Record that this one has triggered
    this.triggered.push(ruleName);
;

【讨论】：

感谢您的帮助，非常感谢 jsFiddle 示例。这几乎是我的目标，但是我希望孩子能够称呼父母为per this。因此，它添加到父级而不是替换它。

啊，您需要将父方法移动到原型中，以便子类仍然可以显式调用“覆盖”方法。看到这个：jsfiddle.net/Tsmgg/3

太棒了，非常感谢！这正是我所追求的，并且我已经成功地修改了自己的用例。那么，即使父方法之前存在，它们对孩子来说是不可见的？

正确。您的 ForumFilter 方法先前已在构造函数中设置，因此是 instance 级别的。这意味着一旦您运行ForumFilterTest.prototype = new ForumFilter()，这些方法现在直接在ForumFilterTest 的原型上，而不是在原型链上更进一步。这导致父 setRuleFailed 方法被 ForumFilterTest.prototype.setRuleFailed = function() ... 调用完全覆盖，因为那也是 parent setRuleFailed 实现的存储位置。

感谢@jmar，非常感谢 - 这是有道理的。