51

What does the following code do:

WeatherWidget.prototype = new Widget;

where Widget is a constructor, and I want to extend the Widget 'class' with a new function WeatherWidget.

What is the new keyword doing there and what would happen if it is left out?

0

6 Answers 6

51
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.

18
  • 4
    +1 for despising the bad approach, -1 for not mentioning Object.create :-)
    – Bergi
    Commented Sep 26, 2012 at 1:30
  • +1, fixed. I will see if Object.create() is worth using in a branch in Function.prototype.extend(). Commented Sep 26, 2012 at 1:43
  • This was very interesting to read and learn. In your example using Dummy you wrote WeatherWidget.prototype = new Dummy();, in my line the brackets are missing. What difference does that make?
    – Kai
    Commented Sep 26, 2012 at 2:44
  • @Kai Thank you. The difference is syntactical, not semantical. Consider it good code style. Noticed how the program changes – in that the constructor is not called anymore – when you are omitting new from your version? With an argument list the call of the constructor as a function might still fail, but at least it does not fail silently. Commented Sep 26, 2012 at 8:58
  • That is, if the constructor tested this or used strict mode. Commented Sep 28, 2012 at 9:26
7

According to some odd Javascript rules, new Widget actually invokes the constructor rather than returning a reference to the constructor. This question actually answers the question the difference between var a = new Widget() and var a = Widget().

In simple words, the new keyword tells Javascript to call the function Widget under a different set of rules than a regular function call. Going off the top of my head, the ones I remember are:

  1. There is a brand new object created
  2. Widget can use the this keyword to refer to that object.
  3. If Widget does not return anything, this new object will be created.
  4. This object will inherit a few additional properties that will indicate it was created by Widget that are used to track down property chains.

Without the new keyword, a call to widget would

  1. If in strict mode, this will be set to undefined.
  2. Otherwise, this will refer to the global object. (Called window by the browser.)
  3. If the function does not return anything, then undefined will be returned.

Reference: new keyword

7
  • Searching for javascript constructor here at SO will fill in many more details. Commented Sep 26, 2012 at 0:22
  • Missing obligatory link to developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/… :-)
    – Bergi
    Commented Sep 26, 2012 at 0:23
  • Please note that his code has no brackets - it would be just an assignment of the constructor function
    – Bergi
    Commented Sep 26, 2012 at 0:24
  • 2
    @Bergi -- In Javascript constructors the parens are optional for some reason I've never figured out. See this discussion Commented Sep 26, 2012 at 0:26
  • 1
    Yes, and that is why it would be no invocation without the new keyword - because the OP has omitted them
    – Bergi
    Commented Sep 26, 2012 at 0:48
5
WeatherWidget.prototype = new Widget;

does create a new instance of the Widget constructor and use it as WeatherWidget's prototype object. Using the new keyword creates the new object, sets up the inheritance chain of it to Widget.prototype, and applies the constructor function on it (where you can set up individual properties'n'methods, or create private-scoped variables).

Without the new keyword it would be an assignment of the Widget function to the prototype property - which does not make any sense. If you'd add the optional brackets (i.e. Widget()), it would invoke the function normally, but not as a constructor on a new instance, but with the global object as context. See also the reference for the this keyword.

Notice that you should not really use this code. As said, it creates a new instance by invoking the constructor function. But the purpose is only to create an empty object that inherits from the Widgets prototype object, not to instantiate something (which could do some harm, depending on the code). Instead, you should use Object.create (or its popular shim):

WeatherWidget.prototype = Object.create(Widget.prototype);

see also Javascript basic inheritance vs Crockford prototypical inheritance

3
  • 1
    Interesting approach, but please see my updated answer: You would want to fix the constructor property as well. And that is where the "popular shim" for Object.create() fails – must fail even if updated – because you cannot emulate non-enumerability. You can only hasOwnProperty()-filter it out later. That still leaves write-onlyness and non-configurability, which can be only partially emulated (depending on the implementation). Commented Sep 26, 2012 at 20:03
  • Yes, passing {constructor:{value:WeatherWidget}} as the second argument should be done, and you might need to use a less popular shim :-) However, I am not sure which code depends on a correctly set constructor property?
    – Bergi
    Commented Sep 26, 2012 at 20:18
  • I have an isInstance() method on some of my constructors that does. More precise than duck typing alone. Commented Sep 26, 2012 at 20:43
3

In plain english you're extending one class with another. A prototype can only be an object so you set WeatherWidget's prototype to a new instance of Widget. If you removed the new keyword you would be setting the prototype to the literal constructor function which doesn't do anything.

var Appendages = function(){
  this.legs = 2
};
var Features = function() {
   this.ears = 4;
   this.eyes = 1;
}

// Extend Features class with Appendages class.
Features.prototype = new Appendages;
var sara = new Features();
sara.legs;
// Returns 2.

Understanding that the prototype can be any object, something like this would also work:

var appendages = {
  legs : 2
};
var Features = function() {
   this.ears = 4;
   this.eyes = 1;
}

// Extend Features class with Appendages class.
Features.prototype = appendages;
var sara = new Features();
sara.legs;
// Returns 2.

In JavaScript, if the key isn't found on the object, it checks the parents object you extended it from. Hence you can change items on the parent object on the fly like so:

var appendages = {
  legs : 2
};
var Features = function() {
   this.ears = 4;
   this.eyes = 1;
}

// Extend Features class with Appendages class.
Features.prototype = appendages;
var sara = new Features();
sara.legs;
// Returns 2.
appendages.hair = true;
sara.hair;
// Returns true.

Note that this all happens during instantiation which means you can't just switch out the prototype after you've created the object:

var foo = {name : 'bob'};
var bar = {nachos : 'cheese'};
foo.prototype = bar;
foo.nachos;
// undefined

However, all modern browsers come with this newer __proto__ method, which allows you to do it:

var foo = {name : 'bob'};
var bar = {nachos : 'cheese'};
foo.__proto__ = bar;
foo.nachos
// "cheese"

Read up more on understanding JavaScript prototypes here. This article from Pivotal Labs is also really good.

5
  • What is that Appendages function good for, why do you need an instance (including a prototype object) of it there?
    – Bergi
    Commented Sep 26, 2012 at 0:47
  • Bergi: I just added a 3rd example to show that off. Objects can extend on each other up a chain so it enables you to reuse and build code. In a theoretical example, all vehicles have similarities including an engine. We can build that into a base class, but not all vehicles have four wheels. So we can build one car class and one motorcycle class on top of it and reuse the core code. In real life, I use the Backbone.js framework. A lot of views are similar where I need to show a list of items. By making a base list class, I can extend it to create 20 different list pages with very little bloat. Commented Sep 26, 2012 at 1:10
  • It's better for Appendages to be a class constructor instead of an object so that you can initialize it with various options. So it could be an "engine" class where you can pass in the size of the engine while still making it reusable. Commented Sep 26, 2012 at 1:12
  • Nah, a "class constructor" to instantiate prototype objects is usually a bad idea, the problem of similiar classes should be solved otherwise.
    – Bergi
    Commented Sep 26, 2012 at 1:28
  • You're right if what you passed to the constructor turned it into a completely different object, but for a minor setting I disagree. Commented Sep 26, 2012 at 1:32
2

new is important for prototype inheritance; i.e.
Create a constructor with a method

var Obj = function(){};
Obj.prototype = {};
Obj.prototype.foo = function(){console.log('foo');};

Make a second constructor to extend the first with

var ExObj = function(){};

Now, if we prototype without new,

ExObj.prototype = Obj;
(new ExObj).foo(); // TypeError: Object #<Object> has no method 'foo'

Which means we haven't inherited from the prototype of Obj, however, if we prototype with new

ExObj.prototype = new Obj();
(new ExObj).foo(); // console logs 'foo'

Furthermore, adding new things to the prototype of ExObj doesn't make any changes to it's base, Obj.

0

JavaScript functions are "MULTIPLE(2) PERSONALITIES"!!!

They are regular-functions with input and output, which we call like function().

Also they are constructors of JS-objects, when we use the new keyword. >>>BUT<<< the new created objects are NOT INSTANCES of the constructors (like the objects of classes in class-based inheritance). The new objects are instances of the object of the prototype property of the constructor.

Then in WeatherWidget.prototype = you put the object you want to inherit its properties to the objects the constructor will create, which usually is new function() and not a function.

JavaScript created HUGE confusion in the programming community by naming the objects created by constructors, INSTANCES of them with the instanceof keyword.
> function f(){}
undefined
> new f() instanceof f
true

1
  • 1
    Well, you can always do var o = Object.create(f.prototype); o.constructor(); f.prototype.isPrototypeOf(o) :-)
    – Bergi
    Commented Sep 15, 2014 at 18:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.