JavaScript OOP: Objects change their prototype (for all other objects using the same prototype) [duplicate]

Question

function NamedRoundedBlock(){
    var name = this.makeFeild("name");
    name.className = "Block NamedRound name";
    this.element.className = "Block NamedRound root";
    this.element.appendChild(name);
}
NamedRoundedBlock.prototype = new Block();
NamedRoundedBlock.prototype.constructor = NamedRoundedBlock;

There's the code, anyone know what I've done wrong?

My problem is that if I make two NamedRoundedBlock objects and change the this.element property of one (by changing an attribute or something) the other's will change too.

Also, a little additional detail, this.makeFeild and this.element are both set in Block

I have no idea what you did wrong, because you didn't say what the problem is. — Chris Hayes
– Chris Hayes, Commented Jan 4, 2014 at 1:35
The title is throwing me off, too. Objects don't magically change their prototypes. Can you clarify? — Ray Toal
– Ray Toal, Commented Jan 4, 2014 at 1:37
Thanks for the clarification. JavaScript is behaving as advertised here. The prototype is just the place for shared properties. Changes you make in the prototype are seen by all objects. — Ray Toal
– Ray Toal, Commented Jan 4, 2014 at 1:45

Ray Toal · Accepted Answer · 2014-01-04 02:10:41Z

The prototype is the place for shared properties.

Consider:

var protoCircle - {x: 0, y: 0, radius: 1}

This means every circle will have these properties as defaults. So if I make circle with that prototype:

var c1 = Object.create(protoCircle);
c1.x = 3;

var c2 = Object.create(protoCircle);
c2.y = 5;

then circle c1 is at (3,0) with radius 1 and c2 is at (0,5) with radius 1. That's because c1 has only one own property (x) and two inherited properties (y and radius) which it picks up from its prototype. If I change protoCircle.radius then that change will be seen by the two circles. That is the way JavaScript is designed! This design allows a whole bunch of objects to share a default value so you don't have to store it in each object. You just put the properties unique to each object inside each object and let the default properties be shared in the prototype. In the case above, if 99% of the circles have a radius of 1, then we don't have to store radii in our individual circles.

In your case you put a property called element in a prototype. All objects that share that prototype will have the same value for element. So if you say

x.element.className = 'something'

then that does effectively make y.element.className be something as well, assuming y shares the same prototype as x.

If you want each of the named rounded blocks to have different elements then you need to do this:

function NamedRoundedBlock(){
    ...
    this.element = {}
    this.element.className = "Block NamedRound root";
    this.element.appendChild(name);
}

Josh Beam · Accepted Answer · 2014-01-04 01:45:09Z

0

Check out Traditional OOP Inheritance in JavaScript

The above blog post may help answer some of your questions.

It elaborates particularly on defining a new constructor for an object, which "inherits" from a parent. Is that one of your questions? Take this for example:

NamedRoundedBlock.prototype = Object.create(
    Block.prototype,
        {
            "constructor": { 
                configurable: true,
                enumerable: false,
                writable: true,
                value: 'NamedRoundedBlock'
            }
        }
);

The above created an object based on Block's prototype, but it defines its own constructor, and also sets it as not enumerable.

Also, should the first line be something like this?:

function NamedRoundedBlock() {
    this.name = this.makeFeild("name");
    //etc.

Additionally, independent of the issue, I'd be careful with the spelling of "Feild" (spelled "Field"), as spelling issues can sometimes cause hard-to-find bugs later in the code.

edited Jan 4, 2014 at 1:45

answered Jan 4, 2014 at 1:38

Josh Beam

19.9k5 gold badges48 silver badges69 bronze badges

2 Comments

James Bruckner Over a year ago

Links are bad answers! Try to elaborate in your post, as links can and do change.

HMR Over a year ago

Second parameter in Object.create does not work in older browsers and a good polyfil should throw an error: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… (look at throw new Error)

Collectives™ on Stack Overflow

JavaScript OOP: Objects change their prototype (for all other objects using the same prototype) [duplicate]

2 Answers 2

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Linked

Related