Heim > Web-Frontend > js-Tutorial > Detaillierte Erläuterung der Verwendung und Nachteile der Vererbungsmethode der JavaScript-Prototypkette

Detaillierte Erläuterung der Verwendung und Nachteile der Vererbungsmethode der JavaScript-Prototypkette

伊谢尔伦
Freigeben: 2017-07-20 15:28:50
Original
3118 Leute haben es durchsucht

Prototyp-Kettenmethode

function Person(){
     this.name = 'Simon';
}
Person.prototype.say = function(){
     alert('My name is '+this.name);
}
function F2E(id){
     this.id = id;
     this.showId = function(){
          alert('Good morning,Sir,My work number is '+this.id);
     }
}
F2E.prototype = new Person();

var simon = new F2E(9527);
simon.say();
simon.showId();
alert(simon.hasOwnProperty('id')); //检查是否为自身属性
Nach dem Login kopieren

Befolgen Sie als Nächstes das obige Beispiel, um das folgende js-Prototyp-Kettenkonzept zu verstehen:

Die Prototyp-Kette kann wie folgt verstanden werden: Jedes in js hat ein verstecktes __proto__-Attribut eines instanziierten Objekts, das auf die Prototypmethode seiner Klasse verweist, und diese Prototypmethode kann einem anderen instanziierten Objekt zugewiesen werden seine Klasse. Es muss auf seine Klasse verweisen, um eine Kette zu bilden, das heißt, der Satz

F2E.prototype = new Person()
Nach dem Login kopieren

im vorherigen Code ist der Schlüssel. Wenn ein js-Objekt ein bestimmtes Attribut liest, sucht es zunächst nach seinen eigenen Attributen. Wenn keine Attribute vorhanden sind, sucht es dann nach den Attributen des Objekts in der Prototypenkette. Mit anderen Worten, die Prototypkettenmethode kann gemeinsam genutzt werden, wodurch das Problem des Objektidentitätswechsels und der Speicherverschwendung gelöst wird.

Lassen Sie uns über die Nachteile sprechen:
Die Nachteile liegen auf der Hand, dass bei der Instanziierung einer Unterklasse keine Parameter an die übergeordnete Klasse übergeben werden können, weshalb die Funktion Person vorhanden ist in diesem Beispiel verwendet () hat keine Parameter, wird aber direkt als this.name="Simon" geschrieben. Der folgende Code wird nicht die erwarteten Ergebnisse erzielen:

function Person(name){
     this.name = name;
}
Person.prototype.say = function(){
     alert('My name is '+this.name);
}
function F2E(name,id){
     this.id = id;
     this.showId = function(){
          alert('Good morning,Sir,My work number is '+this.id);
     }
}
F2E.prototype = new Person();

var simon = new F2E("Simon",9527);
simon.say();
simon.showId();

 
function Person(name){
     this.name = name;
}

Person.prototype.say = function(){
     alert('My name is '+this.name);
}

function F2E(name,id){
     this.id = id;
     this.showId = function(){
          alert('Good morning,Sir,My work number is '+this.id);
     }
}

F2E.prototype = new Person();  //此处无法进行传值,this.name或者name都不行,直接写F2E.prototype = new Person('wood')是可以的,但是这样的话simon.say()就变成了My name is wood

var simon = new F2E("Simon",9527);
simon.say();  //弹出 My name is undefined
simon.showId();
Nach dem Login kopieren

Lassen Sie uns abschließend die Vererbungsimplementierungsmethode zusammenfassen, die meiner Meinung nach besser ist. Mitgliedsvariablen verwenden Objektidentitätswechsel und Mitgliedsmethoden verwenden Prototypenverkettung folgt:

function Person(name){
     this.name = name;
}
Person.prototype.say = function(){
     alert('My name is '+this.name);
}
function F2E(name,id){
     Person.call(this,name);
     this.id = id;
}
F2E.prototype = new Person(); 
//此处注意一个细节,showId不能写在F2E.prototype = new Person();前面
F2E.prototype.showId = function(){
     alert('Good morning,Sir,My work number is '+this.id);
}
var simon = new F2E("Simon",9527);
simon.say();
simon.showId();
Nach dem Login kopieren


Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung und Nachteile der Vererbungsmethode der JavaScript-Prototypkette. 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