Object overridden by subsequent object in javascript

Question

Okay... relative newbie here, probably overreaching myself but here goes. I've created an object in order to help validate a form. The object is called "Field" and looks like this:

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 : ""
}

I get that this in itslf is somewhat clumsy and I'll be looking at ways to sort that further down the line.

I've created several instances of this object as follows:

 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;

So far so good.

The problem occurs when I try to access the separate object instances as despite what I call, I always seem to get the last occurence. For example:

console.log(firstName.regex.err);

gives me the value of the last declared instance of the regex.err, before the console.log call. For example, if I place that code after lastName it gives me the value for lastName.regex.err, after age it gives me the value for age.regex.err... I'm probably doing something silly here - it has been know :-) I've checked through it but can't seem to figure it out. Any ideas?

Thanks in advance.

Stef

Mutating members on prototype affect all instances using that prototype. Prototype and constructor functions are explained in detail here: http://stackoverflow.com/questions/16063394/prototypical-inheritance-writing-up/16063711#16063711 — HMR, Nov 10 '14 at 23:37

score 0 · Accepted Answer · edited May 23 '17 at 12:27

0

That's because Object.create() accepts a "prototype" as the first argument. What happens then is all objects created with that same prototype start sharing those properties, which is why subsequent calls modify them. Instead of using Object.create(), what you want is something like the "extend" function available in Underscore.js or Lo-Dash (more info about .extend() is available in this SO question).

edited May 23 '17 at 12:27

Community

1
1

answered Nov 10 '14 at 20:59

pbkhrv

647
4
11

Thanks... am going to go and have a look at that now... obviously need to do a bit more homework. As an aside - is there a way of doing this just with native js - as you'll have guessed, I'm learning atm and want to try and get right down to the bones of it. – Stef Nov 10 '14 at 21:25
I don't know of a native function that can clone objects the way you need them copied. Most of the examples that deal with creating objects etc try to enumerate through all of source object's properties and copy them over to destination. Here is a good discussion: http://stackoverflow.com/questions/728360/most-elegant-way-to-clone-a-javascript-object – pbkhrv Nov 10 '14 at 23:38

Object overridden by subsequent object in javascript

1 Answers1