What is the reason to use the ‘new’ keyword at Derived.prototype = new Base

by 
WeatherWidget.prototype = new Widget;

The new keyword calls Widget as a constructor and the return value is assigned to the prototype property. (If you would omit new, you would not call Widget unless you added an argument list, (). However, calling Widget that way might not be possible. It would certainly have the potential to spoil the global namespace if it is not strict mode code and the implementation is conforming to ECMAScript Ed. 5.x there, because then this in the constructor would refer to ECMAScript’s global object.)

But this approach actually comes from a really viral bad example in the old Netscape JavaScript 1.3 Guide (mirrored at Oracle, formerly Sun).

This way, your WeatherWidget instances will all inherit from the same Widget instance. The prototype chain will be:

[new WeatherWidget()] → [new Widget()] → [Widget.prototype] → …

This can be useful, but most of the time you would not want it to happen. You should not do that here unless you want all your WeatherWidget instances to share among them the property values they inherit from this Widget instance, and only through it, from Widget.prototype. Another problem is that you need to call the parent constructor this way, which may not allow to be called without arguments as you do, or would not initialize properly. It certainly has nothing to do with emulation of class-based inheritance as known, e.g., from Java.

The proper way to implement class-based inheritance in these prototype-based languages is (originally devised by Lasse Reichstein Nielsen in comp.lang.javascript in 2003, for cloning objects):

function Dummy () {}
Dummy.prototype = Widget.prototype;
WeatherWidget.prototype = new Dummy();
WeatherWidget.prototype.constructor = WeatherWidget;

The constructor prototype property should be fixed as well, so that your WeatherWidget instances w would have w.constructor === WeatherWidget as expected, and not w.constructor === Widget. However, be aware that it is enumerable afterwards.

This way, WeatherWidget instances will inherit properties through the prototype chain, but will not share property values among them, because they inherit from Widget.prototype through Dummy which has no own properties:

[new WeatherWidget()] → [new Dummy()] → [Widget.prototype] → …

In implementations of ECMAScript Ed. 5 and later, you can and should use 

WeatherWidget.prototype = Object.create(Widget.prototype, {
  constructor: {value: WeatherWidget}
});

instead. This has the additional advantage that the resulting constructor property is not writable, enumerable, or configurable.

The parent constructor will only be called if you call it explicitly, from WeatherWidget, for example with

function WeatherWidget (…)
{
  Widget.apply(this, arguments);
}

See also Function.prototype.extend() in my JSX:object.js for how to generalize this. Using that code, it would become

WeatherWidget.extend(Widget);

My Function.prototype.extend() takes an optional second argument with which you can easily augment the prototype of WeatherWidget instances:

WeatherWidget.extend(Widget, {
  foo: 42,
  bar: "baz"
});

would be equivalent to

WeatherWidget.extend(Widget);
WeatherWidget.prototype.foo = 42;
WeatherWidget.prototype.bar = "baz";

You will still need to call the parent constructor explicitly in the child constructor, though; that part cannot reasonably be automated. But my Function.prototype.extend() adds a _super property to the Function instance which makes it easier:

function WeatherWidget (…)
{
  WeatherWidget._super.apply(this, arguments);
}

Other people have implemented similar extensions.

More Related Contents:

  1. What is the significance of the Javascript constructor property?
  2. What is the `constructor` property really used for? [duplicate]
  3. Setting methods through prototype object or in constructor, difference? [duplicate]
  4. Can I construct a JavaScript object without using the new keyword?
  5. Advantages of setting the “constructor” Property in the “prototype”
  6. Prototypical inheritance – writing up [duplicate]
  7. What are the nuances of scope prototypal / prototypical inheritance in AngularJS?
  8. Javascript object members that are prototyped as arrays become shared by all class instances
  9. What values can a constructor return to avoid returning this?
  10. Assigning prototype methods *inside* the constructor function – why not?
  11. Using “Object.create” instead of “new”
  12. Understanding prototypal inheritance in JavaScript
  13. ES6 arrow functions not working on the prototype?
  14. Asynchronous operations in constructor
  15. Javascript when to use prototypes
  16. Create a reset of javascript Array prototype when Array.prototype has been modified?
  17. Grasping prototypical Inheritance through pseudoclassical instantiation (JavaScript)
  18. What does calling super() in a React constructor do?
  19. When is it appropriate to use a constructor in REACT?
  20. Understanding Crockford’s Object.create shim
  21. How to access object prototype in javascript?
  22. Asynchronous constructor
  23. ‘this’ keyword, not clear
  24. Adding Prototype to JavaScript Object Literal
  25. Javascript: hiding prototype methods in for loop?
  26. OO Javascript constructor pattern: neo-classical vs prototypal
  27. Can you create functions with custom prototypes in JavaScript?
  28. JavaScript: What are .extend and .prototype used for?
  29. JS defineProperty and prototype
  30. [[Prototype]] vs prototype: ..what is the difference? (MyCons.__proto__ === MyCons.prototype) equals FALSE

Leave a Comment