How does the new operator work in JavaScript?

by

The new operator uses the internal [[Construct]] method, and it basically does the following:

  • Initializes a new native object
  • Sets the internal [[Prototype]] of this object, pointing to the Function prototype property.
    • If the function’s prototype property is not an object (a primitive values, such as a Number, String, Boolean, Undefined or Null), Object.prototype is used instead.
  • After creating the object, it calls the function, providing the object as its this value.
  • If the return value of the called function, is a primitive, the object created internally is returned.
  • Otherwise, if an object is returned, the object created internally is lost.

An equivalent implementation of what the new operator does, can be expressed like this (assuming that the ECMAScript 5 Object.create method is available):

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

More Related Contents:

  1. What does the new keyword do under the hood?
  2. How do I remove a property from a JavaScript object?
  3. Is it possible to get the non-enumerable inherited property names of an object?
  4. Clone Object without reference javascript [duplicate]
  5. Adding custom properties to a function
  6. Create an empty object in JavaScript with {} or new Object()?
  7. JavaScript Extending Class
  8. Add a property to a JavaScript object using a variable as the name?
  9. Convert JS object to JSON string
  10. What is the difference between ( for… in ) and ( for… of ) statements?
  11. What does [object Object] mean?
  12. Converting an object to a string
  13. Preserving a reference to “this” in JavaScript prototype functions [duplicate]
  14. Benefits of prototypal inheritance over classical?
  15. Check if object value exists within a Javascript array of objects and if not add a new object to array
  16. How to copy JavaScript object to new variable NOT by reference? [duplicate]
  17. Problems with circular dependency and OOP in AngularJS
  18. Access object properties within object [duplicate]
  19. Render Object properties in React
  20. how to iterate over inner objects / property in an object
  21. What’s the difference between “{}” and “[]” while declaring a JavaScript array?
  22. How to change HTML Object element data attribute value in javascript
  23. How to check the depth of an object?
  24. When should I automatically create an object even if `new` is forgotten?
  25. Array.includes() to find object in array
  26. Split a Javascript class (ES6) over multiple files?
  27. Object referencing its own property on initialization [duplicate]
  28. Converting Array of Objects into Array of Arrays
  29. JavaScript: using constructor without operator ‘new’
  30. Find object having maximum value for the `id` property in an array of objects

Leave a Comment