Heim > Web-Frontend > js-Tutorial > Detaillierte Erklärung des JS-Prototyps

Detaillierte Erklärung des JS-Prototyps

小云云
Freigeben: 2018-02-26 13:43:36
Original
1493 Leute haben es durchsucht

Dieser Artikel gibt Ihnen hauptsächlich eine detaillierte Erklärung des JS-Prototyps und der 5 Regeln des Prototyps. Ich hoffe, dieser Artikel kann Ihnen helfen.

  • Alle Referenztypen (Arrays, Objekte, Funktionen) haben Objekteigenschaften, also frei erweiterbare Attribute (außer „null“)

var obj ={};obj.a=100//100var arr=[];arr.a=100//100function fn(){}
fn.a=100//100
Nach dem Login kopieren
  • Alle Anwendungstypen haben ein Proto-Attribut (impliziter Prototyp), und der Attributwert ist ein gewöhnliches Objekt

console.log(obj.__proto__);//{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}console.log(arr.__proto__);//[constructor: ƒ, concat: ƒ, pop: ƒ, push: ƒ, shift: ƒ, …]console.log(fn.__proto__);
//ƒ () { [native code] }
Nach dem Login kopieren
  • Alle Funktionen haben ein Prototypattribut (expliziten Prototyp), und der Attributwert ist auch ein normales Objekt

console.log(fn.prototype)
//{constructor: ƒ}
Nach dem Login kopieren
  • Das proto Attributwert aller Referenztypen zeigt auf den Prototyp-Attributwert seines Konstruktors (d. h. der implizite Prototyp aller Referenztypen zeigt auf den expliziten Prototyp seines Konstruktors)

console.log(obj.__proto__===Object.prototype);  //true//Object是一个构造函数
Nach dem Login kopieren
  • Wenn Sie versuchen, ein bestimmtes Attribut eines Objekts abzurufen und das Objekt selbst dieses Attribut nicht hat, wird nach seinem Proto (d. h. seinem Konstruktor) gesucht

/*测试*/function Foo(name,age){
    this.name = name;
}
Foo.prototype.alertName = function(){//由于Foo.prototype本身也是一个对象,而对象是可以自由扩展属性的
    alert(this.name);
}var f = new Foo('zhan');
f.printName = function(){
    console.log(this.name);
}
f.printName();//zhan 可以直接在这个对象中找到这个属性f.alertName();//alert弹出zhan 这时候在这个对象本身找不到这个属性,去Foo.prototype找,得到值/*******************************//*之前在牛可网碰到到一道面试题*/var A = {n:4399};var B = function(){
    this.n = 9999;
}var C = function(){
    var n = 8888;
}
B.prototype = A;
C.prototype = A;var b = new B();var c = new C();
A.n++;
console.log(b.n);//9999console.log(c.n);//4400//先从他的实例中找,找不到去它的构造函数的prototype中找
Nach dem Login kopieren

dies

für den obigen Testcode zeigt immer auf das Objekt selbst, sodass beim Ausführen von f.alertName
Zhan

angezeigt werden kann

Die Attribute der Schleife selbst

Wenn Sie für den obigen Testcode eine Schleife durchführen, können Sie das Namensattribut, das AlertName-Attribut und das PrintName-Attribut finden. Aber im Allgemeinen hoffe ich nur, das zu erhalten Durch das Objekt selbst definierte Attribute, wie zum Beispiel: Namensattribut und PrintName-Attribut

var itemfor(item in f){    if(f.hasOwnProperty(item)){
        console.log(item);     // 高级浏览器已经在forin中屏蔽了来自原型的属性
     //但在这里建议大家还是加上这个判断,保证程序的健壮性(程序对于规范要求以外的输入情况的处理能力)

    }
}
Nach dem Login kopieren

Verwandte Empfehlungen:

Instanzanalyse js Prototyp und Call()

Vier Schritte der JS-Prototypvererbung

7 empfohlene Artikel über die JS-Prototypkette

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung des JS-Prototyps. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage