Maison interface Web js tutoriel JAVASCRIPT 对象的创建和对6种继承模式的理解和遐想

JAVASCRIPT 对象的创建和对6种继承模式的理解和遐想

Oct 15, 2016 pm 05:38 PM

JS中总共有六种继承模式,包括原型链、借用构造函数、组合继承、原型式继承寄生式继承和寄生组合式继承。为了便于理解记忆,我遐想了一个过程,对6中模式进行了简单的阐述。

  很长的一个故事,姑且起个名字叫女娲造人吧。

 

  创建对象

  女娲一个一个的捏人(创建对象),这样太慢,于是设计了一种机器(函数),想造什么样的,告诉他这个人有哪些特点和功能,机器来制造。这就是工厂模式的(使用同一个接口创建对象,回产生大量重复代码,由此发明了一种函数(模具))。

    但是机器造人同样也比较麻烦(挖土、和泥、捏眼睛、捏鼻子...)于是封装的思想来了,鼻子眼睛什么的提前捏好备用,改造机器,告诉要造的人具有什么样的眼睛,鼻子,机器可以直接拿来安装ok,这样的机器就是构造函数。

  这样仍然存在问题,假设要让捏的人都能跑,就要机器给每个人安装一个‘跑’的功能,这样工序太慢,还可能出错,找第三方吧(函数方法定义到构造函数外部,全局作用域中)。第三方负责给我把捏的人都装上跑的功能,我拿来再放到机器上用,省的每次都加工。ok,人都能跑了,很方便,但是问题又出现了,造的人还需要‘跳’、‘走’..的N个功能,总不能再找N个第三方吧,那这样建机器就没意义了。于是女娲(开发人员)早创造了原型模式...厉害了我的娲。

  原型模式中每个函数都有一个prototype属性,是指针,指向原型对象。原型对象包含能让所有实例共享的属性和方法,这个原型对象有一个constructor属性,这个属性包含一个指向prototype属性所在函数的指针。

  看似有点绕,从女娲这个角度就好理解了:造物主女娲娘娘还发明了个各种各样的模具(原型对象),要开始造了:1造一类人-->用的是造这类人的模具。  毕竟可以造万物,造什么用什么样的模具。所有造人机器(函数)都有各自唯一的一个模具(原型对象),并且机器有一个标签[prototype],指向模具,这个模具有能贴生产标志的[constructor]属性,指向这个机器,表示是这个机器的模具生产。因此要造什么样的一类人,只需要改模具就好了。这就是原型对象的好处,方便,快捷。

  生产过程如下: 1造机器A :function  jqA(){}; //有个prototype属性,指向模具(原型对象)

          2造模具:jqA.prototype={

            constructor: jqA, //相当于贴上标签,由A机器生产,

            name:'lily',

            skin:'white',

            run: function(){

            alert(this.name+'run');  }

                         }

           这个模具负责造名字叫lili,皮肤为white,能run的这类人。

          3  造一个这类型的人    var person1=new jqA();

           再造一个这类型的人  var person2=new jaA();

    person1和person2都有一个[[prototype]]属性,表示经过模板A处理了,指向A模板

    很完美,问题又来了,这样生产出来的人都一样,迎面走来五个一模一样的白皮肤窈窕美女,然后又有五个一抹一样的矮挫丑,太可怕了。 所以机器A在用模板的同时,还可以根据女指令来使造的这类人有不同的特点,比如:这个蓝眼睛,那个胖点。。这个额外的功能通过构造函数实现---》组合使用构造函数和原型模式

    生产过程如下:       

        //组合使用构造函数模式和原型模式
            function  Person(name,skill,country) {
                this.name=name;
                this.age=skill;
                this.country=country;
                this.member=["刘封","刘婵"];
            } //机器可以听命令
 
            Person.prototype={
                constructor:Person,
                sayName:function () {
                    alert(this.name);
                }
            }  //还可以用模板
             var person1=new Person('马超','铁骑','蜀国');
             var person2=new Person('刘备','仁德','蜀国');
Copier après la connexion

这时候,女娲懒得照顾机器的同时又照顾模板,所以直接把模板装在了机器中:在构造函数中初始化原型对象---》动态原型模式 更方便了

    生产过程如下:

    function  Person(name,skill,country) {
                  this.name=name;
                  this.skill=skill;
                  this.country=country;
             if(typeof this.sayCountry !=undefined){
                   Person.prototype.sayCountry=function () {
                       alert(this.country);
                   };
               }
              }
            var friend=new Person('张飞','咆哮','蜀国');
            friend.sayCountry();
Copier après la connexion

还有问题?ok,提供寄生构造函数模式:机器中加个内部机器,这个内部机器负责生产,并生产的的人提供给外部机器,外部机器向外提供这类人就好。(一般用不到吧..)

  继承(我的理解—_—)

  问题:女娲要造另一批人B,这批人的模板B造好了,但是想让这批人有之前造过的那批人的特点,怎么办?先让这些人过滤一下先前的模板A,在放到B中造就ok,这样类‘B人'就继承了‘A’类人的特点。如何过滤:父实例=子原型 建B的模板,造一个a出来,这个a肯定要过滤A模板,所以让B的模板等于a就ok,问题解决。 

 //父函数,机器A,A类人。它的实例a中有[[Prototype]]属性和自定义的property属性

    function SuperType(){
    this.property=true;
    }
    //在SuperType原型对象(模具A)中添加getSuperValue方法
    SuperType.prototype.getSuperValue=function(){
    return this.property 
      }
 
    //子函数,机器B,B类人。构造函数SubType,它的实例中有[[Prototype]]属性和自定义的subproperty属性
    function SubType(){
    this.subproperty=false;
      }
    //继承了SuperType (原型链)
    SubType.prototype=new SuperType();  //机器B=a
    //在SubType原型对象(模具B)中添加getSubValue方法
    SubType.prototype.getSubValue=function(){
return tis.subproperty;
    };  
    var insatance=new SubType();
    alert(insatance.getSuperValue()); //true
Copier après la connexion

问题:引用类型值会改变,因为实例共享属性,和原型模式中的问题相同

解决方案:经典继承 (借用构造函数):其实就是把模具A设计到机器B中,但是它已经不是模板了,机器B会给生产的b们添加这些A中的属性和方法,但是可以人为控制,女娲又命令机器B根据传递不同的命令生产不同的b。

  

在子类构造函数的内部调用超类构造函数

     相当于把父类的属性实例化到子类中?Java中的super() 存在疑问

 

   function SuperType(){
  this.colors=['red','blue','green'];
    }
    function SubType(){
    //继承了SuperTYpe
    SuperType.call(this);
     }
    var insatance1=new SubType();
    insatance1.colors.push('black');
    alert(insatance1.colors);// 'red,blue,green,black'
 
    var insatance2=new SubType();
    alert(insatance2.colors);//'red,blue,green'
Copier après la connexion

1传递参数:

      借用构造参数可以在子类型构造参数中向超类型构造参数传递参数

 

     function SuperType(name){
   this.name=name;
      }
      function SubType(){
    //继承了SuperTYpe,同时还传递了参数
    SuperType.call(this,'赵云');
 
    //实例属性
    this.age=29;
    }
Copier après la connexion

    var insatance=new SubType();

    alert(insatance.name); //赵云

    alert(insatance.age); //29

为了确保SuperType构造函数不会重写子类型的属性,可以在调用超类型构造函数之后,再添加应该在子类型中定义的属性。

问题:浪费劳动力,在机器中创建A具有的功能和属性,那么A模板就没用了,相当于回到工厂模式,都有打火机了,还要钻木取火吗....

  解决方案:组合继承

    在公司加班没事做,现在赶着下班,故事编不下去了,后面的继承模式搬之前的记录吧..   

  原型链和构造函数技术组合到一起,使用原型链实现对原型属性和方法的继承,借用构造函数来实现对实例属性的继承。这样通过在原型上定义方法实现了函数的复用,有能够保证每个实例都有它自己的属性

    原型继承:方法可以,实例属性无法继承; 借用构造函数:实例属性可以,方法不行。 一起用,完美。

     

  function SuperType(name){
   this.name=name;
   thi.colors=['red','blue','green'];
     }
    SuperType.prototype.sayName=function(){
   alert(this.name);
    };
 
    function SubType(name,age){
  //继承属性
  SuperType.call(this,name);
  this.age=age;
    }
     //继承方法
   SubType.prototype=new SuperType();
 
   SubType.prototype.sayAge=function(){
    alert(this.age);
   }
 
  var instance1=new SubType('zhaoyun',29);
  instance1.colors.push('black');
  alert(instance1.colors); //'red,blue,green,black'
  instance1.sayName();//zhaoyun
  instance1.sayAge();//29
 
  var insatance2=new SubType('诸葛瑾',25);
  alert(instance2.colrs);'red,blue,green'
  instance22.sayName();//诸葛瑾
  instance2.sayAge();//25
Copier après la connexion


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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment créer et publier mes propres bibliothèques JavaScript? Comment créer et publier mes propres bibliothèques JavaScript? Mar 18, 2025 pm 03:12 PM

L'article discute de la création, de la publication et du maintien des bibliothèques JavaScript, en se concentrant sur la planification, le développement, les tests, la documentation et les stratégies de promotion.

Comment optimiser le code JavaScript pour les performances dans le navigateur? Comment optimiser le code JavaScript pour les performances dans le navigateur? Mar 18, 2025 pm 03:14 PM

L'article traite des stratégies pour optimiser les performances JavaScript dans les navigateurs, en nous concentrant sur la réduction du temps d'exécution et la minimisation de l'impact sur la vitesse de chargement de la page.

Que dois-je faire si je rencontre l'impression de code brouillé pour les reçus en papier thermique frontal? Que dois-je faire si je rencontre l'impression de code brouillé pour les reçus en papier thermique frontal? Apr 04, 2025 pm 02:42 PM

Des questions et des solutions fréquemment posées pour l'impression de billets thermiques frontaux pour le développement frontal, l'impression de billets est une exigence commune. Cependant, de nombreux développeurs mettent en œuvre ...

Comment déboguer efficacement le code JavaScript à l'aide d'outils de développeur de navigateur? Comment déboguer efficacement le code JavaScript à l'aide d'outils de développeur de navigateur? Mar 18, 2025 pm 03:16 PM

L'article traite du débogage efficace de JavaScript à l'aide d'outils de développeur de navigateur, de se concentrer sur la définition des points d'arrêt, de l'utilisation de la console et d'analyser les performances.

Qui est payé plus de python ou de javascript? Qui est payé plus de python ou de javascript? Apr 04, 2025 am 12:09 AM

Il n'y a pas de salaire absolu pour les développeurs Python et JavaScript, selon les compétences et les besoins de l'industrie. 1. Python peut être davantage payé en science des données et en apprentissage automatique. 2. JavaScript a une grande demande dans le développement frontal et complet, et son salaire est également considérable. 3. Les facteurs d'influence comprennent l'expérience, la localisation géographique, la taille de l'entreprise et les compétences spécifiques.

Comment utiliser les cartes source pour déboguer le code JavaScript minifié? Comment utiliser les cartes source pour déboguer le code JavaScript minifié? Mar 18, 2025 pm 03:17 PM

L'article explique comment utiliser les cartes source pour déboguer JavaScript minifiée en le mappant au code d'origine. Il discute de l'activation des cartes source, de la définition de points d'arrêt et de l'utilisation d'outils comme Chrome Devtools et WebPack.

Début avec Chart.js: tarte, beignet et graphiques à bulles Début avec Chart.js: tarte, beignet et graphiques à bulles Mar 15, 2025 am 09:19 AM

Ce tutoriel expliquera comment créer des graphiques à tarte, anneaux et bulles à l'aide de chart.js. Auparavant, nous avons appris quatre types de graphiques de graphique. Créer des graphiques à tarte et à anneaux Les graphiques à tarte et les graphiques d'anneaux sont idéaux pour montrer les proportions d'un tout divisé en différentes parties. Par exemple, un graphique à secteurs peut être utilisé pour montrer le pourcentage de lions mâles, de lions féminins et de jeunes lions dans un safari, ou le pourcentage de votes que différents candidats reçoivent lors des élections. Les graphiques à tarte ne conviennent que pour comparer des paramètres ou des ensembles de données uniques. Il convient de noter que le graphique à tarte ne peut pas dessiner des entités avec une valeur nulle car l'angle du ventilateur dans le graphique à tarte dépend de la taille numérique du point de données. Cela signifie toute entité avec une proportion nulle

La différence dans Console.Log de sortie Résultat: Pourquoi les deux appels sont-ils différents? La différence dans Console.Log de sortie Résultat: Pourquoi les deux appels sont-ils différents? Apr 04, 2025 pm 05:12 PM

Discussion approfondie des causes profondes de la différence de sortie Console.log. Cet article analysera les différences dans les résultats de sortie de la fonction Console.log dans un morceau de code et expliquera les raisons derrière. � ...

See all articles