为什么“代理”继承停止使用闭包？

Question

For those not familiar, surrogate inheritance looks like the following:

var Surrogate = function () {}

var extend = function (Base, Sub) {
  Surrogate.prototype = Base.prototype;
  Sub.prototype = new Surrogate();
  Sub.prototype.constructor = Sub;
}

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

Animal.prototype.speak = function () {
  return this.getSound() + ' ' + this.name;
};

Animal.prototype.getSound = function () {
  // Abstract
};

var Cat = function (name) {
  Animal.call(this, name);
};

extend(Animal, Cat);

Cat.prototype.getSound = function () {
  return 'Meow';
};

var kitty = new Cat('Maru');
console.log(kitty.speak()); // Logs "Meow Maru"
console.log(kitty instanceof Animal); // Logs true
console.log(kitty instanceof Cat); // Logs true
console.log(kitty.constructor == Cat); // Logs true

Basically to create a constructor function which inherits from Animal , we create another constructor function (in this case, Cat ), call the Animal constructor function with the proper value for this , and then use the extend function to set the Cat 's prototype to be an "instance" of Animal without a name property. Think of using extend(Animal, Cat) being the same as Cat.prototype = new Animal() except Cat.prototype.name is undefined.

The above works perfectly, and I have a side question about it for later.

I wanted to take that to the next level and hide Surrogate inside a closure, so I changed the declarations of Surrogate and extend to look like this:

var extend = (function () {
  var Surrogate = function () {};
  return function (Base, Sub) {
    Surrogate.prototype = Base.prototype;
    Sub.prototype = new Surrogate();
    Sub.prototype.constructor = Sub;
  };
});

Now when I run the script it fails on the first log statement:

TypeError: Object [object Object] has no method 'speak'

However, creating another file extend.js with the following contents:

var Surrogate = function () {};

module.exports = function (Base, Sub) {
  Surrogate.prototype = Base.prototype;
  Sub.prototype = new Surrogate();
  Sub.prototype.constructor = Sub;
}

And changing the declaration of extend in the main script to var extend = require('./extend'); works, and Surrogate is hidden as expected.

For the main question: As far as I know node and other CommonJS systems just wrap modules in a closure function like I was originally attempting to do. Why does the module version work but my version with closures doesn't?

For the side question mentioned above: I was surprised by Sub.prototype.constructor = Sub . I thought that it should be Sub.prototype.constructor = Base but that causes the last logging statement to log false . I guess I have already answered the question for myself, but I thought that constructor was a property on the constructed object, not the prototype. Is it the other way around?

UPDATE

I just tried this with AMD using a module called extend defined as follows:

define(function () {
  var Surrogate = function () {};

  return function (Base, Sub) {
    Surrogate.prototype = Base.prototype;
    Sub.prototype = new Surrogate();
    Sub.prototype.constructor = Sub;
  };
});

It works perfectly fine. I feel like I am overlooking something extremely simple here... why does this work fine in module systems but not in plain closures? I have tested all versions (plain, closures, and modules) in node.js, Chrome, and Firefox.

Answer 1

var extend = (function () {
  var Surrogate = function () {};
  return function (Base, Sub) {
    Surrogate.prototype = Base.prototype;
    Sub.prototype = new Surrogate();
    Sub.prototype.constructor = Sub;
  };
});

should be

var extend = (function () {
  var Surrogate = function () {};
  return function (Base, Sub) {
    Surrogate.prototype = Base.prototype;
    Sub.prototype = new Surrogate();
    Sub.prototype.constructor = Sub;
  };
})();

(I just appended () to it to execute the function.)

or if you want to guard against the possibility that Surrogate might get corrupted(somethign might mess with its constructor function - making it do something):

var extend = function (Base, Sub) {
    var Surrogate = function () {};
    Surrogate.prototype = Base.prototype;
    Sub.prototype = new Surrogate();
    Sub.prototype.constructor = Sub;
};