經典繼承

js中實現經典繼承的方式是通過構造函數來實現的，即在子類中對父類調用call方法。

  function Geometric() {
                this.time = "";
                this.color = "";
                this.base = function () {
                    alert("Creating time is: " + this.time + " and color is: " + this.color)
                }
            }
    
            function Circle() {
                Geometric.call(this);
                this.radius = 0;
                this.area = function () {
                    alert("the area is: " + Math.PI * this.radius * this.radius)
                    
                }
            }
            function Rectangle() {
                Geometric.call(this);
                this.wi = 0;
                this.he = 0;
                this.area = function () {
                    alert("the area is: " + this.wi * this.he)
                }
            }
            var instance1 = new Circle()
           
            instance1.time = "20xx.xx.xx"
            instance1.color = "red"
            instance1.radius = 0.3;
            instance1.area()
            instance1.base()
            
    
            var instance2 = new Rectangle()
            instance2.time = "20xx.xx.xx"
            instance2.color = "blue"
            instance2.wi = 3;
            instance2.he = 4;
            instance2.area();
            instance2.base();

組合繼承

組合繼承又稱偽經典繼承，是通過原型鏈（實現對原型屬性和方法的繼承） +借用構造函數（實現對實例屬性的繼承） 。

父類的方法定義在父類的原型上；子類中繼續進行父類的call方法的調用；讓子類的原型指向父類；子類的方法定義在子類原型上。

  //組合繼承
        //原型鏈+借用構造函數
        function Geometric() {
            this.time = "";
            this.color = "";

        }
        //方法定義在構造函數的原型上
        Geometric.prototype.base = function () {
            alert("Creating time is: " + this.time + " and color is: " + this.color)
        }

        function Circle() {
            Geometric.call(this);
            this.radius = 0;

        }
        Circle.prototype = new Geometric()
        Circle.prototype.area = function () {
            alert("the area is: " + Math.PI * this.radius * this.radius)
        }
        var instance3 = new Circle();
        instance3.time = "20xx.xx.xx"
        instance3.color = "green";
        instance3.radius = "20"
        instance3.base();
        instance3.area();

原型式繼承

原型式繼承使用了一個空函數對象F來作為原型鏈的中間變量。

父類的方法定義在父類的原型上；子類中繼續進行父類call方法的調用；構造一個空函數對象F；讓F的原型=父類的原型；子類的原型=F；子類原型的構造函數=子類；子類的方法構造在子類原型上。

  //原型式繼承
        //使用一個空函數F來當做中間對象
        function Geometric() {
            this.time = "";
            this.color = "";

        }
        //方法定義在構造函數的原型上
        Geometric.prototype.base = function () {
            alert("Creating time is: " + this.time + " and color is: " + this.color)
        }
        function Circle() {
            Geometric.call(this);
            this.radius = 0;

        }

        function F() { }
        F.prototype = Geometric.prototype;
        Circle.prototype = new F()
        Circle.prototype.constructor = Circle();


        Circle.prototype.area = function () {
            alert("the area is: " + Math.PI * this.radius * this.radius)
        }

        var instance4 = new Circle();
        instance4.time = "2018.06.03"
        instance4.color = "green";
        instance4.radius = "20"
        instance4.base();
        instance4.area();
        alert(instance4.__proto__ == Circle.prototype)
        alert(instance4.__proto__.__proto__ == Geometric.prototype)

寄生繼承

寄生繼承了創建一個用於封裝繼承過程的函數。

創建一個繼承函數；傳入一個父類對象；在函數內構造該父類對象；在函數內創建子類；return該父類對象；

//寄生繼承
        //創建一個用於封裝繼承過程的函數
        function createGeometric(g) {
            var clone1 = Object(g);
            clone1.createCircle = function (radius) {
                this.radius = radius;
                this.circleArea = function () {
                    alert("the area is: " + Math.PI * this.radius * this.radius)

                }
            }
            clone1.createRectangle = function (wi, he) {
                this.wi = wi;
                this.he = he;
                this.rectangleArea = function () {
                    alert("the area is: " + this.wi * this.he);
                }
            }
            clone1.base = function () {
                alert("Creating time is: " + g.time + " and color is: " + g.color)
            }
            //最後要將新創建的對象return出去
            return clone1
        }
        var g = {
            time: "20xx.xx.xx",
            color: "red"
        }


        var Geometric = createGeometric(g);

        Geometric.base();
        Geometric.createCircle(2.0);
        alert(Geometric.circleArea())
        Geometric.createRectangle(4, 5);
        alert(Geometric.rectangleArea())

寄生組合繼承

寄生組合繼承避免了組合繼承中的一些冗余現象。

組合繼承中：子類中進行了父類call方法的調用；子類的原型指向父類；這樣就會有一定的冗余。

寄生組合繼承中，通過一個函數（此處寫為inheritPrototype）來代替子類的原型指向父類這一過程

    //寄生組合繼承，避免了組合繼承中的冗余現象
        function inheritPrototype(subType, superType) {
            var protoType = Object.create(superType.prototype); //創建對象
            protoType.constructor = subType;     //增強對象
            subType.prototype = protoType;      //指定對象
        }

        function Geometric() {
            this.time = "";
            this.color = "";

        }
        //方法定義在構造函數的原型上
        Geometric.prototype.base = function () {
            alert("Creating time is: " + this.time + " and color is: " + this.color)
        }

        function Circle() {
            Geometric.call(this);
            this.radius = 0;

        }
        //Circle.prototype = new Geometric()
        inheritPrototype(Circle, Geometric)
        Circle.prototype.area = function () {
            alert("the area is: " + Math.PI * this.radius * this.radius)
        }
        var instance5 = new Circle();
        instance5.time = "20xx.xx.xx"
        instance5.color = "green";
        instance5.radius = "20"
        instance5.base();
        instance5.area();

javascript學習筆記--經典繼承、組合繼承、原型式繼承、寄生繼承以及寄生組合繼承