1. Vor ES6 wurde die Vererbung mit Konstruktoren implementiert;
Vererbung von Objekten: Deklarieren Sie zunächst ein Objekt und fügen Sie ihm Instanzmitglieder hinzu
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script>
// 1、实例成员 就是构造函数内部通过this添加的成员，uname age sing 都是实例成员，只能通过实例化的对象来访问
function Weber(uname, age) {
this.uname = uname;
this.age = age;
this.write = function() {
console.log("----------write--" + this.uname);
}
}
var qyz = new Weber("青阳子", 36);
qyz.write();
</script>
</body>
</html>
Der Aufruf des Konstruktors muss den neuen Operator verwenden, und es gibt viele Arten gewöhnlicher Funktionsaufrufe, aber der neue Operator wird nicht verwendet. Daher liegt der Unterschied zwischen einem Konstruktor und einer normalen Funktion im neuen Operator. Schauen wir uns nun den neuen Operator genauer an.
Was passiert, wenn ein Objekt mit dem neuen Operator erstellt wird:
Schritt 1: Erstellen Sie eine Objektinstanz.
Schritt 2: Weisen Sie das Ausführungsobjekt des Konstruktors der neu generierten Instanz zu.
Schritt 3: Führen Sie den Code im Konstruktor aus
Schritt 4: Geben Sie die neu generierte Objektinstanz zurück
Hinweis: Der ursprüngliche Konstruktor ist eine Methode des Fensterobjekts. Wenn er direkt ohne den neuen Operator aufgerufen wird, ist das Ausführungsobjekt des Konstruktors Fenster, dh es zeigt auf Fenster. Nach Verwendung des neuen Operators zeigt dieser nun auf das neu generierte Objekt. Es ist entscheidend, diesen Schritt zu verstehen .
Instanzmitglied
Durch Konstruktoren erstellte Objekte werden als Instanzobjekte bezeichnet, und die Eigenschaften und Methoden in Instanzobjekten werden als Instanzmitglieder bezeichnet.
// 1. Das Instanzmitglied ist das dadurch im Konstruktor hinzugefügte Mitglied. uname age sing ist das Instanzmitglied
// Auf Instanzmitglieder kann nur über das instanziierte Objekt zugegriffen werden
2. Statische Mitglieder sind Mitglieder, die dem Konstruktor selbst hinzugefügt werden
Weber.sex = "男";
console.log(Weber.sex) //男
console.log(qyz.sex) //undefined3. Das Problem mit dem Konstruktor: Speicherverschwendung
var qyz = new Weber("青阳子", 36);
var lee = new Weber("李博涵", 4);
console.log(qyz.write === lee.write); //false 比较的是内存地址，不一致
//所有对象应该公用一套函数，以节省空间
1. Konstruktor-Prototyp-Prototyp
Die vom Konstruktor über den Prototyp zugewiesene Funktion wird von allen Objekten gemeinsam genutzt.
JavaScript schreibt vor, dass jeder Konstruktor über eine Prototypeigenschaft verfügt, die auf ein anderes Objekt verweist. Beachten Sie, dass dieser Prototyp ein Objekt ist und alle Eigenschaften und Methoden dieses Objekts dem Konstruktor gehören.
Wir können diese invarianten Methoden direkt im Prototypobjekt definieren, sodass alle Objektinstanzen diese Methoden gemeinsam nutzen können.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 1. 构造函数的问题.
function Weber(uname, age) {
this.uname = uname;
this.age = age;
// this.write = function() {
// console.log('我会写博客');
// }
}
Weber.prototype.write = function() {
console.log('我会写博客');
}
var qyz = new Weber('青阳子', 38);
var lee = new Weber('李博涵', 4);
console.log(qyz.write === lee.write);
// console.dir(Weber);
qyz.write();
lee.write();
// 2. 一般情况下,我们的公共属性定义到构造函数里面, 公共的方法我们放到原型对象身上
</script>
</body>
</html>Ein Objekt, wir nennen Prototyp auch ein Prototypobjekt. Die Rolle des Prototyps ist: gemeinsam genutzte Methode
2. Objektprototyp __proto__
Das Objekt verfügt über eine Eigenschaft __proto__, die auf das Prototypobjekt des Konstruktors verweist. Der Grund, warum unser Objekt die Eigenschaften und Methoden des Prototypobjekts des Konstruktors verwenden kann, liegt darin, dass das Objekt einen __proto__-Prototyp hat.
Objektprototyp __proto__
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
function Weber(uname, age) {
this.uname = uname;
this.age = age;
}
Weber.prototype.write = function() {
console.log('我会唱歌');
}
var qyz = new Weber('青阳子', 36);
var lee = new Weber('李博涵', 4);
qyz.write();
console.log(qyz); // 对象身上系统自己添加一个 __proto__ 指向我们构造函数的原型对象 prototype
console.log(qyz.__proto__ === Weber.prototype);
// 方法的查找规则: 首先先看qyz 对象身上是否有 write 方法,如果有就执行这个对象上的write
// 如果么有write 这个方法,因为有__proto__ 的存在,就去构造函数原型对象prototype身上去查找write这个方法
</script>
</body>
</html>__proto__-Objektprototyp und Prototypobjektprototyp sind gleichwertig
Die Bedeutung des __proto__-Objektprototyps besteht darin, eine Richtung oder Route für den Objektsuchmechanismus bereitzustellen. Da es sich jedoch um ein nicht standardmäßiges Attribut handelt, kann dieses Attribut in der tatsächlichen Entwicklung nicht verwendet werden, sondern verweist nur intern auf den Prototyp Objektprototyp
3. Konstruktor-Konstruktor
Sowohl der Objektprototyp (__proto__) als auch das Konstruktor-Prototypobjekt (Prototyp) verfügen über ein Konstruktorattribut, und der Konstruktor wird als Konstruktor bezeichnet, da er auf den Konstruktor selbst zurückzeigt.
Der Konstruktor wird hauptsächlich verwendet, um aufzuzeichnen, auf welchen Konstruktor sich das Objekt bezieht, und kann das Prototypobjekt wieder auf den ursprünglichen Konstruktor verweisen lassen.
Im Allgemeinen werden die Methoden des Objekts im Prototypobjekt des Konstruktors festgelegt. Wenn mehrere Objektmethoden vorhanden sind, können wir dem Prototypobjekt einen Wert in Form eines Objekts zuweisen. Dadurch wird jedoch der ursprüngliche Inhalt des Konstruktors des Prototypobjekts überschrieben, sodass der geänderte Prototypobjektkonstruktor nicht mehr auf den aktuellen zeigt Konstrukteur.
An diesem Punkt können wir einen Konstruktor hinzufügen, der auf den ursprünglichen Konstruktor im geänderten Prototypobjekt verweist
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
function Weber(uname, age) {
this.uname = uname;
this.age = age;
}
Weber.prototype.write = function() {
console.log('我会写博客');
}
var qyz = new Weber('青阳子', 36);
// 1. 只要是对象就有__proto__ 原型, 指向原型对象
console.log(Weber.prototype);
console.log(Weber.prototype.__proto__ === Object.prototype);
// 2.我们Weber原型对象里面的__proto__原型指向的是 Object.prototype
console.log(Object.prototype.__proto__);
// 3. 我们Object.prototype原型对象里面的__proto__原型 指向为 null
</script>
</body>
</html>4. Suchmechanismus für JavaScript-Mitglieder (Regeln)
① Überprüfen Sie beim Zugriff auf die Eigenschaften (einschließlich Methoden) eines Objekts zunächst, ob das Objekt selbst über die Eigenschaft verfügt.
② Wenn nicht, suchen Sie seinen Prototyp (dh das Prototyp-Prototypobjekt, auf das __proto__ zeigt).
③ Wenn nicht, suchen Sie den Prototyp des Prototypobjekts (Prototypobjekt des Objekts).
④ Und so weiter, bis das Objekt (null) gefunden wird.
⑤ Die Bedeutung des Objektprototyps __proto__ besteht darin, eine Richtung oder Route für den Suchmechanismus für Objektmitglieder bereitzustellen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
function Weber(uname, age) {
this.uname = uname;
this.age = age;
}
Weber.prototype.write = function() {
console.log('我会写博客');
}
Weber.prototype.sex = '女';
// Object.prototype.sex = '男';
var qyz = new Weber('青阳子', 36);
qyz.sex = '男';
console.log(qyz.sex);
console.log(Object.prototype);
console.log(qyz);
console.log(Weber.prototype);
console.log(qyz.toString());
</script>
</body>
</html>
5. Das Prototypobjekt, auf das dies verweist
Dies im Konstruktor zeigt auf unser Instanzobjekt.
Die Methode wird im Prototypobjekt platziert, und dieses in der Methode zeigt auf den Aufrufer der Methode, der das Instanzobjekt ist.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
function Weber(uname, age) {
this.uname = uname;
this.age = age;
}
var that;
Weber.prototype.write = function() {
console.log('我会写博客');
that = this;
}
var qyz = new Weber('青阳子', 36);
// 1. 在构造函数中,里面this指向的是对象实例 qyz
qyz.write();
console.log(that === qyz);
// 2.原型对象函数里面的this 指向的是 实例对象 qyz
</script>
</body>
</html>