Constructor and prototype

In the process of using JavaScript, the concepts of constructor and prototype are very important, and in-depth understanding of these two concepts is very important to understand some of the core concepts of JS.

When we define a function, the function itself defaults to a prototype property when the function is defined, and we do not have the prototype property when we use the new operator to generate an object. Let's look at an example to illustrate the

Press CTRL + C to copy the code<textarea></textarea>Press CTRL + C to copy the code

As you can see from the above example, the prototype property of the function points to an object, which is the prototype object, see

A.prototype contains 2 properties, one is constructor, the other is __proto__

This constructor is our constructor a, which is easy to understand.

So what is __proto__?

This involves the concept of a prototype chain:

Each object initializes a property inside it, that is, __proto__, when we access the property of an object, if the object does not exist inside this property, then he will go to __proto__ to find this attribute, this __proto__ will have their own __proto__, So I keep looking for it.

See Mozzlia's description of it

When a object is created, it is __proto__ set to constructing function's property prototype . For example would var fred = new Employee(); cause fred.__proto__ = Employee.prototype; .

This was used at runtime-to-look-up properties which was not declared in the object directly. e.g. when are fred.doSomething() executed and fred does not contain a doSomething , are fred.__proto__ checked, which points to Employee.prototype , which contains a c9/>, i.e. is fred.__proto__.doSomething() invoked.

Note __proto__ that was a property of the instances, whereas was a property of prototype their constructor functions.

Believe it or not, let's take a look at the picture.

In the back if add alert (obj.__proto__ = = = A.prototype)//true

In the same vein, here we analyze what the new operator did.

1. var obj={}; That is, initialize an object, obj.
2. Obj.__proto__=a.prototype;
3. A.call (obj), that is, to construct obj, which can also be called initialization of obj.

Let's make this example a little bit more complicated.

function A (c) {
    this.b = C;
    THIS.D =function () {
        alert (this.b);
    }
}
A.prototype.test = function () {
    alert (this.b);
}
var obj = function () {}
Obj.prototype = new A (' test ');
Obj.prototype.test1 =function () {
    alert (22222);
}
var t = new obj (' Test ');
T.test ();//alert (' Test ');

Let's analyze the process.

by var t = new obj (' Test '), we can get t.__proto__ = Obj.prototype, but above specify Obj.prototype =new a (' test ');

Obj.prototype = p, p = new A (' test '); p.__proto__ = A.prototype;

Then obj.prototype.__proto__ = A.prototype, by t.__proto__ = Obj.prototype can be obtained t.__proto__.__proto__ = A.prototype,

So the object T first to find itself is prototype whether there is a test function, found no, the results to the higher level, that is, t.__proto__, that is, Obj.prototype to find the test function, but Obj.prototype also do not have this function, and then look up. That

t.__proto__.__proto__, because t.__proto__.__proto__ = A.prototype found this method in A.prototype, output the alert (' Test ')

From here can be analyzed to draw a conclusion,the essence of JS Zhongyuan chain is __proto__

And look at a column.

function A (c) {
    this.b = C;
    THIS.D =function () {
        alert (this.b);
    }
}
var obj  = new A (' test ');
alert (obj.constructor);//function A () {}
alert (a.prototype.constructor);//function A () {}

According to the above-mentioned __proto__ we analyze, first obj is not constructor this property, but obj.__proto__ = A.prototype;

A.prototype, and A.prototype.constructor is a, the result of both is one.

Welcome everyone to shoot bricks!!

Constructor and prototype