Was sind die Vererbungsmethoden in js? Einführung in zwei Methoden der JS-Vererbung (mit Code)

Die Vererbung von js unterscheidet sich von der traditionellen Vererbung von Java, da die Vererbung auf der Prototypenkette basiert. Die JavaScript-Vererbung kann in zwei Kategorien unterteilt werden: objektbasierte Vererbung und typbasierte Vererbung. Schauen wir uns die js-Vererbung genauer an.

Vererbung basierend auf js-Objekten
Objektbasierte Vererbung wird auch als prototypische Vererbung bezeichnet. Wir wissen, dass über JavaScript-Literale erstellte Objekte mit Object.prototype verbunden werden, daher verwenden wir Object.prototype, um die Vererbung zu implementieren. Im Wesentlichen wird die Klasse aufgegeben und der Konstruktor nicht aufgerufen. Stattdessen wird Object.create() verwendet, um das neue Objekt direkt die Eigenschaften des alten Objekts erben zu lassen. Zum Beispiel:

var person = {
    name: "Jack",
    getName: function () { return this.name; }
}
var p1 = Object.create(person);
console.log(p1.getName());    //Jack

Der Code ist sehr einfach, Person hat ein Attribut und eine Methode. Objekt p1 wird über Object.create() geerbt. Der erste Parameterprototyp zeigt auf den Prototyp von person, sodass Objekt p1 die Attribute und Methoden von person erbt.
Object.create() kann auch einen zweiten Parameter, ein Datenattribut, angeben, der dem neuen Objekt hinzugefügt werden soll. Das Datenattribut kann auf 4 Deskriptorwerte festgelegt werden: beschreibbar, aufzählbar und konfigurierbar. Die Bedeutung der letzten drei kann anhand der Namen erraten werden. Wenn nicht angegeben, ist der Standardwert falsch. Da es wenig mit diesem Artikel zu tun hat, schweife ich nicht ab. Schauen Sie sich einfach die Werteinstellung an:

var p2 = Object.create(person, {
    name: {
        value: "Zhang"
    }
});
console.log(p2.getName());    //Zhang

Die Verwendung von Object.create() entspricht der Erstellung eines brandneuen Objekts Neuer Wert zum Objekt. Fügen Sie seine Eigenschaften und Methoden hinzu und überladen Sie sie:

var person = {
    name: "Jack",
    getName: function () { return this.name; },
    getAge: function() { return this.age; } //注意并没有age这个成员变量，依赖子类实现
}

var p3 = Object.create(person);
p3.name = 'Rose';
p3.age = 17;
p3.location = '上海';
p3.getLocation = function() { return this.location; }

console.log(p3.getName());    //Rose
console.log(p3.getAge());     //17
console.log(p3.getLocation());    //上海

Es gibt kein Altersattribut in person, daher erhalten Sie undefiniert, wenn Sie person.getAge(); aufrufen. Das Altersattribut wird jedoch im Objekt p3 neu definiert, sodass die getAge-Methode der Basisklasse korrekt aufgerufen werden kann. Darüber hinaus überlädt die Unterklasse den Wert von name und definiert das Standortattribut und die getLocation-Methode neu. Die Ergebnisse sind oben dargestellt und werden nicht noch einmal beschrieben.

Vererbung basierend auf JS-Klassen
Typbasierte Vererbung ist eine Vererbung, die vom Prototyp über den Konstruktor abhängt, anstatt sich auf das Objekt zu verlassen. Beispiel:

function Person(name) {
    this.name = name;
    this.getName = function () { return this.name; };  
}
function Student(name, age) {
    Person.call(this, name);
    this.age = age;
    this.getAge = function () { return this.age; }; 
}
Student.prototype = new Person();    //需要通过new来访问基类的构造函数

var p = new Person('Cathy');
var s = new Student('Bill', 23);

console.log(p.getName());    //Cathy
console.log(s.getName());    //Bill
console.log(s.getAge());     //23

Student erbt von Person. Obwohl der Name in der Basisklasse Person definiert ist, wird dieser nach dem Aufruf des Person-Konstruktors mit new an das Student-Objekt der Unterklasse gebunden, sodass der Name letztendlich im Student-Objekt der Unterklasse definiert wird. Die Ergebnisse sind oben dargestellt und werden nicht noch einmal beschrieben.
Privatsphäre schützen
Der Grund, warum getName, getAge und andere Methoden definiert sind, besteht darin, dass wir nicht möchten, dass Benutzer direkt auf Attribute wie Name, Alter usw. zugreifen. Leider kann keine der beiden oben genannten Vererbungen die Privatsphäre schützen und sie können direkt auf Eigenschaften wie p.name und p.age zugreifen. Wenn Sie der Meinung sind, dass die Privatsphäre dieser Attribute sehr wichtig ist und Sie die Wirkung privater Attribute in der OO-Sprache simulieren möchten, können Sie die Funktionsmodularisierung verwenden.
Die sogenannte Funktionsmodularisierung bedeutet im Wesentlichen, ein neues Objekt innerhalb der Funktion zu erstellen, die Eigenschaften des Parameterobjekts in der Methode des neuen Objekts zu verwenden und dann das neue Objekt zurückzugeben. Zu diesem Zeitpunkt sind im neuen Objekt keine Attribute des Parameterobjekts vorhanden, wodurch der Zweck des Schutzes der Privatsphäre erreicht wird. Der Code lautet wie folgt:

var person = function(spec) {
    var that = {};        //新对象
    that.getName = function () { return spec.name; };  //使用参数的属性
    that.getAge = function() { return spec.age; };  //使用参数的属性
    return that;        //返回新对象
}

var p4 = person({name: 'Jane', age: 20});

console.log(p4.name);    //undefined
console.log(p4.age);     //undefined
console.log(p4.getName());    //Jane
console.log(p4.getAge());     //20

Da die Funktion Person das neue Objekt zurückgibt und darin keine Namens- und Altersattribute vorhanden sind, führt der direkte Zugriff zu undefiniert. Name und Alter können nur über die beiden dadurch bereitgestellten Schnittstellen ermittelt werden.
Es ist auch sehr praktisch, die mehrschichtige Vererbung weiter zu implementieren. Der Effekt ist wie folgt, daher werde ich nicht auf Details eingehen:

var student = function(spec) {
    var that = person(spec);        //新对象继承自person
    that.getRole = function() { return 'student'; };  //新对象增加方法
    that.getInfo = function() {
        return spec.name + ' ' + spec.age + ' ' + that.getRole();
    };
    return that;    //返回新对象
};

var p5 = student({name:'Andy', age:12});

console.log(p5.name);       //undefined
console.log(p5.getName());  //Andy
console.log(p5.getRole());  //student
console.log(p5.getInfo());  //Andy 12 student

Empfohlene verwandte Artikel:

JS-Vererbung – Prototypkettenvererbung und Klassenvererbung_ Grundkenntnisse

Mehrere Möglichkeiten zur Implementierung der Vererbung in JS

Vererbung in JavaScript_Javascript-Tipps

Das obige ist der detaillierte Inhalt vonWas sind die Vererbungsmethoden in js? Einführung in zwei Methoden der JS-Vererbung (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!