Quelles sont les caractéristiques de l'héritage JavaScript ? Exemples d'héritage js-js tutoriel-php.cn

Quelles sont les caractéristiques de l'héritage JavaScript ? Exemples d'héritage js

不言

Libérer： 2018-09-15 15:25:35

original

1344 Les gens l'ont consulté

Le contenu de cet article porte sur quelles sont les caractéristiques de l'héritage JavaScript ? L'explication des exemples d'héritage js a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'elle vous sera utile.

J'ai récemment appris l'approche orientée objet de JS. Cet article traite principalement des éléments hérités de l'approche orientée objet de JS.

Caractéristiques de l'héritage en JS :

1 Les sous-classes héritent des classes parentes

2. . Les modifications apportées aux sous-classes n'affectent pas la classe parent

Ce qui suit utilise un exemple pour illustrer l'héritage JS

Ce code crée une classe parent et son prototype, crée également une sous-classe et hérite de la classe parent. propriétés privées de la classe parent

<script>
        //这是父类
        function Father(name,age,marry){
            this.name=name;
            this.age=age;
            this.marry=marry;
        }
        //父类的原型
        Father.prototype.showName=function(){
            alert(this.name);
        }

        //子类
        function Son(name,age,marry,weight){
            Father.call(this,name,age,marry);
            this.weight=weight;
        }
        
 </script>

Copier après la connexion

Lorsque la sous-classe Son veut hériter du prototype de la classe parent, mon approche consiste initialement à faire ceci

<script>
        //这是父类
        function Father(name,age,marry){
            this.name=name;
            this.age=age;
            this.marry=marry;
        }
        //父类的原型
        Father.prototype.showName=function(){
            alert(this.name);
        }

        //子类
        function Son(name,age,marry,weight){
            Father.call(this,name,age,marry);
            this.weight=weight;
        }
        
        //错误的做法
        Son.prototype=Father.prototype;
        Son.prototype.showAge=function(){
            alert(this.age);
        }
        var father=new Father(&#39;王大锤&#39;,30,true);
        alert(father.showAge);
        
</script>

Copier après la connexion

Les résultats de l'opération peuvent constater que le changement dans le prototype de la sous-classe affecte le prototype du parent class , il n'y a pas de méthode showAge dans le prototype de la classe parent, ce qui viole la troisième caractéristique de l'héritage.

Raison de l'analyse : Ligne 20 du code ci-dessus Son.prototype=Father.prototype ; le '=' ici est un objet des deux côtés, alors cela signifie

référence

, si c'est un référence Si tel est le cas, les modifications apportées à l'objet de gauche affecteront certainement l'objet de droite C'est pourquoi les modifications apportées au prototype de la sous-classe affectent le prototype de la classe parent.

Solution

Méthode 1 : Idée de base, le problème précédent n'est pas que '=' est la relation de référence qui provoque le problème Eh bien, il est alors garanti que '=' est toujours une relation d'affectation, pas une référence. Ici, nous définissons une méthode Clone() pour copier l'objet de la classe parent dans la classe enfant.

La raison pour laquelle la récursivité est utilisée dans la méthode Clone() est que les objets peuvent être imbriqués dans des objets pendant le processus de copie.

<script>
        //这是父类
        function Father(name,age,marry){
            this.name=name;
            this.age=age;
            this.marry=marry;
        }
        //父类的原型
        Father.prototype.showName=function(){
            alert(this.name);
        }

        //子类
        function Son(name,age,marry,weight){
            Father.call(this,name,age,marry);
            this.weight=weight;
        }
        Son.prototype=new Clone(Father.prototype);
        Son.prototype.showAge=function(){
            alert(this.age);
        }
        var father=new Father(&#39;王大锤&#39;,30,true);
        alert(father.showAge);

        //通过克隆对象:核心思路是保证 &#39;=&#39; 是赋值的关系，而不是引用，也就是保证 &#39;=&#39; 的右边不是对象
        function Clone(obj){
            for(var i=0;i<obj.length;i++){
                if(typeof(obj[key]==&#39;object&#39;)){
                    this.key=new Clone(obj[key]);
                }else{
                    this.key=obj[key];
                }
            }
        }  
</script>

Copier après la connexion

Le résultat à ce moment est que la méthode showAge de l'objet de classe parent n'est pas définie

Méthode 2 : Le code est très simple, mais difficile à comprendre, pas aussi facile à comprendre que la première méthode. Idée principale : les modifications apportées aux propriétés de l'objet lui-même n'affecteront pas les modifications apportées aux propriétés de son constructeur.

<script>
        //这是父类
        function Father(name,age,marry){
            this.name=name;
            this.age=age;
            this.marry=marry;
        }
        //父类的原型
        Father.prototype.showName=function(){
            alert(this.name);
        }
        //子类
        function Son(name,age,marry,weight){
            Father.call(this,name,age,marry);
            this.weight=weight;
        }
        function fn(){}
        fn.prototype=Father.prototype;
        Son.prototype=new fn();      
        Son.prototype.showAge=function(){
            alert(this.age);
        }
        var father=new Father(&#39;王大锤&#39;,30,true);
        alert(father.showAge);
        //通过克隆对象:核心思路是保证 &#39;=&#39; 是赋值的关系，而不是引用，也就是保证 &#39;=&#39; 的右边不是对象
        // Son.prototype=new Clone(Father.prototype);
        // function Clone(obj){
        //     for(var i=0;i<obj.length;i++){
        //         if(typeof(obj[key]==&#39;object&#39;)){
        //             this.key=new Clone(obj[key]);
        //         }else{
        //             this.key=obj[key];
        //         }
        //     }
        // }  
</script>

Copier après la connexion

Recommandations associées :