Heim > Web-Frontend > js-Tutorial > Hauptteil

Grundlagen der JavaScript-Vererbung zur Stärkung der Notizfreigabe

小云云
Freigeben: 2018-03-12 14:10:34
Original
1325 Leute haben es durchsucht

Aus Sicherheitsgründen können lokale Klassen und Hostklassen nicht vererbt werden, andere jedoch möglich. ECMAScript definiert keine streng abstrakten Klassen, aber es gibt einige Klassen, die nicht verwendet werden dürfen. Die Unterklasse erbt alle Eigenschaften und Methoden der Oberklasse, einschließlich Konstruktoren und Methodenimplementierungen. Denken Sie daran, dass alle Eigenschaften und Methoden öffentlich sind, sodass Unterklassen direkt auf diese Methoden zugreifen können. Unterklassen können auch neue Eigenschaften und Methoden hinzufügen, die in der Oberklasse nicht vorhanden sind, und können auch Eigenschaften und Methoden der Oberklasse überschreiben.

Der Vererbungsmechanismus in JavaScript ist nicht explizit spezifiziert, sondern wird durch Nachahmung implementiert. Dies bedeutet, dass nicht alle Vererbungsdetails vollständig vom Interpreter behandelt werden.

Objektidentitätswechsel

  • Um es ganz klar auszudrücken: Zuerst muss eine Konstruktormethode der Superklasse A geschrieben werden. Schreiben Sie einen weiteren Konstruktor der Klasse B;

  • und referenzieren Sie dann den Konstruktor von A in der Methode von B;

    Löschen Sie den Verweis auf ClassA nach der Verwendung.
  • Unterklassenattribute definieren (alle neuen Unterklassenattribute werden nach dem Löschen der Referenz definiert)
  • Objektidentitätswechsel kann eine Mehrfachvererbung erreichen
<span style="font-size: 14px;">// 超类ClassA的构造方法function ClassA(sColor) {<br/>    this.color = sColor;    this.sayColor = function () {、<br/>        alert(this.color);<br/>    };<br/>}// 子类ClassB的构造方法function ClassB(sColor, sName) {<br/>    // 引用ClassA的构造方法<br/>    this.newMethod = ClassA;    // 使用ClassA的构造方法够照ClassB<br/>    this.newMethod(sColor);    // 删除对ClassA的引用<br/>    delete this.newMethod;    /* 所有的子类新属性在删除引用后定义 */<br/>    // 子类属性<br/>    this.name = sName;    this.sayName = function () {<br/>        alert(this.name);<br/>    };<br/>}</span>
Nach dem Login kopieren

Eine Klasse kann mehrere Superklassen erben. ClassX und ClassY, ClassZ möchte diese beiden Klassen erben.


Wenn es zwei Klassen ClassX und ClassY mit Eigenschaften oder Methoden mit demselben Namen gibt, hat ClassY hohe Priorität.
Weil es von der folgenden Klasse erbt. Die call()-Methode ist der klassischen Objektidentitätsmethode am ähnlichsten.

Ein Parameter, der als Objekt dafür verwendet wird. Alle anderen Parameter werden direkt an die Funktion selbst übergeben.


<span style="font-size: 14px;">function ClassZ() {<br/>  // 继承ClassX<br/>  this.newMethod = ClassX;  this.newMethod();  delete this.newMethod;  //继承ClassY<br/>  this.newMethod = ClassY;  this.newMethod();  delete this.newMethod;<br/>}</span>
Nach dem Login kopieren
Nach dem Login kopieren
Apply()-Methode

Zwei Parameter, das als Objekt verwendete Objekt und die Parameter, die an übergeben werden sollen Funktionsarray.

Der zweite Parameter von apply kann nur ein Array sein


<span style="font-size: 14px;">function ClassB(sColor, sName) {<br/>  /*<br/>  将classB付给ClassA中的this<br/>  这时classA中的this实际指向是ClassB<br/>  */<br/>  ClassA.call(this, sColor);  this.name = sName;  this.sayName = function () {<br/>    alert(this.name);<br/>  };<br/>}</span>
Nach dem Login kopieren
Nach dem Login kopieren
Prototypverkettung (Prototypverkettung)

Erben Dieses Formular wurde ursprünglich in ECMAScript für Prototypketten verwendet.


Über die Operationsinstanz

<span style="font-size: 14px;">function ClassB(sColor, sName) {<br/>  // 引用ClassA构造方法<br/>  ClassA.apply(this, new Array(sColor));  // 也可以使用arguments<br/>  // 只有超类中的参数顺序与子类中的参数顺序完全一致时才可以传递参数对象<br/>  // ClassA.apply(this, arguments);<br/>  // ClassB 自己的属性<br/>  this.name = sName;  this.sayName = function () {<br/>    alert(this.name);<br/>  };<br/>}</span>
Nach dem Login kopieren

In der Prototypenkette funktioniert der Instanzoperator ebenfalls auf einzigartige Weise. „instanceof“ gibt „true“ sowohl für ClassA als auch für ClassB für alle Instanzen von ClassB zurück.

Gemischte Methode

<span style="font-size: 14px;">// ClassA的构造方法function ClassA() {<br/>  //要求为空,全部写在prototype上}// ClassA的属性ClassA.prototype.color = "blue";<br/>ClassA.prototype.sayColor = function () {<br/>  alert(this.color);<br/>};// ClassB的构造方法function ClassB() {}// 继承ClassA的属性ClassB.prototype = new ClassA();// ClassB自己的属性,需要出现在继承之后ClassB.prototype.name = "";<br/>ClassB.prototype.sayName = function () {<br/>  alert(this.name);<br/>};</span>
Nach dem Login kopieren

Im ClassB-Konstruktor werden Objekte verwendet Geben Sie vor, eine Vererbung zu sein. Die sColor-Eigenschaft der ClassA-Klasse.

<span style="font-size: 14px;">var objB = new ClassB();<br/>alert(objB instanceof ClassA);  //输出 "true"alert(objB instanceof ClassB);  //输出 "true"</span>
Nach dem Login kopieren
Nach dem Login kopieren

Verwenden Sie in der zweiten hervorgehobenen Codezeile die Prototypenkette, um die Methoden der ClassA-Klasse zu erben.

<span style="font-size: 14px;">// ClassA的构造方法,只写属性,不写函数function ClassA(sColor) {<br/>  this.color = sColor;<br/>}// 使用原型给ClassA赋予函数ClassA.prototype.sayColor = function () {<br/>  alert(this.color);<br/>};// ClassB的构造方法function ClassB(sColor, sName) {<br/>  // 先调用ClassA,继承ClassA的属性<br/>  ClassA.call(this, sColor);  this.name = sName;<br/>}// 再通过原型链继承ClassA的函数ClassB.prototype = new ClassA();// 通过原型链定义自己的函数ClassB.prototype.sayName = function () {<br/>    alert(this.name);<br/>};</span>
Nach dem Login kopieren
Nach dem Login kopieren
  • JavaScript-Grundlagen stärkende Hinweise – Vererbung

    Aus Sicherheitsgründen können lokale Klassen und Hostklassen nicht erben, andere alle kann vererbt werden.
  • ECMAScript definiert keine streng abstrakten Klassen, aber es gibt einige Klassen, die nicht verwendet werden dürfen.

Die Unterklasse erbt alle Eigenschaften und Methoden der Oberklasse, einschließlich der Implementierung von Konstruktoren und Methoden. Denken Sie daran, dass alle Eigenschaften und Methoden öffentlich sind, sodass Unterklassen direkt auf diese Methoden zugreifen können. Unterklassen können auch neue Eigenschaften und Methoden hinzufügen, die in der Oberklasse nicht vorhanden sind, und können auch Eigenschaften und Methoden der Oberklasse überschreiben.

Der Vererbungsmechanismus in JavaScript ist nicht explizit spezifiziert, sondern wird durch Nachahmung implementiert. Dies bedeutet, dass nicht alle Vererbungsdetails vollständig vom Interpreter behandelt werden.

Objektidentitätswechsel

Um es ganz klar auszudrücken: Zuerst muss eine Konstruktormethode von Super geschrieben werden Klasse A. Schreiben Sie einen weiteren Konstruktor der Klasse B;


und referenzieren Sie dann den Konstruktor von A in der Methode von B;

Löschen Sie den Verweis auf ClassA nach der Verwendung.

  • Unterklassenattribute definieren (alle neuen Unterklassenattribute werden nach dem Löschen der Referenz definiert)

  • Objektidentitätswechsel kann eine Mehrfachvererbung erreichen

  • Eine Klasse kann mehrere Superklassen erben. ClassX und ClassY, ClassZ möchte diese beiden Klassen erben.

  • Wenn es zwei Klassen ClassX und ClassY mit Eigenschaften oder Methoden mit demselben Namen gibt, hat ClassY hohe Priorität.

    Weil es von der folgenden Klasse erbt.

    <span style="font-size: 14px;">function ClassZ() {<br/>  // 继承ClassX<br/>  this.newMethod = ClassX;  this.newMethod();  delete this.newMethod;  //继承ClassY<br/>  this.newMethod = ClassY;  this.newMethod();  delete this.newMethod;<br/>}</span>
    Nach dem Login kopieren
    Nach dem Login kopieren

    call()方法

    call() 方法是与经典的对象冒充方法最相似。
    一个参数用作 this 的对象。其他参数都直接传递给函数自身。

    <span style="font-size: 14px;">function ClassB(sColor, sName) {<br/>  /*<br/>  将classB付给ClassA中的this<br/>  这时classA中的this实际指向是ClassB<br/>  */<br/>  ClassA.call(this, sColor);  this.name = sName;  this.sayName = function () {<br/>    alert(this.name);<br/>  };<br/>}</span>
    Nach dem Login kopieren
    Nach dem Login kopieren

    apply() 方法

    两个参数,用作 this 的对象和要传递给函数的参数的数组。
    apply第二个参数只能是数组

    <span style="font-size: 14px;">function ClassB(sColor, sName) {<br/>  // 引用ClassA构造方法<br/>  ClassA.apply(this, new Array(sColor));  // 也可以使用arguments<br/>  // 只有超类中的参数顺序与子类中的参数顺序完全一致时才可以传递参数对象<br/>  // ClassA.apply(this, arguments);<br/>  // ClassB 自己的属性<br/>  this.name = sName;  this.sayName = function () {<br/>    alert(this.name);<br/>  };<br/>}</span>
    Nach dem Login kopieren

    原型链(prototype chaining)

    继承这种形式在 ECMAScript 中原本是用于 原型链 的。

    <span style="font-size: 14px;">// ClassA的构造方法function ClassA() {<br/>  //要求为空,全部写在prototype上}// ClassA的属性ClassA.prototype.color = "blue";<br/>ClassA.prototype.sayColor = function () {<br/>  alert(this.color);<br/>};// ClassB的构造方法function ClassB() {}// 继承ClassA的属性ClassB.prototype = new ClassA();// ClassB自己的属性,需要出现在继承之后ClassB.prototype.name = "";<br/>ClassB.prototype.sayName = function () {<br/>  alert(this.name);<br/>};</span>
    Nach dem Login kopieren

    关于 instanceof 运算

    在原型链中,instanceof 运算符的运行方式也很独特。对 ClassB 的所有实例,instanceof 为 ClassA 和 ClassB 都返回 true。

    <span style="font-size: 14px;">var objB = new ClassB();<br/>alert(objB instanceof ClassA);  //输出 "true"alert(objB instanceof ClassB);  //输出 "true"</span>
    Nach dem Login kopieren
    Nach dem Login kopieren

    混合方式

    <span style="font-size: 14px;">// ClassA的构造方法,只写属性,不写函数function ClassA(sColor) {<br/>  this.color = sColor;<br/>}// 使用原型给ClassA赋予函数ClassA.prototype.sayColor = function () {<br/>  alert(this.color);<br/>};// ClassB的构造方法function ClassB(sColor, sName) {<br/>  // 先调用ClassA,继承ClassA的属性<br/>  ClassA.call(this, sColor);  this.name = sName;<br/>}// 再通过原型链继承ClassA的函数ClassB.prototype = new ClassA();// 通过原型链定义自己的函数ClassB.prototype.sayName = function () {<br/>    alert(this.name);<br/>};</span>
    Nach dem Login kopieren
    Nach dem Login kopieren
    • ClassB 构造函数中,用对象冒充继承 ClassA 类的 sColor 属性。

    • 在第二行突出显示的代码中,用原型链继承 ClassA 类的方法。

    相关推荐:

    javascript继承体系详解

    JavaScript继承之原型式继承、寄生式继承、寄生组合式继承用法实例详解

    javascript继承方式详解

    Das obige ist der detaillierte Inhalt vonGrundlagen der JavaScript-Vererbung zur Stärkung der Notizfreigabe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage