Detaillierte Erläuterung der prototypbasierten Vererbungsfunktionen in JavaScript_Grundkenntnisse

Vererbung in JavaScript ist ziemlich seltsam. Schnittstellenvererbung kann nicht implementiert werden und kann nur auf prototypischer Vererbung basieren.

Prototypenkette
Ein Prototyp ist ein Objekt. Die vom Konstruktor erstellte Instanz verfügt über einen Zeiger, der auf den Prototyp zeigt, um die Eigenschaften und Methoden des Prototyps abzurufen. Auf diese Weise verfügt das Instanzobjekt über die Attributmethoden des Konstruktors und die Attributmethoden des Prototyps. Zeigen Sie dann auf den Prototyp des Konstruktors, der auf diese Instanz vererbt werden muss, und Sie können alle Attributmethoden dieser Instanz verwenden Erbe erreichen.
Schauen Sie sich den Democode unten an:

//声明超类，通过构造函数和原型添加有关属性和方法
function Super(){
  this.property = true;
}
Super.prototype.getSuperValue = function() {
  return this.property;
};

//声明子类的构造函数
function SubType() {
  this.subproperty = false;
}
//将子类的原型指向超类的实例，得到超类的一切
SubType.prototype = new Super();
SubType.prototype.constructor = SubType;
SubType.prototype.getSubValue = function(){
  return this.subproperty;
};
//由子类创建对象，测试是否继承超类方法和属性
var instance = new SubType();
console.log(instance.getSuperValue());

Der Standardprototyp aller Funktionen ist eine Instanz von Object, daher enthält der Standardprototyp einen internen Zeiger, der auf Object.prototype zeigt.
Verwenden Sie „instanceof“ und „isPrototypeOf“, um die Beziehung zwischen Prototyp und Instanz zu bestimmen:

instance instanceof Object;
Object.prototype.isPrototypeOf(instance);

Bei Verwendung der Prototypenkette müssen Sie die Methode sorgfältig definieren. Wenn eine Unterklasse eine Methode oder Erweiterung des Supertyps überschreiben muss, muss sie nach der Anweisung platziert werden, die den Prototyp ersetzt, damit sie wirksam werden kann. Darüber hinaus können Sie bei der Implementierung der Vererbung über die Prototypenkette keine Objektliterale verwenden, um Prototypenmethoden zu erstellen, die die Prototypenkette überschreiben würden:

......
SubType.prototype = new Super();
SubType.prototype = {
  ....
};

Dadurch wird der Zeiger ersetzt, der auf das neue Objekt zeigt, und so die Prototypenkette neu geschrieben.
Die Vererbungsmethode der Prototypkette ist fehlerhaft. Es gibt zwei Hauptprobleme:
1. Von einem Prototyp, der einen Referenztypwert enthält, wird dieser von allen Instanzen gemeinsam genutzt.
Wie im vorherigen Artikel erwähnt, werden Prototypeigenschaften, die Referenztypwerte enthalten, von allen Instanzen gemeinsam genutzt. Wenn eine Instanz geändert wird, ändern sich andere Instanzen entsprechend, sodass die Eigenschaften im Konstruktor definiert werden müssen. Bei der Vererbung über die Prototypkette werden die Attribute in der Superklasse unabhängig davon, ob sie im Konstruktor oder im Prototyp definiert sind, alle zu Instanzobjekten und werden von der Unterklasse geerbt, was sich auf die Instanzen der Unterklasse auswirkt.
2. Beim Erstellen einer Instanz eines Untertyps können keine Parameter an den Konstruktor des Obertyps übergeben werden.
Durch die Vererbung der Prototypkette wird der Unterklassenprototyp direkt auf die Instanz der Oberklasse verwiesen. Zu diesem Zeitpunkt können Parameter an die Oberklasse übergeben werden. Wenn eine Unterklasse jedoch eine Instanz erstellt, können Parameter nur an den Konstruktor der Unterklasse übergeben werden, nicht jedoch an den Konstruktor der Oberklasse.
Daher wird die Prototypenkette in tatsächlichen Anwendungen selten allein verwendet.

Einige verwandte Codierungspraktiken

Identifizieren Sie ein Prototypattribut

function hasPrototypeProperty(object, name) {
  return name in object && !object.hasOwnProperty(name);
}

Prototypobjekte in Konstruktoren verwenden

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

Person.prototype = {
  constructor: Person,
  sayName: function () {
    console.log(this.name);
  },
  toString: function() {

  }
};

var person1 = new Person('Nicholas');
var person2 = new Person('Greg);

console.log(person1 instanceof Person); // true
console.log(person1.constructor === Person); // true
console.log(person1.constructor === Object); // false

console.log(person2 instanceof Person); // true
console.log(person2.constructor === Person); // true
console.log(person2.constructor === Object); // false

Objektvererbung

var person1 = {
  name: 'Nicholas',
  sayName: function () {
    console.log(this.name);
  }
};

var person2 = Object.create(person1, {
  name: {
    configurable: true,
    enumerable: true,
    value: 'Greg',
    writable: true
  }
});

person1.sayName(); // Nicholas
person2.sayName(); // Greg

console.log(person1.hasOwnProperty('sayName')); // true
console.log(person1.isPropertyOf(person2)); // true
console.log(person2.hasOwnProperty('sayName')); // false

Modulmodus

var person = (function () {
  var age = 25;

  function getAge() {
    return age;
  }

  function growOlder() {
    age++;
  }

  return {
    name: 'Nicholas',
    getAge: getAge,
    growOlder: growOlder
  };
}());

Bereichskonstruktor

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

Person.prototype.sayName = function() {
  console.log(this.name);
};

var person1 = Person('Nicholas');

console.log(person1 instanceof Person); // false
console.log(typeof person1); // undefined
console.log(name); // Nicholas