The definition of new on MDN is: the new operator creates an instance of a user-defined object type or of a built-in object with a constructor

In JavaScript,new is a keyword that creates a binding to this. In object-oriented languages, the new keyword is always used to instantiate a class, as in Dart:

class Person {}
var p = new Person()
Copy the code

In JavaScript, there is no such thing as a class (ES6 classes are just syntactic sugar), but we can generate objects by simply using functions. We use a constructor to create an object. The constructor is no different from a normal function except that it is called with the new keyword. So I think it’s probably more acceptable to use constructor calls instead of constructors

function Perons(){}
let p = new Perons()
console.log(p)  // Perons {}
Copy the code

So what did new do?

  • Call a function
  • Automatically creates a new object
  • Bind the created object to this
  • If the constructor does not return an explicit value, it implicitly returns this
let p = new Perons()
Copy the code

When running this code, the internal execution looks like this:

// 1. Create an empty object
var obj = new Object(a)// 2. Assign the empty object's prototype to the constructor's prototype
obj.__proto__ = Perons.prototype
// 3. Change this inside the constructor to refer to the newly created object
Perons.call(obj)
// 4. Return the object
return obj
Copy the code

Let’s look at step 2, which assigns the prototype of the empty object to the prototype of the constructor, so that properties and methods on the constructor prototype can be called by the object obj. Let’s look at the following code:

function Person(name){
  this.name = name
}
Person.prototype.gender = 'male'
Person.prototype.action = function(){
  console.log('breath')}let p = new Person('zhangsan')
console.log(p.__proto__ === Person.prototype)  // true  
console.log(p.__proto__.__proto__ === Object.prototype)  // true
// The prototype of the created object is assigned to the prototype of the constructor
console.log(p.name)  // zhangsan
console.log(p.gender)  // male
p.action()  // breath

Copy the code

In step 4 above, if the constructor explicitly sets the return value and the return value is an object, the object is returned. If an object is not explicitly returned. Step 4 implicitly returns the created object (obj). Null is an exception, although we consider null to be an object, returning NULL is equivalent to no explicit return. If there is no return value:

function Person(name){
  this.name = name
}
let p = new Person('zhangsan')
console.log(p)  // Person {name: "zhangsan"}
Copy the code

Return an object:

function Person2(name){
  this.name = name 
  return {
    age:12}}let p2 = new Person2('zhangsan')
console.log(p2)  // {age: 12}
Copy the code

Return a non-object:

function Person3(name){
  this.name = name
  return Awesome!
}
let p3 = new Person3('zhangsan')
console.log(p3)  // Person3 {name: "zhangsan"}
Copy the code

Return null:

function Person4(name){
  this.name = name
  return null
}
let p4 = new Person4('zhangsan')
console.log(p4)  // Person4 {name: "zhangsan"}
Copy the code

Summary: What does new do? Here I quote from MDN

  • Create an empty simple JavaScript object (that is {})
  • Link this object (that is, set its constructor) to another object
  • Use the new object created in Step 1 as the context for this
  • If the function does not return an object, this is returned