Quelles sont les façons d'implémenter l'héritage dans JS

Cette fois, je vais vous présenter quelques façons d'implémenter l'héritage en JS, et quelles sont les précautions pour implémenter l'héritage en JS. Voici des cas pratiques, jetons un coup d'œil.

Nous savons tous que les trois caractéristiques majeures de l'orienté objet sont l'encapsulation, l'héritage et le polymorphisme. L'encapsulation n'est rien de plus que la privatisation de propriétés et méthodes , nous fournissons donc des propriétés privées et des méthodes privées en JS. Il n’y a pas de polymorphisme dans JS, on dit donc que JS est un langage basé sur les objets plutôt qu’un langage orienté objet. Ainsi, parmi les trois caractéristiques majeures de l’orientation objet, la plus importante en JS est l’héritage.

1. Notions de base de l'héritage

En utilisant une sous-classe pour hériter d’une autre classe parent, la sous-classe peut automatiquement avoir les propriétés et méthodes de la classe parent.

>>>Les deux parties de l'héritage se produisent entre deux classes.

Par conséquent, ce qu'on appelle l'héritage n'est rien d'autre que de laisser à la sous-classe tous les attributs et méthodes de la classe parent. Ainsi, en JS, nous devons simuler cette étape, et il existe trois méthodes courantes pour y parvenir.

Ce sont les suivants : étendre le prototype d'Object pour implémenter l'héritage, utiliser call et apply pour implémenter l'héritage et utiliser prototype pour implémenter l'héritage.

2. Héritage de l'implémentation du prototype d'objet étendu

L'essence de l'extension d'Object pour réaliser l'héritage est que nous écrivons nous-mêmes une méthode pour copier toutes les propriétés et méthodes de la classe parent vers la sous-classe une par une via une boucle de parcours.

Les étapes détaillées sont les suivantes :

1 : Définir la classe parent

functionParent(){}

2 : Définir la sous-classe

funtion Son(){}

3 : Ajoutez une méthode d'extension à l'objet Object via le prototype.

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

4 : L'objet de sous-classe appelle la méthode d'extension

Son.customExtend(Parent);

3. Utilisez call et postulez pour implémenter l'héritage

Tout d’abord, pour utiliser cette méthode pour afficher l’héritage, passons en revue les fonctions de l’appel et appliquons les fonctions :

call and apply : appelle la méthode via le nom de la fonction pour forcer celle-ci dans la fonction à pointer vers un objet

; Méthode d'écriture d'appel : func.call (obj pointé par this de func, paramètre 1, paramètre 2...) ; Appliquer la méthode d'écriture : func.apply(obj pointé par ceci de func, [paramètre 1, paramètre 2...]); Ensuite, notre idée d'utiliser ces deux fonctions pour implémenter l'héritage est la suivante : dans la sous-classe, utilisez la fonction de la classe parent pour appeler call ou apply, et lier de force le this de la classe parent à celui de la sous-classe. Dans ce cas, les attributs et méthodes liés à this de la classe parent ne seraient-ils pas liés avec succès à this de la sous-classe ?

Les étapes détaillées sont les suivantes :

1 : Définir la classe parent

2 : Définir la sous-classe

funtion Parent(){}

3 : Appelez la classe parent via la méthode d'appel ou appliquez la méthode dans la sous-classe.

functionSon(){}

4. Utiliser des prototypes pour implémenter l'héritage

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

Utiliser des prototypes pour implémenter l'héritage est relativement simple et facile à comprendre. Il suffit de pointer le prototype de la sous-classe vers l'objet de la classe parent. Les étapes détaillées sont les suivantes :

1 : Définir la classe parent

2 : Définir la sous-classe

functionParent(){}

3 : Déclarez l'objet prototype dans l'objet sous-classe en tant qu'instance de la classe parent.

functionSon(){}

Son.prototype =newParent();5. Clôture

Pour comprendre les fermetures, nous devons d’abord comprendre la portée en JS : 1. Portée en JS

Variables globales : variables déclarées en dehors de la fonction

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

在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指向（附代码）

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!