The constructor

We often say new an object, which means that with new, we can create an object. So what else is going on?

Let’s start with a code

function Fun(name){
	this.name=name;
}
Fun.prototype={
	constructor:Fun,
    say(){
    	console.log(this)
    }
}
let a =new Fun('liudehua')
Copy the code

In the code above, I set a constructor Fun, then set the prototype object of Fun, and finally make new produce an instance object A.

The above code does the following altogether:

1. Create a constructor

2, new an instance object

3. The instance object gets the properties in the constructor

Instance object A can call methods in the constructor prototype.

To understand the above, we first need to understand prototypes, as this is crucial in JS.

Prototype matching

We need to understand the basic structure of the prototype diagram

  • When I create the constructor Fun, it actually produces two things, namelyFun.prototypeandFun.__proto__.

Fun’s __proto__ refers to Function’s prototype, which is the prototype of the object’s __proto__ constructor.

There’s one for every function createdprototypeWe know Fun’s by printingprototypeWhat it contains.

As you can see, there is a say method inside. This method is common, and any object that uses the constructor new can use Prototype’s method.

Now let’s look at the structure of object AContinue according to the JS axiomThe object's __proto__= = =Prototype of its constructorIt can be concluded that:a.__proto__ === Fun.prototype

So we know that when new, the __proto__ of the created object will be pointed to its prototype constructor by the JS default.

This points to the

With the new keyword, you also point this in the constructor to the newly created object

You can think of it this way

var a=new Fun("liudehua")
newafter//
function Fun(name){
	newObj={}
	newObj.name=name;
    return newObj
}
Copy the code

New just does some extra processing to Fun after the call, and the constructor is really just a constructor call to the function. Call we already know what that is, construct is new binds the newly created object to this inside Fun.

conclusion

We can figure out what happens when we pass a new constructor

  • An object is created
  • Executes the constructor and sets the property method to the object
  • Point this to the object
  • The object of__proto__With the function of thePrototypeDo the corresponding

Do not simulate a constructor through new

Based on the above conclusion, we can simulate the constructor’s new and divide the task into the following parts:

1. Return an object

2. Let the object get the constructor properties

3, the object’s __proto__ corresponds to the function’s ptorotype

4. Simulate this

function fun(name){ let obj={ name:name }; obj.__proto__=fun.prototype return obj } fun.prototype={ constructor:fun, Say (futureObj){console.log(futureObj)},}Copy the code

The above code returns an object and has been set so that obj’s __proto__ points to Fun’s prototype.

  • Because of the resetprototypeSo we’re going to have to addconstructor
  • FutureObj replaces this by passing this as an argument, so we need to use the say() method.
Let a=fun('liudehua') a.say(a) // use this method instead of thisCopy the code

Optimize the code

We can use object.create () to create a new Object and give it ptotoType

Function fun(name){let obj= object.create (fun.prototype) //obj = name Assign (obj,{name:name}) return obj}; // Assign (obj,{name:name}) return obj}; fun.prototype={ constructor:fun, say(futureObj){ console.log(futureObj) }, }Copy the code

Reference links:

JS prototype chain

JS world with memory