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

Question

This question already has answers here:

What does "the prototype belongs to the class not the instance" mean in javascript? (3 answers)

Closed 8 years ago.

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

Answer 1

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.

Answer 2

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);
}