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

Detaillierte Erklärung des JS-Prototyps

小云云
小云云Original
2018-02-26 13:43:361468Durchsuche

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
  • 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] }
  • Alle Funktionen haben ein Prototypattribut (expliziten Prototyp), und der Attributwert ist auch ein normales Objekt

console.log(fn.prototype)
//{constructor: ƒ}
  • 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是一个构造函数
  • 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中找

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中屏蔽了来自原型的属性
     //但在这里建议大家还是加上这个判断,保证程序的健壮性(程序对于规范要求以外的输入情况的处理能力)

    }
}

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!

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