Dieses Mal werde ich Ihnen die Schritte zur Verwendung von js-Prototypobjekten und die Vorsichtsmaßnahmen für die Verwendung von js-Prototypobjekten ausführlich erläutern. Das Folgende ist ein praktischer Fall . Werfen wir einen Blick darauf.
Beginnen wir mit einem einfachenKonstruktor+Prototyp-Objekt-Applet
function CreateObj( uName, uAge ) {
this.userName = uName;
this.userAge = uAge;
}
CreateObj.prototype.showUserName = function () {
return this.userName;
}
CreateObj.prototype.showUserAge = function () {
return this.userAge;
}kann den gleichen Effekt erzielen:
Diese Art des Schreibens des Prototypobjekts schreibt jedoch das Standardprototypobjekt von CreateObj neu. Das erste Problem besteht darin, dass der Konstruktor nicht mehr auf CreateObj verweist.CreateObj.prototype = {
showUserAge : function(){
return this.userAge;
},
showUserName : function(){
return this.userName;
},
}
var obj1 = new CreateObj( 'ghostwu', 22 );
var obj2 = new CreateObj( '卫庄', 24 );
console.log( obj1.showUserName(), obj1.showUserAge() ); //ghostwu 22
console.log( obj2.showUserName(), obj2.showUserAge() ); //卫庄 24Vor dem Umschreiben verweist der Konstruktor auf CreateObj
Nach dem Umschreiben zeigt der Konstruktor auffunction CreateObj( uName, uAge ) {
this.userName = uName;
this.userAge = uAge;
}
CreateObj.prototype.showUserName = function () {
return this.userName;
}
CreateObj.prototype.showUserAge = function () {
return this.userAge;
}
console.log( CreateObj.prototype.constructor === CreateObj ); //trueCreateObj.prototype = {
showUserAge : function(){
return this.userAge;
},
showUserName : function(){
return this.userName;
},
}
console.log( CreateObj.prototype.constructor === CreateObj ); //false
console.log( CreateObj.prototype.constructor === Object ); //trueDie Programme, die wir zuvor geschrieben haben, haben grundsätzlich die Methoden für das Prototypobjekt (Prototyp) erweitert und dann das Objekt instanziiert. Wir instanziieren zuerst das Objekt und erweitern dann die Funktion für das Prototypobjekt (Prototyp). > Können Instanzobjekte erweiterte Methoden normal aufrufen?
Es kann normal aufgerufen werden, aber wenn das Prototypobjekt überschrieben wird, kann es nichtfunction CreateObj( uName, uAge ) {
this.userName = uName;
this.userAge = uAge;
}
var obj1 = new CreateObj( 'ghostwu', 22 );
CreateObj.prototype.showUserName = function(){
return this.userName;
}
console.log( obj1.showUserName() ); //ghostwuproto
der Instanz nicht auf das überschriebene Prototypobjekt, sodass kein weiteres Problem aufgerufen werden kann Seien Sie vorsichtig, da mehrere Instanzen das Prototypobjekt gemeinsam nutzen. Solange eine Instanz den Wert des Referenztyps ändert, erhalten alle anderen Instanzen die geänderten Ergebnisse.function CreateObj( uName, uAge ) {
this.userName = uName;
this.userAge = uAge;
}
var obj1 = new CreateObj( 'ghostwu', 22 );
CreateObj.prototype = {
showUserName : function(){
return this.userName;
}
}
console.log( obj1.showUserName() ); //报错function CreateObj(){}
CreateObj.prototype = {
name : 'ghostwu',
skills : [ 'php', 'javascript', 'linux' ]
};
var obj1 = new CreateObj();
obj1.skills.push( 'python' );
var obj2 = new CreateObj();
console.log( obj2.skills ); //'php', 'javascript', 'linux', 'python'Array.prototype.unique = function(){
var res = [];
for( var i = 0, len = this.length; i < len; i++ ){
if( res.indexOf( this[i] ) == -1 ) {
res.push( this[i] );
}
}
return res;
}
var arr = [ 10, 20, 30, 20, 30, 20, 40, 20 ];
console.log( arr.unique() ); //10, 20, 30, 40html+canvas zur Implementierung des Bildschirms Capture
Detaillierte Erläuterung der jQuery-Implementierung der Timer-Funktion
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Verwendung von js-Prototypobjekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
