How Does the `new` Keyword Impact Prototype-Based Inheritance in JavaScript?

Prototype-Based Inheritance: Delving into the 'new' Keyword's Role

When extending a Widget class with a new function named WeatherWidget, the prototype assignment:

WeatherWidget.prototype = new Widget;

plays a crucial role. The 'new' keyword invokes the Widget constructor and assigns its return value to the prototype property of WeatherWidget.

If omitted, this action would raise an error or possibly pollute the global namespace. By using 'new', the Widget constructor is invoked, ensuring proper initialization and a valid return value.

However, this approach creates a scenario where all WeatherWidget instances inherit properties from the same Widget instance, sharing values among themselves. This may not align with inheritance principles.

To rectify this issue and implement true class-based inheritance, the following steps should be taken:

1. Create a Dummy Object:

function Dummy () {}
Dummy.prototype = Widget.prototype;

2. Assign the Prototype:

WeatherWidget.prototype = new Dummy();

3. Fix the Constructor:

WeatherWidget.prototype.constructor = WeatherWidget;

This approach ensures that WeatherWidget instances inherit properties through the prototype chain without sharing values among themselves.

For a more concise solution in ECMAScript Ed. 5 and later, consider using:

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

Alternatively, for a generalized inheritance implementation, explore Function.prototype.extend(). This method enables easy prototype augmentation and provides a convenient 'super' access function for invoking parent methods.

The above is the detailed content of How Does the `new` Keyword Impact Prototype-Based Inheritance in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!