Objektorientierte JavaScript-Vererbungsmethode

JavaScript gibt es schon seit fast 20 Jahren, doch zu dieser Prophezeiung gibt es immer noch unterschiedliche Meinungen. Viele Leute sagen, dass JavaScript nicht als objektorientierte Programmiersprache betrachtet werden kann. Aber JavaScript ist sehr locker typisiert und hat keinen Compiler. Dies gibt Programmierern viele Freiheiten, bringt aber auch einige Mängel mit sich.

Obwohl JavaScript keine objektorientierte Sprache ist. Aber wir können die objektorientierte Programmierung von JavaScript implementieren, indem wir die Art und Weise nachahmen, wie andere Sprachen die objektorientierte Programmierung implementieren.

Das Folgende ist eine sehr klassische Vererbungsmethode in JavaScript-Tutorials.

//定义一个Pet对象。通过这一个名称和数量的腿。  
var Pet = function  (name,legs) { 
    this.name = name; //Save ths name and legs values.  
    this.legs = legs; 
}; 
  
//创建一个方法,显示了Pet的名字和数量的腿。  
Pet.prototype.getDetails = function  () { 
    return this.name + " has " + this.legs + " legs "; 
} 
  
//定义一个Cat对象,继承从Pet。  
var Cat = function  (name) { 
    Pet.call(this,name,4); //调用这个父对象的构造函数  
}; 
  
//这条线执行继承从Pet。  
Cat.prototype = new Pet(); 
  
//增加一个动作方法的猫  
Cat.prototype.action = function  () { 
    return "Catch a bird"; 
}; 
  
//创建一个实例petCat的猫。  
var petCat = new Cat("felix"); 
  
var details = petCat.getDetails();  
console.log(details)                //"felix has 4 legs".   
var action = petCat.action();       
console.log(action)             //"Catch a bird".  
petCat.name = "sylvester";              //改变petCat的名字  
petCat.legs = 7;                //改变petCat腿的数量  
details = petCat.getDetails();      
console.log(details)                //"sylvester has 7 legs". 
 
//定义一个Pet对象。通过这一个名称和数量的腿。
var Pet = function  (name,legs) {
 this.name = name; //Save ths name and legs values.
 this.legs = legs;
};
 
//创建一个方法,显示了Pet的名字和数量的腿。
Pet.prototype.getDetails = function  () {
 return this.name + " has " + this.legs + " legs ";
}
 
//定义一个Cat对象,继承从Pet。
var Cat = function  (name) {
 Pet.call(this,name,4); //调用这个父对象的构造函数
};
 
//这条线执行继承从Pet。
Cat.prototype = new Pet();
 
//增加一个动作方法的猫
Cat.prototype.action = function  () {
 return "Catch a bird";
};
 
//创建一个实例petCat的猫。
var petCat = new Cat("felix");
 
var details = petCat.getDetails();
console.log(details)    //"felix has 4 legs".
var action = petCat.action();   
console.log(action)    //"Catch a bird".
petCat.name = "sylvester";          //改变petCat的名字
petCat.legs = 7;    //改变petCat腿的数量
details = petCat.getDetails();   
console.log(details)    //"sylvester has 7 legs".

Obwohl die obige Methode keine großen Probleme bei der Ausführung aufweist, ist der Gesamtstil des Codes etwas aufgebläht und nicht sehr elegant. Eigenschaften können weiterhin außerhalb geändert werden. Dieser Ansatz schützt keine geerbten Eigenschaften. Die folgende Methode lässt New und Prototyp weg und verwendet die Funktion der „Funktionsvererbung“, um sie zu implementieren.

//定义一个pet对象。通过这一个名称和数量的腿。  
var pet = function (name,legs) { 
    //创建一个对象that，其中名字是可以改的，但是腿数不可以改，实现了变量私有化。  
    var that = { 
            name : name, 
            getDetails : function  () { 
                return that.name + " has " + legs + " legs "; 
            } 
        }; 
  
    return that; 
} 
  
//定义一个cat对象,继承从pet。  
var cat = function  (name) { 
    var that = pet(name,4); //从pet中继承属性  
  
    //cat中增加一个action的方法。  
    that.action = function  () { 
        return "Catch a bird"; 
    } 
  
    return that; 
  
} 
  
//创建一个petCat2;  
var petCat2 = cat("Felix"); 
  
var details = petCat2.getDetails();  
console.log(details)                //"felix has 4 legs".  
var action = petCat2.action();       
console.log(action)             //"Catch a bird".  
petCat2.name = "sylvester";             //我们可以改变名字。  
petCat2.legs = 7;               //但是不可以改变腿的数量  
details = petCat2.getDetails();     
console.log(details)                //"sylvester has 4 legs". 
 
//定义一个pet对象。通过这一个名称和数量的腿。
var pet = function (name,legs) {
 //创建一个对象that，其中名字是可以改的，但是腿数不可以改，实现了变量私有化。
 var that = {
   name : name,
   getDetails : function  () {
    return that.name + " has " + legs + " legs ";
   }
  };
 
 return that;
}
 
//定义一个cat对象,继承从pet。
var cat = function  (name) {
 var that = pet(name,4); //从pet中继承属性
 
 //cat中增加一个action的方法。
 that.action = function  () {
  return "Catch a bird";
 }
 
 return that;
 
}
 
//创建一个petCat2;
var petCat2 = cat("Felix");
 
var details = petCat2.getDetails();
console.log(details)    //"felix has 4 legs".
var action = petCat2.action();  
console.log(action)    //"Catch a bird".
petCat2.name = "sylvester";          //我们可以改变名字。
petCat2.legs = 7;    //但是不可以改变腿的数量
details = petCat2.getDetails();   
console.log(details)    //"sylvester has 4 legs".

Herzliche Erinnerung: Der Vorteil der Verwendung der Prototypenvererbung ist eine hohe Speichereffizienz. Unabhängig davon, wie oft sie vererbt wird, werden die Prototypeigenschaften und -methoden des Objekts nur einmal gespeichert. Bei der Vererbung von Funktionen werden für jede neue Instanz doppelte Eigenschaften und Methoden erstellt. Wenn Sie viele große Objekte erstellen, ist der Speicherverbrauch sehr hoch. Die Lösung besteht darin, die größeren Eigenschaften oder Methoden in einem Objekt zu speichern und sie als Parameter an den Konstruktor zu übergeben. Auf diese Weise nutzen alle Instanzen eine Objektressource, anstatt ihre eigenen Versionen zu erstellen.

Mit beiden oben genannten Methoden kann problemlos eine objektorientierte Vererbung in JavaScript implementiert werden. Keine Methode ist absolut gut und keine Methode ist absolut schlecht. Hängt von den persönlichen Vorlieben ab.