javascript 中的繼承一

    1、關於原型鏈的示例
    <script type="text/javascript">
        (function(){
            function Shape(){
                this.name = 'Shape';
                this.toString = function(){
                    return this.name;
                }
            }
            function Triangle(side,height){
                this.name = 'Triangle';
                this.side = side;
                this.height = height;
                this.getArea = function(){ 
                    return this.side * this.height / 2;
                }
            }
            Triangle.prototype = new Shape();
            Triangle.prototype.constructor = Shape;

            var my = new Triangle(5,10);
            console.log(my.getArea());        
            console.log(my.toString());

            /*
            下面看看javascript 引擎是怎麼作的
            1.遍歷my對象的全部屬性，沒有找到toString()方法
            2.去查看my.__proto__指向的對象，該對象是構建繼承關係時建立的new Shape()
            3.在new Shape()對象中找到了toString()方法
            4.因爲是my對象調用的toString()方法，this指向的是my
            */

            console.log('============我是分隔符=============');
        })();
    </script>

    2、將共有屬性遷移到原型中，依舊繼承實例對象
    <script type="text/javascript">
        (function(){
            function Shape(){
                this.name = 'Shape';
            }
            Shape.prototype.toString = function(){
                return this.name;
            }

            function Triangle(side,height){
                this.name = 'Triangle';
                this.side = side;
                this.height = height;
            }

            Triangle.prototype = new Shape();//這裏先構建繼承，再擴展原型，不然下面的getArea()將會丟失

            Triangle.prototype.getArea = function(){
                return this.side * this.height / 2;
            }

            var my = new Triangle(5,10);
            console.log(my.getArea());
            console.log(my.toString());
            console.log('============我是分隔符=============');
        })();

    </script>

    3、只繼承於原型
    <script type="text/javascript">
        (function(){
            /*
            把共有的屬性和方法添加到原型中去，這樣依靠原型就能夠實現繼承的構建了，
            而不是繼承 new Shape()建立的實體，這樣能夠提升效率
            */

            function Shape(name){
                this.name = name;
            }
            Shape.prototype.toString = function(){
                return this.name;
            }

            function Triangle(name,side,height){
                this.name = name;
                this.side = side;
                this.height = height;
            }

            Triangle.prototype =Shape.prototype; //這裏仍是先構建繼承關係
            Triangle.constructor.prototype = Triangle;

            Triangle.prototype.getArea = function(){
                return this.side * this.height / 2;
            }

            /*
            Triangle.prototype.toString = function(){ //這裏覆蓋了Shape的toString()方法
                return '這裏是Triangle的toString()方法';
            }*/

            var s = new Shape('shape');
            var t = new Triangle('triangle',5,10);

            console.log(t.toString());
            console.log(t.getArea());
            console.log(s.toString()); 

            /*
                注意：這裏繼承的是原型，第二種繼承的是實例對象，省去了實例屬性和方法的查找
            */
            console.log('============我是分隔符=============');
        })();
    </script>

    4、臨時構造器 new F()繼承
    <script type="text/javascript">
        (function(){
            function Shape(){}
            Shape.prototype.name = 'shape';
            Shape.prototype.toString = function(){
                return this.name;
            }

            function Triangle(side,height){
                this.side = side;
                this.height = height;
            }
            //臨時構造器 new F()
            var F = function(){}
            F.prototype = Shape.prototype;
            Triangle.prototype = new F();
            Triangle.prototype.constructor = Triangle;

            Triangle.prototype.name = 'triangle';
            Triangle.prototype.getArea = function(){
                return this.side * this.height / 2;
            }
            /*
            這樣作的好處是讓父對象的屬性擺脫子對象對其的影響，
            回看第三種只繼承於原型中註釋掉的，Triangle覆蓋toString()，
            你會發現Shape()的toString()也發生了改變，有時候這種並不合適

            而當前這種只是修改了new F()實例的toString(),並不會影響到Shape()的toString()             */         })();     </script>