How to extend a class inside a namespace in javascript?

Question

var sl = sl || {}

sl.Shape = function(){
    this.x = 0;
    this.y = 0;
};
sl.Shape.prototype.move = function(x,y){
    this.x += x;
    this.y += y;
};
sl.Rectangle = function(){
    sl.Shape.call(this);
    this.z = 0;
};

The next line produces the error (Object prototype undefined, has to be Object or null). As far as I can see this is because Shape is "namespaced".

sl.Rectangle.protoype = Object.create(sl.Shape.protoype);
sl.Rectangle.protoype.constructor = sl.Rectangle;

How do I do this correctly?

score 1 · Accepted Answer · answered Sep 17 '16 at 23:16

1

You should use word prototype instead protoype.

answered Sep 17 '16 at 23:16

Dresha

96
1
5

thanks, took me until 4 am to see it, even in what you wrote!! – Daniela Sep 18 '16 at 03:02

score 0 · Answer 2 · answered Sep 18 '16 at 00:34

You have misspelled the word "prototype" as Andrii pointed out, try this example:

(function() {
  var sl = sl || {};

  function Shape() {
    this.x = 0;
    this.y = 0;
  }

  Shape.prototype.move = function(x, y) {
    this.x += x;
    this.y += y;
  };

  function Rectangle() {
    Shape.apply(this, arguments);
    this.z = 0;
  };

  Rectangle.prototype = Object.create(Shape.prototype);
  Rectangle.prototype.constructor = Rectangle;

  sl.Shape = Shape;
  sl.Rectangle = Rectangle;

  // expose
  window.sl = sl;
}());

Usage

var shape = new sl.Shape();
var rect = new sl.Rectangle();

How to extend a class inside a namespace in javascript?

2 Answers2