javascript - 对象被 JavaScript 中的后续对象覆盖

Question

好吧...相对新手，可能超出了我自己的范围，但就这样了。我创建了一个对象来帮助验证表单。该对象称为“Field”，如下所示:

var Field = {
mini : {
            val : 3,
            err : "Wrong length. Your entry needs to be greater than 2 characters",
            valid : false,
            check : function(target){
                var target = event.target || event.srcElement;
                if (target.value.length < this.mini.val) {
                    this.mini.valid = false;
                    fadeIn("mini",this.mini.err);
                } else {
                    this.mini.valid = true;
                    fadeOut("mini",this.mini.err);
                    return null;
                }
            },
        },

max : {
            val : 5,
            err: "Wrong length. Your entry needs to be less than 30 characters",
            valid : false,              
            check : function(target){
                var target = event.target || event.srcElement;
                if (target.value.length > this.max.val) {
                    this.max.valid = false;
                    fadeIn("max",this.max.err);
                } else {
                    this.max.valid = true;
                    fadeOut("max",this.max.err);
                    return null;
                }
            },
        },

regex : {
            val : /[^a-zA-Z- ]/,
            err : "Letters, hyphens, apostrophes and spaces only please.",
            valid : false,
            check : function(){
                var target = event.target || event.srcElement;
                if (target.value.match(this.regex.val)) {
                    this.regex.valid = false;
                    fadeIn("regex",this.regex.err);
                } else {
                    this.regex.valid = true;
                    fadeOut("regex",this.regex.err);
                    return null;
                }
            },  
        },
hintID : ""
}

我知道这本身有点笨拙，我将寻找进一步对其进行排序的方法。

我创建了该对象的多个实例，如下所示:

 var firstName = Object.create(Field);
    firstName.hintID = fnHint;
    firstName.regex.val = /[^a-zA-Z- ]/;
    firstName.regex.err = "Letters, hyphens, apostrophes and spaces only please.";

 var lastName = Object.create(Field);
    lastName.hintID = lnHint;
    lastName.regex.val = /[^a-zA-Z- ]/;
    lastName.regex.err = "Letters, hyphens, apostrophes and spaces only please.";

 var age = Object.create(Field);
    age.max.val = 3;
    age.max.err = "Wrong length. The age needs to be no more than 3 characters long.";
    age.regex.val = /[^0-9]/;
    age.regex.err = "Numbers only please.";
    age.hintID = agHint;

到目前为止一切顺利。

当我尝试访问单独的对象实例时，就会出现问题，尽管我调用了什么，但我似乎总是得到最后一次出现的结果。例如:

console.log(firstName.regex.err); 

给我在 console.log 调用之前最后声明的 regex.err 实例的值。例如，如果我将该代码放在lastName之后，它会给我lastName.regex.err的值，在age之后，它会给我age.regex.err的值......我可能在这里做了一些愚蠢的事情 - 它一直是知道:-)我已经检查过了，但似乎无法弄清楚。有什么想法吗？

提前致谢。

斯蒂芬

Answer 1

那是因为Object.create() accepts a "prototype" as the first argument 。然后发生的事情是使用相同原型(prototype)创建的所有对象开始共享这些属性，这就是后续调用修改它们的原因。您想要的不是使用 Object.create()，而是 Underscore.js 或 Lo-Dash 中提供的“extend”函数(有关 .extend() 的更多信息可在 this SO question 中找到)。