JavaScript scholar must see "new"

When you use it new , you will:

1. Create a new empty object;
2. Bind this to the object;
3. Add a __proto__ new property named, and point to the prototype of the constructor ( prototype );
4. Return the this object.

If you don't have a particular understanding, then we'll explain it in detail in the next example. First, define a constructor Student that receives two parameters name and a age .

functionthis. Name =this. Age = Age ;}

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

var New Student (' John ', 26);

What the hell is going on here?

1. A new object is created, which we call it obj ;
2. this bind to obj , any reference to this is a obj reference to the right;
3. __proto__ The attribute is added to the Obj object. obj.__proto__will point to Student.prototype ;
4. The obj object is assigned a value to the first variable.

We can print the test by:

Console.log (first.name); // John Console.log (first.age); //  -

Let's take a closer look at __proto__ what's going on.

Prototypes (Prototype)

Each 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:

functionthis. Name =this. Age = Age ;}

To verify that each object has a prototype, enter:

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

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

var New Student (' Jeff ', 50);

According to the previous explanation, the second object pointed to has a __proto__ property, and should point to the Father prototype , let's test it:

second.__proto__ = = = Student.prototype//  true

Student.prototype.constructorWill point to the student constructor, and we'll print it out to see:

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

As if things are getting more and more complicated, let's describe them in figures:

StudentConstructor has a property called .prototype , and the property has a property that .constructor in turn points to the student construct. They make up a ring. When we use new to create a new object, each object has .__proto__ properties in turn pointing to it 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 are available.

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

Let's look at an example:

function () {console.log (This-age + ' years-old ');}

We have Student added a new function to the prototype sayInfo -so Student you can access the function using the student object you created.

second.sayinfo (); // Jeff is-years old

Create a new Student object and test again:

var New Student (' Tracy '); // If we print third now, we will only see the age and name of the two properties, // you can still access the Sayinfo function.  Third; // Student {name: "Tracy", age:15} third.sayinfo (); // Tracy is-years old

In JavaScript, first look at whether the current object owns the property, and if not, see if there is a property in the prototype. This rule persists until the property is successfully found or the top-level global object is not found and the return fails.

Inheritance allows you to use it directly without having to define toString() functions. Because toString() this function is built into Object the prototype. Each object we create is ultimately pointed Object.prototype to, so it can be called toString() . Of course, we can also rewrite this function:

var name =function() {   console.log (' not a good idea ');}}; Name.tostring (); // Not a good idea

The name object that is created first looks toString at whether it is owned, and if so, does not go to the prototype.

Original: https://hackernoon.com/javascript-for-beginners-the-new-operator-cee35beb669e

JavaScript scholar must see "new"