Why do parentheses cause object to become unbound?

Question

When I surround a new object invocation with parens and call a method on it immediately Node (or just v8 in general) will throw a "TypeError: this.getName is not a function" error. If I don't wrap it in parens no then no error will get thrown and this is properly bound.

function Greeter(name) {
  this.name = name;
}

Greeter.prototype.getName = function() {
  return this.name;
}

Greeter.prototype.helloWorld = function() {
  console.log(`Hello ${this.getName()}`);
}

// Throws, this in any class methods are bound to the global
(new Greeter('Olive')).helloWorld();
// Doesn't throw, this is bound to the object as expected
new Greeter('Olive').helloWorld();

What do the parens get interpreted as here, and why is 'helloWorld' unbound?

Answer 1

You are depending on automatic semi-colon insertion and it isn't working the way you expect.

This:

Greeter.prototype.helloWorld = function() {
  console.log(`Hello ${this.getName()}`);
}

// Throws, this in any class methods are bound to the global
(new Greeter('Olive')).helloWorld();

is equivalent to:

let mygreeter = new Greeter('Olive');

let result_of_call = (function() {
  console.log(`Hello ${this.getName()}`);
}(mygreeter));

Greeter.prototype.helloWorld = result_of_call.helloWorld();

You need to put a semi-colon after the previous expression to prevent the (...) being interpreted as "Call this function as an IIFE with arguments"

Greeter.prototype.helloWorld = function() {
  console.log(`Hello ${this.getName()}`);
};

(new Greeter('Olive')).helloWorld();