Les petites choses (instances) héritées du langage orienté objet de JS-js tutoriel-php.cn

Les petites choses (instances) héritées du langage orienté objet de JS

青灯夜游

Libérer： 2018-09-15 16:17:08

original

1092 Les gens l'ont consulté

Ce chapitre vous présentera les petites choses (instances) de l'héritage dans le JS orienté objet, afin que vous puissiez comprendre quelles sont les caractéristiques de l'héritage dans JS ? Quelques petites connaissances sur l'héritage en orienté objet. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

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

1 Les sous-classes héritent des classes parentes

2. attributs de la classe parent

3. Les modifications apportées à la sous-classe ne peuvent pas affecter la classe parent

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

Ce code crée un Le parent classe et son prototype, et a également créé une sous-classe et hérité des 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 a voulu hériter du prototype de la classe parent, mon approche était initialement Après avoir fait cela

<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 petites choses (instances) héritées du langage orienté objet de JS

, nous pouvons constater que le changement dans le prototype de la sous-classe affecte le prototype de la classe parent. 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, cela signifie donc une référence. S'il s'agit d'une référence, l'objet sur. les changements à 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 cause le problème, alors ici nous garantissons '=' 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écursion 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

Les petites choses (instances) héritées du langage orienté objet de JS

Méthode 2 : Le code est très simple, mais il est difficile à imaginer et 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

Les petites choses (instances) héritées du langage orienté objet de JS