Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to achieve new in JS". In daily operation, I believe many people have doubts about how to achieve new in JS. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the questions of "how to achieve new in JS". Next, please follow the editor to study!

Introduction to 1 new operator

MDN document: the new operator creates an instance of a user-defined object type or of a built-in object with a constructor.

Class Person {constructor (name) {this.name = name;}} / / create an instance of a custom object type const person = new Person ('Xiaoming') / / create an instance of a built-in object with constructor const date = new Date ()

What new does: create an instance of an object

What on earth did new do?

As mentioned above, the role of new is to create instances of objects, so how exactly does it create instances, and what does it do internally?

Take new Person () as an example, when it is executed, the following things happen:

Create an empty simple JS object

Const obj = {}

Add the property _ _ proto__, to this object and link it to the prototype object of the constructor

Obj.__proto__ = Person.prototype

Call the constructor Person and bind this to the newly created object obj

Person.apply (obj)

If the constructor does not explicitly return an object, it returns the newly created object, obj

3 simulate the implementation of new operator

As mentioned above, the new operator does these four things, so let's use functions to simulate the implementation of new (interview handwritten code) according to these four steps.

Const _ new = function (constructor,... args) {const obj = {} obj.__proto__ = constructor.prototype const res = constructor.apply (obj, args) / / this step will explain return res instanceof Object in detail in the "supplement"? Res: obj}

The code is very simple, just follow the above four steps and write it step by step.

4 supplement

ES5 provides the Object.create method, which creates an object and points the _ _ proto__ property of the new object to an existing object.

So we can use this method to merge 1 and 2 steps.

Const obj = Object.create (constructor.prototype) / / equivalent to const obj = {} obj.__proto__ = constructor.prototype

For step 4, explain again.

If the constructor does not have an explicit return (usually), then person is the newly created object obj

If the constructor does not return an object, such as 1, "abc", then person is still the newly created object obj

Function Person () {... Return 1}

If the constructor explicitly returns an object, such as {}, function () {}

Then person is not the newly created object obj, but the object of explicit return

Function Person () {/ / function is also an object return function () {}}

So our last code in the _ new function is:

Return res instanceof Object? Res: obj

Note: the parameter passed in by the simulated function _ new can only be a constructor, not a class.

Class Animal {...} _ new (Animal) / / will report an error: the Class constructor Animal cannot be invoked without 'new'// class can only be created through new, so the study on "how to implement new in JS" is over. I hope you can solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.