How does the \'new\' operator in JavaScript work internally, and what are the key steps involved in object creation using this operator?

Understanding the Inner Workings of the "new" Operator in JavaScript

Considered one of the enigmatic aspects of JavaScript, the "new" operator has fascinated developers for its role in object creation. This article delves into the "new" operator's intricate mechanism, revealing its essence through an alternative implementation.

The Function Behind the "new" Operator

The "new" operator internally invokes the [[Construct]] method of the function that follows it. This method plays a pivotal role in the object creation process:

1. Object Initialization:

   • It initializes a pristine, native JavaScript object.

2. Prototype Linkage:

   • It establishes a connection between the newly created object's internal [[Prototype]] property and the function's prototype property.
   • If the function's prototype property is not an object, it opts for Object.prototype instead.

3. Function Invocation:

   • The function associated with the "new" operator is executed, utilizing the newly created object as its "this" value.

The Return Value Enigma

The outcome of the "new" operator hinges on the return value of the invoked function:

• Primitive Return Value: If the function returns a primitive value (e.g., Number, String), the internally created object is returned.
• Object Return Value: If the function returns an object, the internal object is discarded, and the returned object takes precedence.

An Alternative Implementation

To comprehend the inner workings of the "new" operator, let's explore an alternative implementation that mimics its behavior:

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

  proto = Object(f.prototype) === f.prototype ? f.prototype : Object.prototype;
  obj = Object.create(proto);
  ret = f.apply(obj, Array.prototype.slice.call(arguments, 1));

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

Example Usage:

<code class="javascript">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>

Conclusion

Through this alternative implementation, we gained a comprehensive understanding of the "new" operator's vital role in object creation and prototype chain establishment. Its intricate mechanism, when understood, enables developers to harness the power of JavaScript's object-oriented programming capabilities.

The above is the detailed content of How does the \'new\' operator in JavaScript work internally, and what are the key steps involved in object creation using this operator?. For more information, please follow other related articles on the PHP Chinese website!