In order to better understand the content behind, let’s first understand some pre-knowledge!

The difference between a constructor and a normal function

Constructor:

A function that initializes an object and is used with new is called a constructor

Common function

As a function, in addition to the constructor is the ordinary function, detailed we use more skilled than I

The difference between a constructor and a normal function

What’s the difference?

No difference in grammar!! The only difference is the difference in use, how to use the difference between the two? There is a new keyword in front of the function, that is the constructor, just remember that!

How do ordinary functions work? I will not play a broadsword in front of Guan Gong

Let’s see how constructors are used.

function Person(name, age){
    this.name = "codingkid";
    this.age = 18;
}
var person = new Person();
Copy the code

I’m sure you’ve all used it, and the new keyword exists in many other languages, but what’s going on inside?

  1. Create an empty object
var person = {}
Copy the code
  1. This refers to the object P
Person.call(p)
Copy the code

The use of “call” is not difficult, please refer to my article

  1. In addition to the variables defined in the Person function, Person also inherits the prototype of Person(), which means you can use the variables and methods of the prototype in Person(). There are many articles on prototypes and prototype chains, such as this one
person._proto_ = Person.prototype
Copy the code
  1. Execute the code inside the constructor Person()

Constructors have more operations than normal functions, and these operations are due to the new keyword

But there are a few questions to ponder

  1. Right, the first question is about this. After doing that, this binds to the Person object in the constructor, but ordinary functions don’t. In fact, functions are essentially properties of an object, and functions declared globally omit the window, which is just a property of window, So the call points to the window, and functions declared on other objects can do the same.
  2. The constructor returns a new object, so it does not use a return statement in the constructor. If it does use a return statement, the value of the return statement varies depending on the type of the value. Will take effect, otherwise will fail, still returns the claimed object. Return of normal functions should be used normally.

The above process is kind of meeting new people, meeting new people

Implement new

In fact, after the encounter, the realization is relatively simple, do not feel afraid (god see words when it is said to myself), we still use the above chestnut, we must thoroughly eat this chestnut, and then digest, and then discard the dross, how to abandon depends on your own

function Person(name, age){
    this.name = "codingkid";
    this.age = 18;
}
// var person = new Person();
// We implement another new ourselves
var person = ourNew(Person(),name,age)
Copy the code

We just need to make ourNew realize the function of new, which is different from the official new. That is just a difference in grammar sugar, which does not affect our understanding of new. How to write ourNew

function ourNew(context) {	
    // 1. Create an empty object
    var person = new Object(a);// 2. Fetch the constructor
    var constructor = [].shift.call(arguments);
    // 3. Inherit the constructor prototype
    person._proto_ = constructor.prototype;
    // 4. Call the constructor for the newly created object to generate internal properties
    constructor.apply(person, arguments);
    // 5. Return the object
    return person;
}
Copy the code

Pat yourself on the back for reading this, but don’t worry, we still have some work to do, remember the return value problem! Take a look at this version of the code

function ourNew(context) {	
    // 1. Create an empty object
    var person = new Object(a);// 2. Fetch the constructor, assuming it has a return value
    var constructor = [].shift.call(arguments);
    // 3. Inherit the constructor prototype
    person._proto_ = constructor.prototype;
    // 4. Call the constructor for the newly created object, generating the internal attributes, while the constructor returns the value it wants to return at run time
    var somethingReturned = constructor.apply(person, arguments);
    // 5. Return the object
    return typeof somethingReturnedperson === 'object' ? somethingReturned : person;
}
Copy the code

Perfect ！！！！！

More and more

Reference documentation

Segmentfault.com/a/119000000…

Github.com/mqyqingfeng…

This child refuels ！！！！！！！ Grown-ups praise and encourage it!