20

As far as I know, the arrow function is similar to a normal function. There aren’t any problem when I use it like this:

let X = () => {};
let Y = function() {};
X();
Y();

However, the error occurred when I used them with new:

let X = () => {};
let Y = function() {};
x = new X();
y = new Y();

Uncaught TypeError: X is not a constructor

Why is that?

11
  • 3
    The error itself gives you an answer.... you defined X to be an empty object, not a constructor method/function, as such you cannot invoke it with the "new X();" expression.
    – Dellirium
    Jun 2, 2016 at 9:41
  • 1
    link may help you
    – The Reason
    Jun 2, 2016 at 9:48
  • 3
    See also stackoverflow.com/questions/34361379/….
    – user663031
    Jun 2, 2016 at 9:49
  • 1
    @torazaburo both questions you provided are rather canonical and don't answer the specific question of the OP in my view
    – user5536315
    Jun 2, 2016 at 10:12
  • 2
    Arrow functions cannot be used as constructors as stated in the docs here
    – Tahir Raza
    Nov 5, 2018 at 5:11

2 Answers 2

30

Q. What did I do wrong?

A. You used new with an arrow function, and that's not allowed.

Q. Can I turn an arrow function into a constructor?

A. Only by wrapping it in a normal function, which would be silly. You can't turn an arrow function itself into a constructor.

Q. Can you explain how the specification disallows new with arrow functions?

A. To be a constructor, a function object must have a [[Construct]] internal method.

Functions created with the function keyword are constructors, as are some built-in functions such as Date. These are the functions you can use with new.

Other function objects do not have a [[Construct]] internal method. These include arrow functions. So you can't use new with these. This makes sense since you can't set the this value of an arrow function.

Some built-in functions are also not constructors. E.g. you can't do new parseInt().

Q. Can you explain the rationale behind disallowing new with arrow functions in the specification?

A. Use common sense, or search the es-discuss archives.

1
  • 3
    @Ricky I deleted my answer, because new doesn't depend on the constructor's prototype. Since you can't set this of arrows with apply or bind, it is consistent behavior to prohibit the application of new too. This is the best answer.
    – user5536315
    Jun 2, 2016 at 10:54
12

Arrow functions are not synonymous with normal functions. arguments and this inside arrow functions reference their outer function.

When the code new Foo(...) is executed, the following things happen:

  1. A new object is created, inheriting from Foo.prototype.
  2. The constructor function Foo is called with the specified arguments, and with this bound to the newly created object. new Foo is equivalent to new Foo(), i.e. if no argument list is specified, Foo is called without arguments.
  3. The object returned by the constructor function becomes the result of the whole new expression. If the constructor function doesn't explicitly return an object, the object created in step 1 is used instead. (Normally constructors don't return a value, but they can choose to do so if they want to override the normal object creation process.)

Since this inside an arrow function references its outer function (arrow functions inherit this from their declaration context, as @Iven is saying), using new keyword with an arrow function does not really make sense.

4
  • I have just read about it. But still don't understand why I can not create object like that
    – Ricky
    Jun 2, 2016 at 9:46
  • This answer has nothing to do with the question, which is why arrow functions do not function as constructors.
    – user663031
    Jun 2, 2016 at 9:48
  • 2
    It is not that using new keyword with an arrow function "does not make sense". It is illegal.
    – user663031
    Jun 2, 2016 at 10:13
  • 5
    Well, it's illegal because it doesn't make sense. Language designers don't make things illegal for the fun of it. So this does, in fact, answer the question.
    – TRiG
    Feb 15, 2022 at 13:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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