javascript property values function not inherited

Question

The values "x, y, width and height" are inherited by the object created by the "SquareFactory" from the object created by the ShapeFactory, but the function right() is not inherited. I assume the line

 square.protoype = ShapeFactory();

creates the link for the properties to be searched for. But this does not seem to happen. Am i missing something about the prototype. I read How does JavaScript .prototype work? but not able to find the error with my current understanding about prototype.

function ShapeFactory() {
    return {
    x: 0,
    y: 0,
    width: 0,
    height: 0,      
    right: function () {
        return this.x + this.width;
    }
    };
}
function SquareFactory() {
    var square = {
    insideBoundary: function (x, y) { // this function works
        return (x > this.x && x < (this.x + this.width)
            && y > this.y && y < (this.y + this.height));
    },
    print_info: function () { // this function throws error
        console.log(this.x + " " + this.y + " "
            + this.width + " " + this.height
            + this.right() + " " + this.bottom()); // error accessing right() fn
    }
    };
    square.protoype = ShapeFactory();
    return square;
}

Only **functions** have a special `prototype` property. When a function (`Func`) is called with `new`, a new object is created, which inherits from `Func.prototyep`. There is no standard way to change the prototype of an already existing object (`square` in your example). All you do is create an object which happens to have a `prototype` property, but it's just an ordinary property. — Felix Kling, Dec 26 '13 at 21:11
You're completely misunderstanding inheritance & prototypes. Read http://blog.slaks.net/2013-09-03/traditional-inheritance-in-javascript/ — SLaks, Dec 26 '13 at 21:13
If I remember right... the standard usage of x.prototype is x.prototype = new somethingelse(); — 0xFADE, Dec 26 '13 at 21:13
@0xFADE: Depends on what `somethingelse` does. But using `new` in this case is bad design as well: http://stackoverflow.com/a/17393153/218196 — Felix Kling, Dec 26 '13 at 21:14
Yeah. prototypes are messy. The type of messy that you have to poke at it with a stick till it does what you interpret as correct then leave it alone. — 0xFADE, Dec 26 '13 at 21:28

Jeff Renaud · Accepted Answer · 2013-12-26T23:31:29.823

Here's a working example:

function ShapeFactory() {
    this.x = 0;
    this.y = 0;
    this.width = 0;
    this.height = 0;
}

ShapeFactory.prototype.right = function () {
    return this.x + this.width;
};

function SquareFactory() {
    ShapeFactory.call(this);
}

SquareFactory.prototype = Object.create(ShapeFactory.prototype);

SquareFactory.prototype.insideBoundary = function (x, y) {
    return (x > this.x && x < (this.x + this.width) && y > this.y && y < (this.y + this.height));
};

SquareFactory.prototype.print_info = function () {
    console.log(this.x + " " + this.y + " " + this.width + " " + this.height + this.right());
};

var shapeFactory = new ShapeFactory();
var squareFactory = new SquareFactory();

console.log(ShapeFactory.prototype.right === SquareFactory.prototype.right); // ShapeFactory and SquareFactory are sharing the same right function

console.log(squareFactory instanceof SquareFactory); // squareFactory is a SquareFactory
console.log(squareFactory instanceof ShapeFactory); // squareFactory is also a ShapeFactory
console.log(shapeFactory instanceof SquareFactory); // shapeFactory is not a SquareFactory
console.log(shapeFactory instanceof ShapeFactory); // shapeFactory is a ShapeFactory

squareFactory.print_info();

javascript property values function not inherited

1 Answers1