Maison > interface Web > js tutoriel > le corps du texte

Bases de l'héritage JavaScript renforçant le partage de notes

小云云
Libérer: 2018-03-12 14:10:34
original
1312 Les gens l'ont consulté

Pour des raisons de sécurité, les classes locales et les classes hôtes ne peuvent pas être héritées, mais d'autres peuvent être héritées. ECMAScript ne définit pas strictement les classes abstraites, mais certaines classes ne sont pas autorisées à être utilisées. La sous-classe héritera de toutes les propriétés et méthodes de la superclasse, y compris les constructeurs et les implémentations de méthodes. N'oubliez pas que toutes les propriétés et méthodes sont publiques, les sous-classes peuvent donc accéder directement à ces méthodes. Les sous-classes peuvent également ajouter de nouvelles propriétés et méthodes qui ne figurent pas dans la superclasse et peuvent également remplacer les propriétés et méthodes de la superclasse.

Le mécanisme d'héritage en JavaScript n'est pas explicitement spécifié, mais est implémenté par imitation. Cela signifie que tous les détails de l'héritage ne sont pas entièrement gérés par l'interpréteur.

Usurpation d'identité d'objet

  • Pour parler franchement, il s'agit d'abord d'écrire une méthode constructeur de super classe A. Écrivez un autre constructeur de classe B

  • puis référencez le constructeur de A dans la méthode de B ;

    Supprimez la référence à ClassA après utilisation.
  • Définir les attributs de sous-classe (tous les nouveaux attributs de sous-classe sont définis après suppression de la référence)
  • L'usurpation d'identité d'objet peut obtenir un héritage multiple
<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>
Copier après la connexion

Une classe peut hériter de plusieurs superclasses. ClassX et ClassY, ClassZ veut hériter de ces deux classes.


S'il existe deux classes ClassX et ClassY avec des propriétés ou des méthodes portant le même nom, ClassY a une priorité élevée.
Parce qu'il hérite de la classe suivante. La méthode call() est la plus similaire à la méthode classique d’usurpation d’identité d’objet.

Un paramètre utilisé comme objet de ceci. Tous les autres paramètres sont transmis directement à la fonction elle-même.


<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>
Copier après la connexion
Copier après la connexion
Méthode apply()

Deux paramètres, l'objet utilisé comme ceci et les paramètres à transmettre au tableau de fonctions.

Le deuxième paramètre de apply ne peut être qu'un tableau


<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>
Copier après la connexion
Copier après la connexion
Chaînage de prototypes (chaînage de prototypes)

Hériter ce Ce formulaire était à l'origine utilisé dans ECMAScript pour les chaînes de prototypes.


À propos de l'instance d'opération

<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>
Copier après la connexion

Dans la chaîne de prototypes, l'instance d'opérateur fonctionne également de manière unique. instanceof renvoie true pour ClassA et ClassB pour toutes les instances de ClassB.

Méthode mixte

<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>
Copier après la connexion

Dans le constructeur ClassB, les objets sont utilisés pour faire semblant d'être un héritage La propriété sColor de la classe ClassA.

<span style="font-size: 14px;">var objB = new ClassB();<br/>alert(objB instanceof ClassA);  //输出 "true"alert(objB instanceof ClassB);  //输出 "true"</span>
Copier après la connexion
Copier après la connexion

Dans la deuxième ligne de code en surbrillance, utilisez la chaîne de prototypes pour hériter des méthodes de la classe ClassA.

<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>
Copier après la connexion
Copier après la connexion
  • Notes de renforcement des bases de JavaScript - Héritage

    Pour des raisons de sécurité, les classes locales et les classes hôtes ne peuvent pas hériter, les autres Tous peut être hérité.
  • ECMAScript ne définit pas strictement les classes abstraites, mais certaines classes ne sont pas autorisées à être utilisées.

La sous-classe héritera de toutes les propriétés et méthodes de la superclasse, y compris l'implémentation des constructeurs et des méthodes. N'oubliez pas que toutes les propriétés et méthodes sont publiques, les sous-classes peuvent donc accéder directement à ces méthodes. Les sous-classes peuvent également ajouter de nouvelles propriétés et méthodes qui ne figurent pas dans la superclasse et peuvent également remplacer les propriétés et méthodes de la superclasse.

Le mécanisme d'héritage en JavaScript n'est pas explicitement spécifié, mais est implémenté par imitation. Cela signifie que tous les détails de l'héritage ne sont pas entièrement gérés par l'interpréteur.

Usurpation d'identité d'objet

Pour parler franchement, il s'agit d'écrire une méthode constructeur de super classe Une première. Écrivez un autre constructeur de classe B


puis référencez le constructeur de A dans la méthode de B ;

Supprimez la référence à ClassA après utilisation.

  • Définir les attributs de sous-classe (tous les nouveaux attributs de sous-classe sont définis après suppression de la référence)

  • L'usurpation d'identité d'objet peut obtenir un héritage multiple

  • Une classe peut hériter de plusieurs superclasses. ClassX et ClassY, ClassZ veut hériter de ces deux classes.

  • S'il existe deux classes ClassX et ClassY avec des propriétés ou des méthodes portant le même nom, ClassY a une priorité élevée.

    Parce qu'il hérite de la classe suivante.

    <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>
    Copier après la connexion
    Copier après la connexion

    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>
    Copier après la connexion
    Copier après la connexion

    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>
    Copier après la connexion

    原型链(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>
    Copier après la connexion

    关于 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>
    Copier après la connexion
    Copier après la connexion

    混合方式

    <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>
    Copier après la connexion
    Copier après la connexion
    • ClassB 构造函数中,用对象冒充继承 ClassA 类的 sColor 属性。

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

    相关推荐:

    javascript继承体系详解

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

    javascript继承方式详解

    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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!