Maison > interface Web > js tutoriel > Les exemples ES5 détaillent les différentes méthodes d'héritage de JavaScript

Les exemples ES5 détaillent les différentes méthodes d'héritage de JavaScript

小云云
Libérer: 2018-02-03 14:31:07
original
1591 Les gens l'ont consulté

En tant que langage de script léger, JavaScript a atteint de nouveaux sommets après l'émergence d'ES6 et de node.js. Bien que le nouveau format de syntaxe de classe pour générer des objets soit apparu dans ES6, il s'agit toujours du sucre syntaxique ES5, mais nous en avons toujours besoin. pour commencer par l'implémentation native de JavaScript pour comprendre son implémentation d'héritage, ES6 fournit une méthode de déclaration de classe fixe plus concise.

Différents développeurs ont des compréhensions différentes de l'héritage JavaScript. Je pense qu'il est principalement divisé en quatre types

 - 原型链继承
 - 对象冒充继承(构造函数继承 不过我不喜欢这个名字)
 - 组合继承
 - 寄生组合继承
Copier après la connexion

Pour l'héritage, vous pouvez déclarer un animal à l'avance, puis discuter du méthode d'héritage différente.
    let Animal = (function () {
      function Animal (name) {
        this.name = name || 'Animal';
        this.sleep = function(){
          console.log(this.name + '正在睡觉!');
        }
      }
      Animal.prototype.eat = function(food) {
        console.log(this.name + '正在吃:' + food);
      }
      return Animal;
    })()
Copier après la connexion
  1. Héritage de chaîne de prototypes

        let Cat = (function () {
          function Cat(){ 
          }
          Cat.prototype = new Animal();
          Cat.prototype.name = 'cat';
          return Cat;
        })()
    Copier après la connexion
    原型链是 javascript 的典型继承方式, 这种继承方式的最大特点就是共享,所有事例共享原型对象中的所有属性和方法, 共享是它的最大优点 也是它的最大缺点, 正对我们的不同需求, 比如大多数情况下我们常常需要某些属性是子类特有的  而一些读取属性方法需要共享,--另外此种继承无法向父类传参,无法实现多继承
    Copier après la connexion
  2. Objet prétendant être un héritage

        let Cat = (function () {
          function Cat(name){
            Animal.call(this,name);
          }
          return Cat;
        })()
    Copier après la connexion
    对象冒充继承就是简单的利用call或者apply方法实现继承,这种继承最大的特点正好与原型链继承相反不能继承原型属性/方法--非共享(子类自有一份), 同样这是它的优点也是它的缺点, 另外它解决了原型链继承中无法向父类传参的缺点, 并且可以实现某种意义上的多继承--(注意这种多继承是打引号的)
    Copier après la connexion
  3. héritage combiné

        let Cat = (function () {
          function Cat(name){
            Animal.call(this, name);
          }
          Cat.prototype = new Animal();
          Cat.prototype.constructor = Cat;
          return Cat;
        })()
    Copier après la connexion
    组合继承是比较好的继承, 他是原型链继承和对象冒充继承的合体, 合理的利用了这两种组合的特点(是特点不是优点^_^),既是子类的实例,也是父类的实例, 但有一个缺点就是调用了两次父类构造函数,生成了两份实例(子类实例将子类原型上的那份屏蔽了)造成内存浪费. 这也是用的最多的一种
    Copier après la connexion
  4. héritage combiné parasite

        let Cat = (function () {
          function Cat(name){
            Animal.call(this, name);
          }
          (function(sub, sup){
            var Super = function(){};
            Super.prototype = sup.prototype;
            sub.prototype = new Super();
            sub.prototype.constructor = sub
          })(Cat, Animal)
          return Cat;
        })()
    Copier après la connexion
parasitisme L'héritage combiné est une sublimation de l'héritage combiné. Je pense personnellement que c'est une méthode d'héritage parfaite. Elle améliore le problème de gaspillage de mémoire de l'héritage combiné ^_^

Recommandations associées :

Pourquoi avez-vous besoin d'utiliser javascript pour implémenter l'héritage ? Explication détaillée de plusieurs méthodes d'héritage avec des exemples

Explication détaillée de l'utilisation et des inconvénients de la méthode d'héritage de chaîne de prototype JavaScript

Trois méthodes d'héritage et leurs avantages et inconvénients en js

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