Summary of constructor and prototype in JS

Summary: The prototype property gives you the ability to add properties and methods to an object The constructor property returns a reference to the array function that created this object

Definition and usage The
prototype property gives you the ability to add properties and methods to an object

The constructor property returns an array of the functions that created this object Function reference

syntax
object.prototype.name=value

object.constructor
has a function thing in JS. Usually people call it function

function Person(name){ 
    console.log(name); 

Person('js'); //js
In Javascript language, the constructor property is specially designed for function, it exists in every function in the prototype property. This constructor saves a reference to the function.

JavaScript performs the following actions:

adds a prototype property (ie, the prototype object) to the function.

Adds an additional constructor property to the prototype object, and this property holds a reference to the function F

In this way, when we use function F as a custom constructor to create an object, the object instance will automatically save an attribute __proto__ of the prototype object pointing to its constructor (here is our custom constructor F), so we In each object instance, you can access all the properties and methods owned by the constructor's prototype, as if they were the instance's own.

Of course, the instance also has a constructor property (obtained from the prototype), at this time the role of the constructor It is obvious, because each object instance can access its constructor through the constrcutor object, see the following code:

var f = new F();  
alert(f.constructor === F);// output true  
alert(f.constructor === F.prototype.constructor);// output true
We can use this feature to complete the following things: Object type judgment

if(f.constructor === F) {  
// do sth with F  

In fact, the appearance of the constructor was originally used to judge the object type, but the properties of the constructor are volatile and unreliable.

We have a more secure and reliable way to determine: the instanceof operator.

The following code still returns true

if(f instanceof F) {
// do sth with F
}
Prototype chain inheritance, since the constructor exists on the prototype object, we can combine the constructor to find the most primitive constructor along the prototype chain, as follows:

function Person(name){ 
    this.name=name; 
    this.showMe=function( ){ 
        alert(this.name); 
    } 
}; 
var one=new Person('<a href="#" class='replace_word' title="JavaScript Knowledge Base" target='_blank'>JavaScript</a>' ); 
one.showMe(); //<a href="#" class='replace_word' title="JavaScript Knowledge Base" target='_blank'>javascript</a>
According to javascript, this Person defined by function It is an Object (object), and it is also a very special object. There is an important difference between the object defined by function and the object generated by the new operator: the object defined by function has a prototype attribute, which is generated by new The object does not have this prototype property

function a(c){
    this.b = c;
    this.d =function(){
        alert(this.b);
    }
}
var obj = new a('test');
console.log(typeof obj.prototype); //undefine
console.log(typeof a.prototype); //object
console.log(a.prototype);
console.log (obj.__proto__ === a.prototype) //true
The above example shows that the prototype property of the function points to another object, which is the prototype object

a.prototype contains 2 properties, one is the constructor, the other is is __proto__. This constructor is our constructor a, so what is __proto__?

This involves the concept of the prototype chain: each object will initialize a property inside it, which is __proto__. When we access the property of an object, if the property does not exist in the object, then he will go to __proto__ Find this property in the __proto__, and this __proto__ will have its own __proto__, so keep looking for it

. Here we analyze the new operator to do these things

var obj={}; That is to say, initialize an object obj .
obj.__proto__=a.prototype;
a.call(obj); That is to say, constructing obj can also be called initializing obj.
We will transform this example and make it a little more complicated.

function a(c){
    this.b = c;
    this.d =function(){
        console.log(this.b);
    }
}
a.prototype.test = function(){
    console.log(this.b);
}
var obj = function ( ){}
obj.prototype = new a('test');
obj.prototype.test1 =function(){
    console.log(22222);
}
var t = new obj('test');
t.test(); //console.log('test');
Let's analyze this process:

from var t = new obj('test'); we can get t.__proto__ = obj.prototype, but the above specifies obj.prototype =new a ('test'); You can look at

obj.prototype = p, p = new a('test'); p.__proto__ = a.prototype;
Then obj.prototype.__proto__ = a.prototype, t.__proto__.__proto__ = a.prototype can be obtained from t.__proto__ = obj.prototype, so the object t first finds out whether its own prototype has a test function, and finds no, the result Go to the upper level to find, that is, t.__proto__, that is, obj.prototype looks for the test function, but obj.prototype does not have this function, and then look up. That is, t.__proto__.__proto__ is found, because t.__proto__.__proto__ = a.prototype finds this method in a.prototype, and outputs alert('test').

From here, a conclusion can be drawn from the analysis of the prototype chain in js. The essence lies in proto

function a(c){
    this.b = c;
    this.d =function(){
        console.log(this.b);
    }
}
var obj = new a('test');
console.log(obj .constructor);//function a(){}
console.log(a.prototype.constructor);//function a(){}
According to the __proto__ mentioned above, let's analyze, first of all, obj does not have the attribute constructor , but obj.__proto__ = a.prototype;

Search in a.prototype, and a.prototype.constructor is just a, all the results of both are the same
http://click.aliyun.com/m/23731/

Guess you like

Origin http://10.200.1.11:23101/article/api/json?id=326640364&siteId=291194637