How Does the JavaScript \'new\' Operator Work Its Magic?

Unraveling the Enigma of the JavaScript "new" Operator

In the depths of JavaScript's complexities lies a mysterious construct most renowned for its potential to perplex: the "new" operator. Its murky workings stand alongside the prototype chain, leaving many lost in the labyrinth of code.

Delving into the New Operator's Mechanism

To unveil the secrets of the "new" operator, let's dissect its intricate operations:

• It wrangles the internal [[Construct]] method, an invisible force within JavaScript.
• [[Construct]] meticulously crafts a pristine object with native properties.
• A subtle dance ensues, where the object's [[Prototype]] is tethered to the Function prototype. Unless the function lacks an object prototype (relegating it to primitive values), Object.prototype graciously steps in to guide the object.
• The "new" operator then orchestrates a grand invocation of the function, bestowing upon it the freshly created object as its "this" value.
• A crucial juncture arises: if the function yields a primitive value, the internally spawned object takes center stage. However, if an object is returned, the original object regrettably fades into oblivion.

An Alternative Lens

To shed further light on the enigmatic "new" operator, let's explore an alternative implementation that mirrors its actions:

<code class="javascript">function NEW(f) {
  var obj, ret, proto;

  // Prototype verification
  proto = Object(f.prototype) === f.prototype ? f.prototype : Object.prototype;

  // Object inheritance from `proto`
  obj = Object.create(proto);

  // Function invocation with object as "this"
  ret = f.apply(obj, Array.prototype.slice.call(arguments, 1));

  // Object return
  if (Object(ret) === ret) {
    return ret;
  }
  return obj;
}

// Demonstration:
function Foo(arg) {
  this.prop = arg;
}
Foo.prototype.inherited = 'baz';

var obj = NEW(Foo, 'bar');
console.log(obj.prop); // 'bar'
console.log(obj.inherited); // 'baz'
console.log(obj instanceof Foo); // true</code>

This code serves as a beacon, illuminating how the "new" operator diligently performs its duties behind the scenes.

The above is the detailed content of How Does the JavaScript \'new\' Operator Work Its Magic?. For more information, please follow other related articles on the PHP Chinese website!