正确的继承方法

Question

I was reading the source code of RxJS4 and came across the function which does inheritance ( https://github.com/Reactive-Extensions/RxJS/blob/master/src/core/internal/util.js ):

var inherits = Rx.internals.inherits = function (child, parent) {
  function __() { this.constructor = child; }
  __.prototype = parent.prototype;
  child.prototype = new __();
};

I spent some time figuring out the prototype chains and think the function does enable us to do 'connect' the child and parent and create a child object with inheritance. But I also noticed if I create a parent object, its constructor, its constructor will be linked to the child function. Am I understand this function incorrectly (that this is a correct way to do inheritance and I'm linking the objects wrong)?

Answer 1

Objects and Constructors

One thing you have to get used to in javascript is that the constructor is the class. While ES6 did introduce the class keyword and the class syntax it is merely a syntax sugar of the underlying mechanism. The architecture was not changed.

A prototype is a property of constructors that the constructor will use to instantiate new objects. So, for example if you want to create lots of "people" you'd write something like this:

function Person (name) {
    this.name = name;
}

Person.prototype = {};

Person.prototype.name = "";
Person.prototype.age = null;
Person.prototype.gender = null;

Notice a few things. This is basically upside-down compared to other OO languages. In other languages you'd define a class and you can then define a constructor as a special property/method of the class. In javascript you define a constructor and then you define the class (prototype) as a special property of that constructor.

Second, there is not special constructor keyword. A constructor is just a regular function. There is nothing really special about it. It only becomes a constructor if you call it using the new keyword:

var x = Person(); // regular function, x is undefined
var y = new Person(); // constructor, y is an instance of Person

So, because there is nothing that can tell a programmer weather a function is a constructor or a regular function javascript programmers have developed a convention where function names always begin with lower-case and constructor names always begin with upper-case. From the code above you see the function named Person so you can assume that I intend it to be a constructor.

Inheritance

Since a prototype is, well... the prototype of an object, then to inherit from a constructor you set the child prototype to an instance of the Parent's prototype. In modern JS you'd do this:

function Employee (name, job) {
    this.name = name;
    this.job = job;
}

Employee.prototype = Object.create(Person.prototype); // Inherit!

Employee.prototype.job = null;

Notice that we inherit from an object (the prototype) because in javascript you inherit from objects, not constructors and not classes.

Second, notice that we inherit by setting our prototype to a copy of our parent's prototype. This is because if we merely assign our parent's prototype to our own then when we add new properties to it (like job in this example) we don't want to modify our parent's prototype (because then that would not be inheritance).

In the days before the Object.create function existed, you'd instead do this:

Employee.prototype = new Person();

This is still valid today even though Object.create is generally preferred. So in the RxJS code when you see this:

child.prototype = new __();

That's where inheritance happens. Remember, the prototype is what a constructor use as a template to create a new object. So the line above:

__.prototype = parent.prototype;

Means we now have a function __ which will create an object similar to the object the parent would have created. So doing new __() would create an object similar to calling the parent constructor but without executing any logic defined in the parent constructor. So basically it's doing something similar to Object.create(parent) ;

The inheritance is merely assigning a copy of the parent's prototype to our own prototype. All the other complicated bits above is merely preparing for copying the parent's prototype.

Answer 2

But I also noticed if I create a parent object, its constructor, its constructor will be linked to the child function.

This is not correct. The prototype chain goes one way, and the parent is not modified in any way.

The only caveat with this implementation is that the parent's constructor does not get called when child's constructor is called. The ES6 class implementation enforces that.

In your diagram there are a couple issues:

1. The instance of __ does not have a constructor property pointing to __ function. In fact the very reason __ exists is to set the constructor property to child constructor.

2. The __proto__ of child instance will be instance of __ (Note the new __() in the inherits code) and the __proto__ of that will be parent.prototype .

So, the inherits utility injects a meta-object in the prototype chain, whose only purpose is to ensure that constructor property points to correct class in child instance.

It may be educational to contrast this with how babel implements ES6 class semantics:

function _inherits(subClass, superClass) {
    if (typeof superClass !== "function" && superClass !== null) {
        throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
    }
    subClass.prototype = Object.create(superClass && superClass.prototype, {
        constructor: {
            value: subClass,
            enumerable: false,
            writable: true,
            configurable: true
        }
    });
    if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}

It leverages the fact that Object.create takes a second propertiesObject argument which can be utilized to add an extra property which in this case happens to be constructor . The object returned by Object.create serves the same purpose as the __ instance returned by new __() in the RxJS code.