Search code examples
javascriptinheritanceprototypal-inheritancegoogle-closure-library

Why is `goog.base(this)` necessary in addition to `goog.inherits()`?


In this snippet of Google Closure javascript code involving a constructor, why is goog.base(this); necessary? Doesn't Foo already inherit from Disposable with goog.inherits(foo, goog.Disposable);?

goog.provide('Foo');

/**
 * @constructor
 * @extends {goog.Disposable}
 */
Foo = function() {
  goog.base(this);
}     
goog.inherits(foo, goog.Disposable);

foo.prototype.doSomething = function(){
  ...
}

foo.prototype.disposeInternal = function(){
  ...
}

Solution

  • goog.inherits(childConstructor, parentConstructor)

    goog.inherits() establishes the prototype chain from the child constructor to the parent constructor.

    /**
     * Inherit the prototype methods from one constructor into another.
     * @param {Function} childCtor Child class.
     * @param {Function} parentCtor Parent class.
     */
    goog.inherits = function(childCtor, parentCtor) {
      /** @constructor */
      function tempCtor() {};
      tempCtor.prototype = parentCtor.prototype;
      childCtor.superClass_ = parentCtor.prototype;
      childCtor.prototype = new tempCtor();
      /** @override */
      childCtor.prototype.constructor = childCtor;
    };
    


    In addition to prototype properties, constructors may have "own" properties (i.e. instance-specific properties added to this). Since goog.inherits() does not call the parent constructor, own properties are not copied to the child constructor and any initialization code in the parent does not get executed. For these reasons, the standard pattern is to chain constructors as in the following example.

    /**
     * @param {string} name The parent's name.
     * @constructor
     */
    var Parent = function(name) {
      /**
       * @type {string}
       * @private
       */
      this.name_ = name;
    }
    
    /**
     * @param {string} name The child's name.
     * @constructor
     * @extends {Parent}
     */
    var Child = function(name) {
      Parent.call(this, name);
    }
    goog.inherits(Child, Parent);
    


    goog.base(self, opt_methodName, var_args)

    goog.base() is a helper function for calling parent methods so that you do not need to explicitly use call() or apply().

    If [goog.base()] is called from a constructor, then this calls the superclass contructor with arguments 1-N.

    If this is called from a prototype method, then you must pass the name of the method as the second argument to this function. If you do not, you will get a runtime error. This calls the superclass' method with arguments 2-N.

    This function only works if you use goog.inherits to express inheritance relationships between your classes.

    In Closure code it is common to chain constructors with goog.base() rather than calling the parent constructor explicitly.

    /**
     * @param {string} name The child's name.
     * @constructor
     * @extends {Parent}
     */
    var Child = function(name) {
      goog.base(this, name);
    }
    goog.inherits(Child, Parent);
    


    Further Reading