JavaScript: Add prototype methods to inner class

Question

I want to add a method to the prototype of an inner class. Is that possible?

This is what I tried:

var Foo = function Foo() {};
Foo.prototype = {

    Bar: function Bar() { },
    Bar.prototype: { // <- this does not work

        barMethod: function () {
            console.log('hello');
        }

    },

    fooMethod: function () {
        var bar = new this.Bar();
        bar.barMethod();
    }

}

var foo = new Foo();
foo.fooMethod();

But Bar.prototype doesn't work, it throws a SyntaxError with the message Unexpected token ..

Why do you use "inner classes"? And why do you store them on the prototype? — Bergi
– Bergi, Commented Jun 20, 2015 at 14:21
You will need to follow the normal rules for object literals. You cannot have "nested property names". Use an assignment instead. — Bergi
– Bergi, Commented Jun 20, 2015 at 14:22
Minor nit, JS doesn't have classes. On one level ES6 does, but it's syntactic sugar. — Dave Newton
– Dave Newton, Commented Jun 20, 2015 at 14:54
Alright. :) I should have said something like "I want to add a method to a nested prototype" or something like that. — x-ray
– x-ray, Commented Jun 20, 2015 at 15:13

doldt · Accepted Answer · 2015-06-20 15:51:13Z

3

Your problem is that you're defining the Foo.prototype object, and as such, you're bound to the rules and syntax of object creation, for example the parser expects you to list the attributes in a key: value, nextkey: nextvalue format, which Bar.prototype does not fit. (Keys are effectively strings, and it doesn't make sense to use . in them, as they would create ambiguity while parsing*)

Try this:

var Foo = function Foo() {};
Foo.prototype.Bar = function Bar() { };
Foo.prototype.Bar.prototype = {

    barMethod: function () {
        console.log('hello');
    }

};

There's a slight semantic difference though, as this way you're not overriding the prototype, just extending it. (consider equaling it to {} first, then extending it with every attribute of the object you tried to create)

(*) A note on ambiguity: I mention above that having a . in your object key would create ambiguity, here's a simple example:

var foo = {
   bar: {
       baz: 0,
       qux: 20
   },
   bar.baz: 150 //note that this will throw an error
};
console.log(foo.bar.baz);

If this code above wouldn't throw an error, what would you expect console.log(foo.bar.baz) to print, 0 or 150?

That's why it doesn't make sense to use . in a key, and that's why the parser throws the unexpected token error on any ..

Of course, you could use the "bar.baz" string as a key as "bar.baz": 150 above (please don't!), but then you'd have to reference the value as

foo["bar.baz"]

which would be distinctly different from

foo.bar.baz;

All in all, this is just some intuition-based reasoning behind why you can't use a . in your keys, but the real reason is plainly this: because the parser will throw an error.

edited Jun 20, 2015 at 15:51

answered Jun 20, 2015 at 14:35

doldt

4,5063 gold badges24 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

guest271314 Over a year ago

Appear to return TypeError: Cannot set property 'prototype' of undefined ?

doldt Over a year ago

Well first you have to create Foo (the way you originally did), of course, I omitted that line.

x-ray Over a year ago

Alright, this works the way I want. But where exactly is the semantic difference? Where would you add = {};?

doldt Over a year ago

You dont need to add it in this case. I was just pointing out that if you're doing f.prototype= {...} then you're redefinind the prototype attribute, while f.prototype.bar = ... is just adding bar to whatever the prototype attribute was before.

x-ray Over a year ago

I understand that Bar.prototype: is simply not supported. But why would a . in a string create ambiguity while parsing?

|

Oriol · Accepted Answer · 2015-06-20 15:31:49Z

1

In an object literal you can only define properties of that object literal, but not properties of the values.

However, if you want to set the prototype when creating the object, consider Object.assign (which can be polyfilled):

Foo.prototype = {
  Bar: Object.assign(function Bar() { }, {
    prototype: {
      barMethod: function () {
        console.log('hello');
      }
    }
  }),
  fooMethod: function () {
    var bar = new this.Bar();
    bar.barMethod();
  }
};

However, note that replacing all the prototype is a bad practice because you erase the constructor property.

edited Jun 20, 2015 at 15:31

answered Jun 20, 2015 at 14:50

Oriol

291k71 gold badges459 silver badges535 bronze badges

3 Comments

x-ray Over a year ago

I should have mentioned I use node.js (v0.12.4), which doesn't have Object.assign available. There is a shim available (npmjs.com/package/object.assign), but I haven't tested it.

doldt Over a year ago

Oriol, in this case, he was trying to replace the prototype property of a function (not to be confused with the prototype of the function that getPrototypeOf would return) with a new object, meaning that new objects created with this function would still have the constructor property, as their prototype would be Object.

Oriol Over a year ago

@doldt Yes. In my answer I only talked about prototype, not [[Prototype]].

Collectives™ on Stack Overflow

JavaScript: Add prototype methods to inner class

2 Answers 2

8 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related