Javascript: Inherited object changes reflected to parent

Question

I have this code for my game (there is more, but this is the important part):

function BaseGameObject() {}
BaseGameObject.prototype.geometry = {
    shape: 'none'
};
BaseGameObject.prototype.type = null;
BaseGameObject.prototype.texture = 'black';

function GameObject(x, y) {
    this.geometry.x = x;
    this.geometry.y = y;
}
GameObject.inheritsFrom(BaseGameObject);

function Rectangle(x, y, width, height) {//todo solve reverse inheritance in geometry bject
    this.geometry.x = x;
    this.geometry.y = y;
    this.geometry.w = width;
    this.geometry.h = height;
}
Rectangle.inheritsFrom(GameObject);
Rectangle.prototype.geometry.shape = 'rectangle';

function Square(x, y, size) {
    this.geometry.x = x;
    this.geometry.y = y;
    this.geometry.w = size;
    this.geometry.h = size;
}
Square.inheritsFrom(Rectangle);

InheritsFrom looks like this:

Function.prototype.inheritsFrom = function (parentClassOrObject) {
    if (parentClassOrObject.constructor == Function) {
        //Normal Inheritance
        this.prototype = new parentClassOrObject;
        this.prototype.constructor = this;
        this.prototype.parent = parentClassOrObject.prototype;
    } else {
        //Pure Virtual Inheritance
        this.prototype = parentClassOrObject;
        this.prototype.constructor = this;
        this.prototype.parent = parentClassOrObject;
    }
    return this;
};

My problem is, when I do new Square(10, 500, 20), geometry object gets changed even for BaseGameObject prototype, because the object is stored as reference.

My question is, can I somehow have separate geometry object for each object, that inherits geometry object from parent prototype, but changes aren't reflected the other way?

So, you're trying to reinvent inheritance in Javascript when there are thousands of articles you can just copy from or start from and enhance? And, what are you attempting to do with this: `if (parentClassOrObject.constructor == Function)`? do you mean check the type of the constructor or what exactly are you trying to test for there? — jfriend00, Jun 23 '14 at 23:07
If you want help fixing your `.inheritsFrom()` method, please describe what it's supposed to do in the two separate branches. All method overrides in JS are essentially "virtual" so it's not clear how you intend "Normal inheritance" to be different from "Pure Virtual Inheritance". My guess is that you're familiar with inheritance in something like C++ and trying to mimic that in Javascript, but that isn't really how JS works. My first major JS projects are full of C++ isms that never really belonged in my JS code. — jfriend00, Jun 23 '14 at 23:46
I see Bergi already has given the correct answer. As you want instance specific members from Parent you must re use Parent constructor: `Parent.apply(this,arguments)` And you should never set an instance of Parent as the prototype of Child because prototype is shared and you now have instance specific Parent members on Child.prototype where they don't belong, as Bergi corrected use Object.create to set Child prototype. All of this and some more is explained in detail here: http://stackoverflow.com/a/16063711/1641941 — HMR, Jun 24 '14 at 02:57

score 0 · Answer 1 · edited May 23 '17 at 10:32

0

Have a look at this question. While most answers depend on jQuery you may find something like this useful:

var defaults = { 'fo': 'bar' };
var clone    = JSON.parse( JSON.stringify( defaults ) );

This is from @heinob's answer.

edited May 23 '17 at 10:32

Community

1
1

answered Jun 23 '14 at 22:57

Marco Kerwitz

5,294
2
18
17

A mere link would've been better in a comment. Please show in your answer how to apply this concept to the `.geometry` problem. – Bergi Jun 24 '14 at 00:04
There's not much to it I believe. All you need to do is set up your default geometry object(s) from which you can clone from. I thought your original problem was that you could not copy objects without referencing the originals? – Marco Kerwitz Jun 24 '14 at 00:13
I just wanted to give you a tip on how to improve your answer (and maybe the requirements for an upvote from me) :-) I could think of a few places where this might fit into the OP's code, so you should show your whole solution. (It's not the only one, btw) – Bergi Jun 24 '14 at 00:25

score 0 · Answer 2 · answered Jun 24 '14 at 00:02

can I somehow have separate geometry object for each object, that inherits geometry object from parent prototype

Yes:

Function.prototype.inheritsFrom = function (parentClassOrObject) {
    if (parentClassOrObject instanceof Function) {
        parentClassOrObject = parentClassOrObject.prototype;
    }
    // Proper Inheritance
    this.prototype = Object.create(parentClassOrObject);
    this.prototype.constructor = this;
    this.prototype.parent = parentClassOrObject;
    return this;
};

function BaseGameObject() {
    // create own property with new object
    this.geometry = Object.create(this.geometry);
}
BaseGameObject.prototype.geometry = {
    shape: 'none'
};
BaseGameObject.prototype.type = null;
BaseGameObject.prototype.texture = 'black';

function GameObject(x, y) {
    BaseGameObject.call(this);
    this.geometry.x = x;
    this.geometry.y = y;
}
GameObject.inheritsFrom(BaseGameObject);

function Rectangle(x, y, width, height) {
    GameObject.call(this, x, y);
    this.geometry.w = width;
    this.geometry.h = height;
}
Rectangle.inheritsFrom(GameObject);
Rectangle.prototype.geometry = Object.create(BaseGameObject.prototype.geometry);
Rectangle.prototype.geometry.shape = 'rectangle';

function Square(x, y, size) {
    Rectangle.call(this, x, y, size, size);
}
Square.inheritsFrom(Rectangle);

Javascript: Inherited object changes reflected to parent

2 Answers2