Employing inheritance with JavaScript Function objects

Question

Is it possible to make two or more JavaScript function objects that inherit properties from a common object?

var obj common = {
    a: 'first',
    b: 'second',
    z: 'last'
};

var foo = function() {};
var bar = function() {};

// Some magic occurs here

foo.a; // 'first'
bar.z; // 'last'

One way to do this would be to employ a mixin, where we iterate through common and copy the properties over to foo and bar. However, if we have a huge list of properties, this could become inefficient.

Is there a more JavaScript way of doing this? I would love to use the prototype chain here, but I don't know if it's possible.

Ben Aston · Accepted Answer · 2015-04-17 08:14:31Z

1

This will do exactly what you want,but I don't think you want what you think you want. If you know what I mean?!

This requires modern Chrome or FF:

var common = {
    __proto__: Function.prototype,
    a: 'first',
    b: 'second',
    z: 'last'
};

var foo = function() {};
var bar = function() {};

Object.setPrototypeOf(foo, common);
Object.setPrototypeOf(bar, common);

console.log(foo.a); // 'first'
console.log(bar.z); // 'last'

I think what you want is this:

var common = {      
  a: 'first',
  b: 'second',
  z: 'last'
};

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

Foo.prototype = Bar.prototype = common;

var foo = new Foo();
var bar=  new Bar();

console.log(foo.a); // 'first'
console.log(bar.z); // 'last'

edited Apr 17, 2015 at 8:14

answered Apr 16, 2015 at 15:25

Ben Aston

56k69 gold badges221 silver badges351 bronze badges

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

5 Comments

Aaron Over a year ago

No, I specifically want to create objects that inherit from a common parent prototype, but that can also be applied to arguments as a function. Thank you!

Aaron Over a year ago

If I'm not mistaken, it's not generally a good idea to directly set proto. Could this be done instead by an extra call to Object.setPrototypeOf(common, Function.prototype)?

Aaron Over a year ago

Also, it looks like setPrototypeOf is not supported in Safari.

Ben Aston Over a year ago

The former approach in my answer is going against the grain of the language, hence it is using mess widely supported constructs/methods. The latter approach is the more conventional, leveraging the prototype chain.

Aaron Over a year ago

That's true; but they accomplish different goals. Your second approach sets up the prototype chain for instances of the function object, whereas I want to set up the prototype chain of the function object itself. Seems like the Javascript writers didn't intend for programmers to do this.

Bimper · Accepted Answer · 2015-04-16 15:17:50Z

1

It is impossible to create functions in ways other than:

function foo (){ } (function declaration)
the Function constructor
var foo = function(){ } (function expressions)
() => {} (ES6 arrows).

In all of these, you can't specify a base class for the function itself. Like you noted however, a mixin like trick would work here just fine.

Note, in advance one might think that the following might work:

function f(){
   return Function.apply(this, arguments);
}
f.prototype = Object.create(Function.prototype);
f.x = 15;

But it doesn't, and it doesn't either according to the spec (namely, because the function constructor called as a function behaves the same - i.e. it ignores this passed in).

answered Apr 16, 2015 at 15:17

Bimper

2701 silver badge8 bronze badges

Collectives™ on Stack Overflow

Employing inheritance with JavaScript Function objects

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related