首頁 > 文章 > web前端 > javascript繼承有什麼特色？ js繼承的實例講解

javascript繼承有什麼特色？ js繼承的實例講解

不言原創: 2018-09-15 15:25:351327瀏覽

本篇文章帶給大家的內容是關於javascript繼承有什麼特色？ js繼承的實例講解，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

最近學了 JS 的物件導向，這篇文章主要是探討 JS 的物件導向中繼承的那些事。

JS中繼承的特點：

1、子類別繼承父類別；

2、子類別可以用父類別的方法和屬性

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方法的，這就違背了前面繼承的第三個特點了。

分析原因：上面程式碼的第20行 Son.prototype=Father.prototype;這裡的'=' 兩邊都是對象，那麼它代表的意思就是引用#，如果是引用的話，左邊的物件改變，一定會影響了右邊的物件

所以才出現了子類別原型的改變影響了父類別的原型。

解決方法

方法一：核心思路，前面的問題不是說'=' 是引用的關係才會導致問題的嘛，那這裡就保證'=' 永遠是賦值的關係，而不是引用。這裡就定義一個 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方法是undefined

方法二：程式碼很簡單，但是很難想到，沒有第一個方法那麼好理解。核心思想：物件自身屬性的改變，不會影響其建構函數的屬性的改變。

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

javascript繼承有什麼特色？ js繼承的實例講解

相關文章