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

This article is to share with you about the use of new in JavaScript. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

In order to ensure readability, this paper adopts free translation rather than literal translation.

When you use new, it will:

Create a new empty object

Bind this to this object

Add a new property named _ _ proto__ and point to the prototype of the constructor (prototype)

Returns the this object.

If you don't understand it in particular, then we will explain it in detail with examples. First define a constructor, Student, that takes two parameters, name and age.

Function Student (name, age) {this.name = name; this.age = age;}

Now let's use new to create a new object:

Var first = new Student ('John', 26)

What on earth happened?

A new object is created. We call it obj.

This is bound to obj, and any reference to this is a reference to obj

The _ _ proto__ attribute is added to the obj object. Obj.__proto__ will point to Student.prototype.

The obj object is assigned to the first variable.

We can pass the print test:

Console.log (first.name); / / Johnconsole.log (first.age); / / 26

Let's take a closer look at what's going on with _ _ proto__.

Prototype (Prototype)

Every JavaScript object has a prototype. All objects inherit objects and properties from its prototype.

Open the browser developer control panel (Windows: Ctrl + Shift + J) (Mac: Cmd + Option + J) and enter the previously defined Student function:

Function Student (name, age) {this.name = name; this.age = age;}

To prove that every object has a prototype, type:

Student.prototype;// Object {...}

You will see that an object is returned. Now let's try to define a new object:

Var second = new Student ('Jeff', 50)

According to the previous explanation, the object second points to will have a _ _ proto__ attribute, and it should point to the father's prototype. Let's test it:

Second.__proto__ = Student.prototype// true

Student.prototype.constructor will point to the constructor of Student, and let's print it out to see:

Student.prototype.constructor;// function Student (name, age) {/ / this.name = name;// this.age = age;//}

It seems that things are getting more and more complicated, let's use a picture to describe it:

The constructor of Student has a property called .prototype, which in turn has a property of .constructor that points to the Student construct. They form a ring. When we use new to create a new object, each object has a. _ _ proto__ attribute that points back to Student.prototype.

This design is important for inheritance. Because the prototype object is shared by all objects created by the constructor. When we add functions and properties to the prototype object, all other objects can be used.

In this article, we have only created two Student objects, and if we create 20000, putting properties and functions on the prototype instead of each object will save a lot of storage and computing resources.

Let's look at an example:

Student.prototype.sayInfo = function () {console.log (this.name +'is'+ this.age + 'years old');}

We added a new function, sayInfo, to the prototype of Student-- so any student object created using Student can access this function.

Second.sayInfo (); / / Jeff is 50 years old

Create a new student object and test again:

Var third = new Student ('Tracy', 15); / / if we print third now, we can still access the sayInfo function, even though we will only see the age and first name attributes. Third;// Student {name: "Tracy", age: 15} third.sayInfo (); / / Tracy is 15 years old

In JavaScript, first check to see if the current object has the property; if not, see if the property is in the prototype. This rule continues until the property is successfully found or the top-level global object is not found and returns a failure.

Inheritance allows you to use the toString () function without defining it. Because the function toString () is built into the prototype of Object. Every object we create ends up pointing to Object.prototype, so we can call toString (). Of course, we can also rewrite this function:

Var name = {toString: function () {console.log ('Not a good idea');}}; name.toString (); / / Not a good idea

The created name object first checks to see if it has a toString, and if so, it does not look in the prototype.

Thank you for reading! This is the end of this article on "what is the use of new in JavaScript?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

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.