Javascript继承 - 重叠基类变量

Question

我正在尝试创建一个自定义 javascript 表单验证器。我从创建一个输入验证器基类开始，我正在扩展这个基类以处理更具体的输入类型。例如，收入和邮政编码。

当前结构如下：Base Class = InputValidator, Sub Classes: Income, ZipCode

当我只创建一个 Income 实例时，一切正常。但是，如果我还创建了一个 ZipCode 实例，它似乎会覆盖 Income 的基类。为了看到这一点，我创建了一个 JSFiddle。 http://jsfiddle.net/tpdietz/wy274ymb/3/

如果您在年收入输入中输入的不是数字，您应该会在收入输入上方看到一个警告下拉菜单。这就是我要的。但是，如果您取消注释 jsfiddle 中的第 48 行，请重新运行它，然后尝试相同的操作。您将看到输入不正确的年收入内容会引发邮政编码警告。正如预期的那样，为邮政编码输入除数字以外的其他内容会产生同样的效果。

这是我声明子类的方式：

var Income = function (incomeElement, warningElement) {
    InputValidator.call(this, incomeElement, warningElement, isInteger);

    this.isValid = function() {
        return valid;
    }
}

var ZipCode = function (zipCodeElement, warningElement) {
    InputValidator.call(this, zipCodeElement, warningElement, isInteger);

    this.isValid = function() {
        return valid && ele.val().length < 6 && ele.val().length > 2;
    }
}

这是我声明基类的方式：

var InputValidator = function (element, warningElement, validatorIn) {
    this.name = name;
    ele = element;
    warning = warningElement;
    validator = validatorIn;
    valid = false;

    ele.keyup(function() {
        if(!validator($(this).val())) {
            showWarning();
            valid = false;
        } else {
            hideWarning();
            valid = true;
        }
    });

    function showWarning() {
        warning.slideDown();
    }
    function hideWarning() {
        warning.slideUp();
    }

}

有人知道为什么会这样吗？我想我已经掌握了它应该如何工作。

谢谢。

Answer 1

您需要在所有局部变量前面声明var，这样它们就不是隐式全局变量。当您离开 var 时，如下所示：

var InputValidator = function (element, warningElement, validatorIn) {
    this.name = name;
    ele = element;
    warning = warningElement;
    validator = validatorIn;
    valid = false;

您最终会创建全局变量。因此，当您创建第二个实例时，所有实例都共享相同的全局变量，并且它们似乎都相互覆盖。

每个实例变量应该使用 var 声明为构造函数的本地变量（因此它们将是私有的），或者应该像使用 this.name 一样将它们分配给 this.propName。

您可以将实现更改为：

var InputValidator = function (element, warningElement, validatorIn) {
    this.name = name;
    var ele = element;
    var warning = warningElement;
    var validator = validatorIn;
    var valid = false;

    ele.keyup(function() {
        if(!validator($(this).val())) {
            showWarning();
            valid = false;
        } else {
            hideWarning();
            valid = true;
        }
    });

    function showWarning() {
        warning.slideDown();
    }
    function hideWarning() {
        warning.slideUp();
    }

}

如果您希望所有这些变量都是构造函数的本地变量，并且无法从构造函数外部访问。

---

仅供参考，这是在 Javascript 的严格模式下运行的一个重要原因，因为它会将其标记为错误。

var InputValidator = function (element, warningElement, validatorIn) {
    "use strict";
    this.name = name;
    ele = element;  // <== This is an error in strict mode, since ele is not declared

注意，没有理由从构造函数中获取参数并将其简单地分配给新的局部变量。您可以像引用局部变量一样引用命名参数。