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

Most people do not understand the knowledge points of this article "what are the functions of new in JavaScript?", so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "what are the functions of new in JavaScript" article.

Preface

What is new?

The new operator creates an instance of a user-defined object type or one of the built-in object types with a constructor.

Just looking at the definition is still a bit obscure, just look at a specific example to understand the functions of new implementation in JavaScript.

For example, you can't lose weight in real life, but you must stay slim on the Internet function Thin_User (name, age) {this.name = name; this.age = age;} Thin_User.prototype.eatToMuch = function () {/ / daydream, leaving fat tears console.log ('i eat so much, but I\'m very thinning tears');} Thin_User.prototype.isThin = true Const xiaobao = new Thin_User ('zcxiaobao', 18); console.log (xiaobao.name); / / zcxiaobaoconsole.log (xiaobao.age); / / 18console.log (xiaobao.isThin); / / true// i eat so much, but i'm very thinkers thank you Xiaobao.eatToMuch ()

From the above example, we can find that xiaobao can:

Access to properties in the constructor Thin_User

Access to properties in Thin_User.prototype

To put it more bluntly, new does these things:

Created an empty object with _ _ proto__- > Thin_User.prototype of the object

Execute the constructor and point the this to the new object

Return to new object

Supplementary explanation

Because new is a keyword, we can't override it like the higher-order methods of analog arrays, so we write a function createObject to simulate the effect of new. The specific uses are as follows:

Function Thin_User (name, age) {} const U1 = new Thin_user (...) const U2 = createObject (Thin_User,... a\) preliminary simulation

Based on the above analysis, the rough steps for createObject writing are:

Create a new object obj

Set obj.__proto__- > constructor.prototype (but JavaScript does not recommend directly modifying the _ _ proto__ property. It provides a setPrototypeOf method to modify the prototype)

Using constructor.call/apply (obj,...), add attributes to the obj

Return to obj

_ _ proto__ and prototype, you can see JavaScript's thorough understanding of prototypes and prototype chains.

Call/apply, you can watch JavaScript's hand tear call and apply.

After learning this, we can write the first version of the code:

Function createObject (Con) {/ / create a new object obj / / var obj = {}; you can also var obj = Object.create (null); / / prototype obj.__proto__-> constructor / / (not recommended) obj.__proto__ = Con.prototype Object.setPrototypeOf (obj, Con.prototype); / / execute constructor Con.apply (obj, [] .slice.call (arguments, 1)) / / return new object return obj;} return value effect

As we all know, a function has a return value, so if the constructor has a return value, what is the final result returned after executing new?

The return value is the basic type

Assuming that the return value of the constructor is a basic type, let's take a look at the final return:

Function Thin_User (name, age) {this.name = name; this.age = age; return'i will keep thin forever';} Thin_User.prototype.eatToMuch = function () {console.log ('i eat so much, but I\'m very thinning examples');} Thin_User.prototype.isThin = true;const xiaobao = new Thin_User ('zcxiaobao', 18); console.log (xiaobao.name); / / zcxiaobaoconsole.log (xiaobao.age) / / 18console.log (xiaobao.isThin); / / true// i eat so much, but i'm very thinkable thanks Xiaobao.eatToMuch ()

The final return result seems to be subject to any interference. Won't the constructor handle the return value?

Don't worry, let's go on to test the situation where the return value is an object.

The return value is function Thin_User (name, age) {this.name = name; this.age = age; return {name: name, age: age * 10, fat: true}} Thin_User.prototype.eatToMuch = function () {/ / daydreaming, leaving console.log ('i eat so much, but I\'m very thinning tears') } Thin_User.prototype.isThin = true;const xiaobao = new Thin_User ('zcxiaobao', 18); / / Error: xiaobao.eatToMuch is not a functionxiaobao.eatToMuch ()

When I execute eatToMuch, the console reports an error directly, and there is no current function, so I print the xiaobao object:

It is found that the age of the xiaobao object has changed and the fat property has been added, just like the return value of the constructor.

After reading these two examples, you can basically sort out the situation where the constructor has a return value: when the constructor returns an object, it returns the object directly.

Final simulation function createObject (Con) {/ / create a new object obj / / var obj = {}; you can also var obj = Object.create (null); / / prototype obj.__proto__-> constructor / / (not recommended) obj.__proto__ = Con.prototype Object.setPrototypeOf (obj, Con.prototype) / / execute the constructor and accept the return value const ret = Con.apply (obj, [] .slice.call (arguments, 1)); / / if the constructor returns an object, return the object directly / / otherwise return obj return typeof (ret) = = 'object'? Ret: obj;} above is about the content of this article on "what are the functions of new in JavaScript?" I believe everyone has a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

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.