js面向對象淺析--繼承那些事

前言

js中實現繼承的方式只支持實現繼承，即繼承實際的方法，而實現繼承主要是依靠原型鏈來完成的。

原型鏈式繼承

該方式實現的本質是重寫原型對象，代之以一個新類型的實例。

function SuperType(){
        this.property=true;
    }
    SuperType.prototype.getSuperValue=function(){
        return this.property;
    }

    function SubType(){
        this.subproperty=false;
    }
    SubType.prototype = new SuperType();//繼承
    SubType.prototype.getSubValue=function(){//額外添加方法
        return this.subproperty;
    }
    var s = new SubType();
        console.log(s.getSubValue());//false
        console.log(s.getSuperValue());//true

借用純原型鏈的問題：若是原型中包含引用類型的值，則實例間對該值的修改會相互影響，這不是咱們但願看到的。

借用構造函數

該方式的基本思想是在子類型的構造函數的內部調用超類型構造函數(父函數)

function SuperType(){
        this.color=['green','red','black'];
    }

    function SubType(){
        SuperType.call(this)//改變執行環境 實現繼承
    }
    var  s = new SubType();
        s.color.push('pink');
        console.log(s.color);//[ 'green', 'red', 'black', 'pink' ]
    var s1 = new SubType();
        console.log(s1.color);//[ 'green', 'red', 'black' ]

構造函數的問題：方法都在構造函數內部定義，則函數複用無從談起。

組合繼承

基本思路是使用原型鏈來實現對原型屬性和方法的繼承，經過構造函數實現實例屬性的繼承

function SuperType(name){
        this.name=name;
        this.color=['green','red','black'];
    }

    SuperType.prototype.show=function(){
        console.log(this.name,this.color);
    }

    function SubType(name,age){
        SuperType.call(this,name)//改變執行環境 實現實例屬性繼承
        this.age=age;
    }
    SubType.prototype = new SuperType();//原型屬性和方法繼承

    var s = new SubType('謙龍',100);
        s.show();//謙龍 ["green", "red", "black"]
    var s = new SubType('雛田',14);
    s.show();//雛田 ["green", "red", "black"]

原型式繼承

該方法的特色是藉助原型能夠基於一個已有的對象建立新的對象，同時還不比所以建立自定義類型

function object(obj){
        function F(){};
        F.prototype=obj;
        //F.prototype.constructor=F; 有須要還能夠修改constructor指向
        return new F();
    }

    var person={
        name:'謙龍',
        color:['red','green','black']
    }
    var p1 = object(person);
        p1.color.push('pink');

    var p2 = object(person);
    p2.color.push('grey');

    console.log(person.color);//["red", "green", "black", "pink", "grey"]

ES5中的Object.creat()與該方式的行爲相同

寄生式繼承

該方式的思路是建立一個僅用來封裝繼承過程的函數，該函數在內部以某種方式來加強對象，最後將該對象返回。

function object(obj){
        function F(){};
        F.prototype=obj;
        //F.prototype.constructor=F; 有須要還能夠修改constructor指向
        return new F();
    }

    function CObject(obj){
        var clone=object(obj);
        clone.sayHi=function(){
            alert('HI');
        }
        return clone;
    }
    var person={
        name:'謙龍',
        color:['red','green','black']
    }
    var s = CObject(person);
        s.sayHi();

寄生組合式繼承

思路是經過借用構造函數來繼承屬性，經過原型鏈的混合形式來繼承方法

function SuperType(name){
    this.name=name;
    this.color=['green','red','black'];
}
SuperType.prototype.show=function(){
    console.log(this.name,this.color);
}
function SubType(name,age){
    SuperType.call(this,name)//改變執行環境 實現繼承
    this.age=age;
}
function object(obj){
    function F(){};
    F.prototype=obj;
    //F.prototype.constructor=F; 有須要還能夠修改constructor指向
    return new F();
}

function inheritPrototype(subType,superType){
    var prototype=object(superType.prototype);
    prototype.constructor=subType;
    subType.prototype=prototype;
}
inheritPrototype(SubType,SuperType);
var s = new SubType('謙龍',100);
s.show();//謙龍 ["green", "red", "black"]

拷貝繼承

該方法思路是將另一個對象的屬性和方法拷貝至另外一個對象

function deepCopy(obj){
            if(typeof obj !='object'){
                console.trace();
                return obj;
            }
            var newObj={};
                for(var attr in obj){
                    newObj[attr]=typeof obj[attr]=='object'?deepCopy(obj[attr]):obj[attr];//使用遞歸
                }
            return newObj;
        }
        var obj={
            name:'min',
            age:20,
            sex:'boy',
            json:{
                name2:'huihui',
                json3:{
                    name3:'yahui'
                }
            }
        }
        var newObj=deepCopy(obj);
        console.log(newObj);