Welche Möglichkeiten gibt es, die Vererbung in JS zu implementieren?

Dieses Mal werde ich Ihnen einige Möglichkeiten zur Implementierung der Vererbung in JS vorstellen und welche Vorsichtsmaßnahmen für die Implementierung der Vererbung in JS gelten. Hier sind praktische Fälle, werfen wir einen Blick darauf.

Wir alle wissen, dass die drei Hauptmerkmale von objektorientiert Kapselung, Vererbung und Polymorphismus sind. Kapselung ist nichts anderes als die Privatisierung von Eigenschaften und Methoden , daher stellen wir private Eigenschaften und private Methoden in JS bereit. In JS gibt es keinen Polymorphismus, daher sagen wir, dass JS eher eine objektbasierte als eine objektorientierte Sprache ist. Unter den drei Hauptmerkmalen der Objektorientierung ist die Vererbung das wichtigste in JS.

1. Grundkonzepte der Vererbung

Durch die Verwendung einer Unterklasse zum Erben einer anderen übergeordneten Klasse kann die Unterklasse automatisch über die Eigenschaften und Methoden der übergeordneten Klasse verfügen.

>>>Die beiden Vererbungsparteien treten zwischen zwei Klassen auf.

Daher ist die sogenannte Vererbung nichts anderes, als der Unterklasse alle Attribute und Methoden der übergeordneten Klasse zu überlassen. In JS müssen wir diesen Schritt also simulieren, und es gibt drei gängige Methoden, um dies zu erreichen.

Dies sind: Erweitern des Objektprototyps zum Implementieren der Vererbung, Verwenden von Aufruf und Anwenden zum Implementieren der Vererbung und Verwenden des Prototyps zum Implementieren der Vererbung.

2. Vererbung der Prototyp-Implementierung von Extended Object

Der Kern der Erweiterung von Object zur Realisierung der Vererbung besteht darin, dass wir selbst eine Methode schreiben, um alle Eigenschaften und Methoden der übergeordneten Klasse einzeln über eine Durchlaufschleife in die untergeordnete Klasse zu kopieren.

Die detaillierten Schritte lauten wie folgt:

1: Elternklasse definieren

functionParent(){}

2: Unterklasse definieren

funtion Son(){}

3: Fügen Sie dem Object-Objekt über den Prototyp eine Erweiterungsmethode hinzu.

Object.prototype.customExtend =function(parObj){
for(variinparObj){//通过for-in循环，把父类的所有属性方法，赋值给自己
this[i] =parObj[i];
}
}

4: Unterklassenobjekt ruft Erweiterungsmethode

auf Son.customExtend(Parent);

3. Verwenden Sie „Call“ und „Apply“, um die Vererbung zu implementieren

Um diese Methode zum Anzeigen der Vererbung zu verwenden, überprüfen wir zunächst die Funktionen des Aufrufs und wenden die Funktionen an:

Aufrufen und Anwenden: Rufen Sie die Methode über den Funktionsnamen auf, um zu erzwingen, dass die Funktion auf ein Objekt zeigt Schreibmethode aufrufen: func.call (Objekt, auf das func zeigt, Parameter 1, Parameter 2...);

Schreibmethode anwenden: func.apply(obj, auf das func zeigt, [Parameter 1, Parameter 2...]);

Unsere Idee, diese beiden Funktionen zur Implementierung der Vererbung zu verwenden, lautet dann: Verwenden Sie in der Unterklasse die Funktion der übergeordneten Klasse, um call oder apply aufzurufen, und binden Sie dies der übergeordneten Klasse zwangsweise an das der Unterklasse. Würden in diesem Fall die an diese der übergeordneten Klasse gebundenen Attribute und Methoden nicht erfolgreich an diese der Unterklasse gebunden werden?

Die detaillierten Schritte sind wie folgt: 1: Elternklasse definieren

funtion Parent(){} 2: Unterklasse definieren

functionSon(){} 3: Rufen Sie die übergeordnete Klasse über die Aufrufmethode auf oder wenden Sie die Methode in der Unterklasse an.

functionSon(){
Parent.call(this,....);//将父类函数中的this，强行绑定为子类的this}

4. Verwenden Sie Prototypen, um die Vererbung zu implementieren Die Verwendung von Prototypen zur Implementierung der Vererbung ist relativ einfach und leicht zu verstehen. Richten Sie einfach den Prototyp der Unterklasse auf das Objekt der übergeordneten Klasse.

Die detaillierten Schritte lauten wie folgt:

1: Elternklasse definieren

functionParent(){} 2: Unterklasse definieren

functionSon(){} 3: Deklarieren Sie das Prototypobjekt im Unterklassenobjekt als Instanz der übergeordneten Klasse.

Son.prototype =newParent();

5. Schließung Um Abschlüsse zu verstehen, müssen wir zunächst den Umfang in JS verstehen:

1. Geltungsbereich in JS

Globale Variablen: Variablen, die außerhalb der Funktion

局部变量：函数内声明的变量

在JS中，函数为唯一的局部作用域，而if、for等其他{}没有自己的作用域

所以，函数外不能访问局部变量。其实，变量在函数执行完毕以后，占用的内存就会被释放。

2、闭包

在概述中，我刚刚提到，面向对象的三大特征中的“封装”，我们可以用函数的私有属性来实现。这个私有属性，其实也就是局部变量。

但是我们都知道，封装是限制外部的访问，并不是直接拒绝外部的访问，那么我们在函数中私有的属性，怎么才能在外部访问呢？答案就是闭包！

JS中，提供了一种"闭包"的概念：在函数内部，定义一个子函数，可以用子函数访问父函数的私有变量。执行完操作以后，将子函数通过return返回。

代码示例：

functionfunc2(){varnum = 1;functionfunc3(){varsum = num+10;
alert(sum);
}returnfunc3;
}varf =func2();
f();

3、闭包的作用：

① 访问函数的私有变量；

② 让函数的变量始终存在于内存中，而不被释放。

4、闭包的典型应用

我们来做这样一个功能：页面中有6个li，要求实现点击每个li，弹出这个li对应的序号。

HTML代码很简单：

那JS代码呢？我觉得很大一部分同学会这样写：

varlis = document.getElementsByTagName("li");for(vari=0;i
lis[i].onclick=function(){
alert("您/点击了第"+i+"个li！");
}

那么，这样对吗？不对！！！我们来分析一下：页面加载的时候，JS代码会全部执行，也就是上面的for循环在页面加载完就已经执行完了！那，这个i就已经变成了lis.length。也就是说，你在点击li的时候，无论点击第几个，弹出的都是lis.length。

那么，我们应该怎么修改呢？看代码！

varlis = document.getElementsByTagName("li");for(vari=0;i
lis[j].onclick=function(){
alert("您/点击了第"+j+"个li！");
}
}();
}

区别在哪？明眼人一眼就看穿我们在for循环外面嵌套了一层自执行函数！这种函数套函数的形式，就形成了闭包！

那作用呢？我们刚才强调，闭包的自执行函数会有自己的作用域。在函数里面的代码没有执行的时候，自执行函数中的j是不会被释放掉的！

也就是说，循环转了6次！生成了6个独立的函数空间，每个空间中有自己独立的j变量，所以最终不会出现所有li点击都是lis.length的情况！                         

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

使用jquery与ajax进行数据交互

echarts实现饼图扇区统计表的添加点击事件

JavaScript面向对象与this指向（附代码）

Das obige ist der detaillierte Inhalt vonWelche Möglichkeiten gibt es, die Vererbung in JS zu implementieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!