Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erläuterung der JavaScript-Prototypkette und der Prototypobjektattributinstanzen

Detaillierte Erläuterung der JavaScript-Prototypkette und der Prototypobjektattributinstanzen

伊谢尔伦
伊谢尔伦Original
2017-07-22 13:09:341504Durchsuche

Prototypenkette:

Jede Funktion kann ein Konstruktor werden, jede Funktion hat ein Prototypobjekt und jedes Prototypobjekt kann auch ein instanziiertes Objekt sein. Sie erstellen beispielsweise eine Funktion, die Spaß macht. Es ist die Instanziierung Objekt der Konstruktorfunktion, und das Prototypobjekt der Funktion ist das Instanzobjekt von Object. Fun verfügt also über ein _proto_-Attribut, das auf das Prototypobjekt der Funktion zugreifen kann. Es verfügt auch über ein _proto_-Attribut, das auf das Prototypobjekt des Objekts zugreifen kann. Prototypenkette. Jedes instanziierte Objekt kann auf die Methoden und Eigenschaften oberhalb der Kette zugreifen, sodass Spaß auf die Methoden und Eigenschaften unterhalb des Objektprototypobjekts zugreifen kann. Tatsächlich können alle Objekte auf das Prototypobjekt von Object zugreifen.

Zugriffsregeln für die Prototypenkette: Suchen Sie zuerst unter sich selbst und gehen Sie dann Ebene für Ebene in der Prototypenkette nach oben.

lautet wie folgt:

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

Prototypobjekt:

Unter dem Prototypobjekt können sich drei Attribute befinden:

1 Die Methoden und Attribute von der Prototypobjekt-2-Konstruktor 3_proto_attribute

Konstruktor: Konstruktorattribut, das Standardattribut des Prototypobjekts jeder Funktion, das auf die Funktion zeigt.

Jedes instanziierte Objekt selbst verfügt nicht über ein Konstruktorattribut. Es verfügt standardmäßig nur über ein _Proto_-Attribut, das zum Verbinden des Prototypobjekts verwendet wird, und hat keine direkte Verbindung mit dem Konstruktor selbst. Der Konstruktor befindet sich also auf dem Prototypobjekt, auf das zugegriffen wird. Wenn sich also der Konstruktor des Prototypobjekts ändert, ändert sich auch der Konstruktor des instanziierten Objekts. Wenn das Objekt selbst jedoch sowohl ein Prototypobjekt als auch ein instanziiertes Objekt ist, verfügt es über die Konstruktoreigenschaft und es besteht keine Notwendigkeit, vom Prototypobjekt aus darauf zuzugreifen. **

Sehen Sie sich das folgende Beispiel an, um zu überprüfen, was wir sagen:

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

Literale Methode definiert Prototyp:

Um Objektcode bequemer zu erstellen, können Sie Sie müssen diesen Code gesehen haben, bei dem es sich um die Literalmethode handelt:

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

Daher müssen wir beim Schreiben den Prototypzeiger korrigieren:

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

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der JavaScript-Prototypkette und der Prototypobjektattributinstanzen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn