How does the `new` operator work in JavaScript, and how does it create objects with their prototype chains?

How does the new operator work in JavaScript?

The new operator plays a pivotal role in JavaScript's object-oriented programming system. It's essential to understand its functionality to effectively create and manage objects.

Diving into the Implementation of the new Operator

<code class="javascript">new dataObj(args);</code>

This code snippet utilizes the internal [[Construct]] method to carry out a series of specific actions:

1. Object Creation: It initializes a new native object.
2. Prototype Chain Establishment: The internal [[Prototype]] of this object is set to point towards the Function prototype property. Notably, if the Function prototype property is not an object (primitive values such as Number, String, Boolean, Undefined, or Null), Object.prototype is employed as the prototype instead.
3. Function Invocation: After the object's creation, the function is called with the newly created object assigned as its this value.
4. Return Value Handling: If the return value of the invoked function yields a primitive, the internally created object is returned. However, if an object is returned, the internally created object is discarded.

An Alternative Implementation for Clarity

To enhance comprehension, here's an alternate representation of what the new operator achieves:

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

  // Check if `f.prototype` is an object, not a primitive
  proto = Object(f.prototype) === f.prototype ? f.prototype : Object.prototype;

  // Create an object that inherits from `proto`
  obj = Object.create(proto);

  // Apply the function setting `obj` as the `this` value
  ret = f.apply(obj, Array.prototype.slice.call(arguments, 1));

  if (Object(ret) === ret) { // the result is an object?
    return ret;
  }
  return obj;
}

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

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

In this example:

• NEW is a custom function that simulates the behavior of the new operator.
• It checks if the Function prototype property is an object,否则使用 Object.prototype 来创建新对象。
• NEW applies the function to the newly created object as its this value.
• The function's return value determines the final object to be returned.

The above is the detailed content of How does the `new` operator work in JavaScript, and how does it create objects with their prototype chains?. For more information, please follow other related articles on the PHP Chinese website!