Detailed explanation of JavaScript prototype chain and prototype object attribute instances

Prototype chain:

Each function can become a constructor, each function has a prototype object, and each prototype object can also be an instantiated object. For example, you create a function fun, It is the instantiation object of the constructor function, and the prototype object of function is the instance object of Object. So fun has a _proto_ attribute that can access the function's prototype object. The function prototype object is also an instance object. It also has a _proto_ attribute that can access the Object's prototype object. Therefore, through the _proto_ attribute, a line is formed. Prototype chain. Each instantiated object can access the methods and properties above the chain, so fun can access the methods and properties under the Object prototype object. In fact, all objects can access the prototype object of Object.

Access rules for the prototype chain: first search below yourself, and then go up the prototype chain level by level.

are as follows:

function Aaa(){}
Aaa.prototype.num = 3;
var a1 = new Aaa();
a1.num =10;
alert(a1.num); //10

Prototype object:

There may be three attributes under the prototype object:

1 Methods and attributes carried by the prototype object 2 constructor 3_proto_ Attribute

constructor: Constructor attribute, the default attribute of each function's prototype object, points to the function.

Each instantiated object itself does not have a constructor attribute. There is only one _proto_ attribute by default, which is used to connect the prototype object, and has no direct connection with the constructor itself. So its constructor is on the prototype object accessed. So when the constructor of the prototype object changes, the constructor of the instantiated object will also change. But if the object itself is both a prototype object and an instantiated object, it will have the constructor property and there is no need to access it from the prototype object. **

Look at the following example to verify what we said:

function CreatePerson(name){
 this.name = name;
}
CreatePerson.prototype.showName = function(){
 console.log(this.name);
 };
var p1 =new CreatePerson('haha');
p1.showName();
console.log(p1.constructor); // CreatePerson 来自CreatePerson.prototype
console.log(CreatePerson.prototype);
// {showName:{},constructor:CreatePerson,__proto__:Object.prototype}
//可见，原型对象保存了
  1 自身添加的方法，
  2 构造函数constructor
  3 _proto_(和上一层构造函数原型对象的连接)
console.log(CreatePerson.prototype.__proto__===Object.prototype);
// true 这个原型对象本身又是object的实例化对象，所有_proto_指向Object的原型对象
console.log(CreatePerson.prototype.__proto__===Object);
// false 可见是和构造函数下原型对象的连接，不是构造函数
console.log(CreatePerson.prototype.constructor);
//CreatePerson CreatePerson.prototype是Object实例化对象,也是原型对象，所以自身拥有constructor属性
console.log(Object.prototype.__proto__);
// null 原型链的终点是null
console.log(CreatePerson.__proto__); //function.prototype
// CreatePerson本身既是构造函数又是function的实例化对象，拥有_proto_属性，指向function的原型对象
console.log(CreatePerson.constructor);
// function 继承自function.prototype
console.log(CreatePerson.prototype instanceof CreatePerson )
//验证是否在一条原型链上 false

Literal method defines prototype:

In order to create object code more conveniently, you must see Passing such code is the literal method:

function Aaa(){}
Aaa.prototype = {
 showName:function(){},
 showSex:function(){}
};
var a1 = new Aaa();
console.log(Aaa.prototype);
//{showName:function(){},_proto_}
//你会发现constructor不见了，因为这种方式相当于重新赋值了Aaa.prototype
console.log(Aaa.prototype.constructor);
//Object 因为自身没有了constructor属性，就去上级原型对象找，找到了Object
console.log(a1.constructor );
//Object 也变了，验证了它是访问的原型对象上的

Therefore, we need to correct the prototype pointer when writing:

function Aaa(){}
Aaa.prototype = {
constructor:Aaa,
num1:function(){alert(10);}
}
var a1 = new Aaa();
a1.constructor // Aaa

The above is the detailed content of Detailed explanation of JavaScript prototype chain and prototype object attribute instances. For more information, please follow other related articles on the PHP Chinese website!