JavaScriptの継承にはどのような特徴があるのでしょうか? js継承の例

この記事では、JavaScript 継承の特徴について説明します。 js の継承例の説明は参考になると思います。

私は最近 JS のオブジェクト指向のアプローチを学びました。この記事では主に JS のオブジェクト指向のアプローチに継承されたものについて説明します。

JS の継承の機能:

1. サブクラスは親クラスを継承します。

3. サブクラスは親クラスのメソッドと属性を使用できます。サブクラスへの変更は親クラスには影響しません。

次の例では、JS 継承を説明します。

このコードは、親クラスとそのプロトタイプを作成し、サブクラスも作成して、親クラスのプライベート プロパティ

<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>

サブクラス Son が親クラスのプロトタイプを継承したい場合、私のアプローチは最初にこれを行うことです。

<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>

の、サブクラスのプロトタイプへの変更が親クラスのプロトタイプに影響を与えることがわかります。親クラスのプロトタイプ プロトタイプには showAge メソッドがありませんが、これは継承の 3 番目の特性に違反します。

分析理由: 上記のコードの 20 行目 Son.prototype=Father.prototype; ここの「=」は両側のオブジェクトであり、それが の場合は

Reference

を意味します。参照である場合、左側のオブジェクトへの変更は、間違いなく右側のオブジェクトに影響します。 だからこそ、サブクラスのプロトタイプの変更は、親クラスのプロトタイプに影響します。

#解決策

#方法 1: 中心的なアイデア。前述の問題は、'=' が原因となる参照関係ではありません。問題 さて、「=」は参照ではなく常に代入関係であることが保証されます。ここでは、親クラスのオブジェクトを子クラスにコピーする Clone() メソッドを定義します。

Clone() メソッドで再帰が使用される理由は、コピー プロセス中にオブジェクトがオブジェクト内でネストされる可能性があるためです。

<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>

現時点では、親クラス オブジェクトの showAge メソッドは未定義です。

方法 2: コードは非常に簡単ですが、最初の方法ほど理解しにくいことは想像しにくいです。基本的な考え方: オブジェクト自体のプロパティの変更は、そのコンストラクターのプロパティの変更には影響しません。

<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>

関連する推奨事項:

JS の継承メソッドの詳細な説明

js の継承メソッドとは何ですか? js 継承の 2 つの方法の紹介 (コード付き)

以上がJavaScriptの継承にはどのような特徴があるのでしょうか? js継承の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。