Inheritance implementation in CoffeeScript

Question

I'm learning the different inheritance implementations in javascript, mostly following the Javascript Patterns book by Stoyan Stefanov.

Now I was inspecting how Coffescript implements it. So given a parent and a child classes or constructors:

class Animal
  constructor: (@name) ->

  move: (meters) ->
    alert @name + " moved #{meters}m."

class Snake extends Animal
  move: ->
    alert "Slithering..."
    super 5

sam = new Snake "Sammy the Python"
sam.move()

They are compiled to:

var Animal, Horse, Snake, sam,
    _extends = function(child, parent) {
        for (var key in parent) {
            if (_hasProp.call(parent, key)) child[key] = parent[key];
        }

        function ctor() {
            this.constructor = child;
        }
        ctor.prototype = parent.prototype;
        child.prototype = new ctor();
        child.__super__ = parent.prototype;
        return child;
    },
    _hasProp = {}.hasOwnProperty;

Animal = (function() {
    function Animal(_name) {
        this.name = _name;
    }

    Animal.prototype.move = function(meters) {
        return alert(this.name + (" moved " + meters + "m."));
    };

    return Animal;

})();

Snake = (function(_super) {
    _extends(Snake, _super);

    function Snake() {
        return Snake.__super__.constructor.apply(this, arguments);
    }

    Snake.prototype.move = function() {
        alert("Slithering...");
        return Snake.__super__.move.call(this, 5);
    };

    return Snake;

})(Animal);

sam = new Snake("Sammy the Python");
sam.move();

As I've understood the implementation of the inheritance in coffescript result from the combination of different patterns:

1. The Classical proxy Constructor

In this case we we also reset the constructor pointer and store the Superclass reference. What Stefanov defines 'Holy Grail'. With this pattern the child only inherits properties of the prototype.

// the proxy function
function ctor() {
  this.constructor = child;
}
ctor.prototype = parent.prototype;
child.prototype = new ctor();
child.__super__ = parent.prototype;

2. The Inheritance by Copying Properties

With this pattern we simply copy the properties of one object into another

_hasProp = {}.hasOwnProperty;
for (var key in parent) {
  if (_hasProp.call(parent, key)) child[key] = parent[key];
}

3. Classical Pattern - Rent-a-Constructor (or Borrow a Constructor)

function Snake() {
  return Snake.__super__.constructor.apply(this, arguments);
}

QUESTION:

Are my assumptions correct? Is coffescript compiler using 1+2+3?
The inheritance by copying seems to use a shallow copy, meaning that it is not inspecting to check if the property is an object/array and starting a recursion. Even tough the result seems a perfect deep copy (objects/arrays are copies, not references). Why/how?
Isn't the rent-a-constructor creating a repetition of the inheritance? Properties copied and then parent constructor called again?
Can the _extends function also be used between objects instead of Constructors?

Thanks

user229044 · Accepted Answer · 2015-02-05 16:56:22Z

2

Isn't the rent-a-constructor creating a repetition of the inheritance? Properties copied and then parent constructor called again?

The properties being copied here...

    for (var key in parent) {
        if (_hasProp.call(parent, key)) child[key] = parent[key];
    }

... are not prototypal properties, they are "class level" properties, methods defined on the function itself. It's copying properties from the function Animal to the function Horse.

The difference is:

class Animal
  # Not part of prototype, part of Animal, must be copied
  @build: (name) ->
    new @(name)

  constructor: (name) ->
    @name = "An animal named #{name}"

  # Part of prototype
  sayName: ->
    alert(@name)

class Bird extends Animal
  constructor: (name) ->
    @name = "A bird named #{name}"


# Both Animal and Bird have build because of the copying of properties:
a = Animal.build('sam') # an animal named sam
b = Bird.build('bob') # a bird named bob

Some annotation on the compiled JavaScript:

var Animal, Bird, a, b,
  __extends = function(child, parent) {
      for (var key in parent) {
          # Copies Animal.build to Bird.build
          if (__hasProp.call(parent, key)) child[key] = parent[key];
      }

      function ctor() {
          this.constructor = child;
      }
      # Makes sayName available to Bird via prototypal inheritance
      ctor.prototype = parent.prototype;
      child.prototype = new ctor();
      child.__super__ = parent.prototype;
      return child;
  },
  __hasProp = {}.hasOwnProperty;

Animal = (function() {
  Animal.build = function(name) {
    return new this(name);
  };

  function Animal(name) {
    # This still (theoretically) needs to be invoked, regardless of whether
    # the properties are copied over, though it isn't invoked in this example
    this.name = "An animal named " + name;
  }

  Animal.prototype.sayName = function() {
    return alert(this.name);
  };

  return Animal;

})();

Bird = (function(_super) {
  __extends(Bird, _super);

  # There is no "Bird.build" defined here, it is copied from Animal

  function Bird(name) {
    this.name = "A bird named " + name;
  }

  # There is no "move" defined here, it is provided by our prototyep
  return Bird;

})(Animal);

a = Animal.build('sam');

b = Bird.build('bob');

Regardless, the properties being copied and then "the parent constructor being called again" isn't really what would be happening.

The properties are not defined in the parent constructor, the parent constructor is just an executable blob of code that needs to run. It may not define any properties, or it might define a bunch of properties, but those properties are not going to be set by the prototype or by the _hasOwnProperty loop.

edited Feb 5, 2015 at 16:56

answered Feb 5, 2015 at 16:45

user229044♦

241k41 gold badges347 silver badges350 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Leonardo Over a year ago

I see, thanks. But functions are objects and as I've understood objects are copied by references. So if we change @build from Animal after b has been created means that also the Bird's version of build will be modified?

user229044 Over a year ago

No. You cannot "change" Animal's function build. You can replace it, by assigning a new function via Animal.build = function () {...}, but this doesn't modify the original build still attached to Bird.

Leonardo Over a year ago

What about a property being a generic object? we could modify it in Animal isn't it? What would happen in that case to the child

user229044 Over a year ago

Yes. If we add class Animal; @build = { }, then the same object would be shared by Animal and Bird.

Collectives™ on Stack Overflow

Inheritance implementation in CoffeeScript

1. The Classical proxy Constructor

2. The Inheritance by Copying Properties

3. Classical Pattern - Rent-a-Constructor (or Borrow a Constructor)

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1. The Classical proxy Constructor

2. The Inheritance by Copying Properties

3. Classical Pattern - Rent-a-Constructor (or Borrow a Constructor)

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related