Javascript 继承 - 重叠基类变量

Question

我正在尝试创建一个自定义 JavaScript 表单验证器。我首先创建一个输入验证器基类，然后扩展该基类以处理更具体的输入类型。例如，收入和邮政编码。

当前结构如下:基类 = InputValidator，子类:收入、邮政编码

当我仅创建一个 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 声明为构造函数的本地变量(因此它们将是私有(private)的)，或者应该将它们分配给 this.propName，例如您正在使用 this.name。

您可以将您的实现更改为:

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

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