Explication détaillée de la chaîne de prototypes JavaScript et des instances d'attributs d'objet prototype

Chaîne de prototypes :

Chaque fonction peut devenir un constructeur, chaque fonction a un objet prototype, et chaque objet prototype peut aussi être un objet instancié. Par exemple, vous créez une fonction amusante, c'est l'instanciation. objet de la fonction constructeur, et l'objet prototype de la fonction est l'objet instance de l'objet. So fun a un attribut _proto_ qui peut accéder à l'objet prototype de la fonction. L'objet prototype de la fonction est également un objet instance. Il a également un attribut _proto_ qui peut accéder à l'objet prototype de l'objet. Par conséquent, via l'attribut _proto_, une ligne est formée. Chaîne prototype. Chaque objet instancié peut accéder aux méthodes et propriétés au-dessus de la chaîne, afin que Fun puisse accéder aux méthodes et propriétés sous l'objet prototype Object. En fait, tous les objets peuvent accéder à l’objet prototype d’Object.

Règles d'accès à la chaîne de prototypes : recherchez d'abord ci-dessous vous-même, puis remontez la chaîne de prototypes un niveau à la fois.

est la suivante :

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

Objet prototype :

Il peut y avoir trois attributs sous l'objet prototype :

1 Les méthodes et attributs de le constructeur de l'objet prototype 2 3_proto_attribute

constructor : attribut constructeur, l'attribut par défaut de l'objet prototype de chaque fonction, pointant vers la fonction.

Chaque objet instancié lui-même n'a pas d'attribut constructeur. Ils n'ont qu'un seul attribut _proto_ par défaut, qui est utilisé pour connecter l'objet prototype, et n'a pas de connexion directe avec le constructeur lui-même. Son constructeur se trouve donc sur l'objet prototype accédé. Ainsi, lorsque le constructeur de l'objet prototype change, le constructeur de l'objet instancié changera également. Mais si l'objet lui-même est à la fois un objet prototype et un objet instancié, il aura la propriété constructeur et il n'est pas nécessaire d'y accéder depuis l'objet prototype. **

Regardez l'exemple suivant pour vérifier ce que nous avons dit :

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

La méthode littérale définit le prototype :

Afin de créer du code objet plus facilement, vous doit avoir vu un tel code, qui est la méthode littérale :

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 也变了，验证了它是访问的原型对象上的

Par conséquent, nous devons corriger le pointeur du prototype lors de l'écriture :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!