Javascript object factory method that passes arguments object as parameters

Question

The following code does not work as desired (jsFiddle):

function makeFoo(a, b) {
  var foo = new Foo();
  Foo.apply(foo, arguments);
  return foo;
}
var Foo = function(a, b) {
  console.log(
    "This should be called once. "+
    "a=\"" + a + "\", " + 
    "b=\"" + b + "\", "
  );
  this.a = a;
  this.b = b;
}
Foo.prototype.go = function() {
  console.log("a: " + this.a);
  console.log("b: " + this.b);
};
var foo = makeFoo("Hello", "World");
foo.go();

Expected output:

This should be called once. a="Hello", b="World"
a: Hello
b: World

Actual output:

This should be called once. a="undefined", b="undefined"
This should be called once. a="Hello", b="World"
a: Hello
b: World

Like this jsfiddle.net/v48ppq73/6

Adam Buchanan Smith
– Adam Buchanan Smith

2016-08-19 17:05:57 +00:00
Commented Aug 19, 2016 at 17:05 — Adam Buchanan Smith
– Adam Buchanan Smith, Commented Aug 19, 2016 at 17:05

Oriol · Accepted Answer · 2016-08-19 17:19:08Z

6

That's because you call Foo twice: via new and via function call.

I think with new Foo() you only wanted to create an object which inherits from Foo.prototype. To achieve that, use Object.create(Foo.prototype) instead.

function makeFoo(a, b) {
  var foo = Object.create(Foo.prototype);
  var result = Foo.apply(foo, arguments);
  return Object(result) === result ? result : foo;
}
var Foo = function(a, b) {
  console.log(
    "This should be called once. "+
    "a=\"" + a + "\", " + 
    "b=\"" + b + "\", "
  );
  this.a = a;
  this.b = b;
}
Foo.prototype.go = function() {
  console.log("a: " + this.a);
  console.log("b: " + this.b);
};
var foo = makeFoo("Hello", "World");
foo.go();

But that's just a hack, which you are required to use in ECMAScript 5 because there is no way to instantiate a constructor with an arbitrary number of arguments.

Constructors should be instantiated, not called as functions. In ECMAScript 6, you can do it with Reflect.construct.

function makeFoo(a, b) {
  return Reflect.construct(Foo, arguments);
}
var Foo = function(a, b) {
  console.log(
    "This should be called once. "+
    "a=\"" + a + "\", " + 
    "b=\"" + b + "\", "
  );
  this.a = a;
  this.b = b;
}
Foo.prototype.go = function() {
  console.log("a: " + this.a);
  console.log("b: " + this.b);
};
var foo = makeFoo("Hello", "World");
foo.go();

edited Aug 19, 2016 at 17:19

answered Aug 19, 2016 at 17:03

Oriol

291k71 gold badges459 silver badges535 bronze badges

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

3 Comments

Jayy Over a year ago

Brilliant, thanks. Why is the first snippet a hack? What is the problem with using a constructor as a function to achieve this result? And why must the result of apply () be checked?

Pointy Over a year ago

@Jodes the check on the return value is to handle the fact that the constructor function might return some primitive value when not invoked via new. A constructor invocation via new will ignore such a return value, so that test ensures that the right thing is returned from the "makeFoo" function.

Oriol Over a year ago

@Jodes The first one is a hack because it uses [[Call]] instead of [[Construct]]. As Pointy said, I check the value returned by the constructor to emulate what the new operator does.

JokerManh · Accepted Answer · 2016-08-19 17:01:35Z

0

Try this:

function makeFoo(a, b){
  var foo = new Foo(a,b);
  return foo;
}

answered Aug 19, 2016 at 17:01

JokerManh

322 bronze badges

1 Comment

Oriol Over a year ago

The point seems to be able to pass an arbitrary number of arguments.

Collectives™ on Stack Overflow

Javascript object factory method that passes arguments object as parameters

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related