JS面向对象的程序设计(二)

2011-10-30 21:53 三皮开发时阅读(218) 评论(0) 编辑收藏举报

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=GBK">
        <title>OO思想</title>

        <script>
                //父类
                function SuperType(){
                    this.proFlag = true;
                }

                //父类申明的方法
                SuperType.prototype.getSuperValue = function(){
                    return this.proFlag;
                }

                //子类
                function SubType(){
                    this.subProFlag = false;
                }

                //继承SuperType
                SubType.prototype = new SuperType();

                //子类申明的方法
                SubType.prototype.getSubValue = function(){
                    return this.subProFlag;
                }

                //原型继承
                function ooExtendPrototype(){
                    var instance = new SubType();

                    alert(instance.getSuperValue());//true
                    alert(instance.getSubValue());//false

                    alert(instance instanceof Object); //true
                    alert(instance instanceof SuperType); //true
                    alert(instance instanceof SubType); //true

                    alert(Object.prototype.isPrototypeOf(instance)); //true
                    alert(SuperType.prototype.isPrototypeOf(instance)); //true
                    alert(SubType.prototype.isPrototypeOf(instance)); //true
                }
                //[注]:原型继承的缺点->包含引用类型值类型的原型属性会被所有对象共享,就和他的方法一样，比如下面例子


                function Super(){
                    this.colors = ["red", "blue", "green"];
                }

                function Sub(){

                }

                //子类继承父类
                Sub.prototype = new Super();

                //原型链继承缺点
                function extendPrototypeDefect(){
                    var instance = new Sub();
                    instance.colors.push("black");
                    alert(instance.colors); //"red,blue,green,black"

                    var instance1 = new Sub();
                    alert(instance1.colors); //"red,blue,green,black"
                }

                //借用函数
                function SuperCons(){
                    this.colors = ["red", "blue", "green"];
                }

                function SubCons(){
                    //继承SuperCons
                    SuperCons.call(this);
                }

                 function brrowConstr(){
                     var instance = new SubCons();
                    instance.colors.push("black");
                    alert(instance.colors); //"red,blue,green,black"

                    var instance1 =new SubCons();
                    alert(instance1.colors); //"red,blue,green"
                 }

                 //[注]:借用构造函数也有自己的缺点，方法都在构造函数中定义，无法复用，浪费


                 //组合继承
                 //父类
                 function SuperTogether(name){
                     this.name = name;
                    this.colors = ["red", "blue", "green"];
                 }

                 SuperTogether.prototype = {
                     sayName : function(){
                        alert(this.name);
                    },
                    sayColors : function(){
                        alert("父类sayColors");
                    }
                 }
                 //子类
                 function SubTogether(name,age){
                     //继承了父类方法下所有thing...
                    //即:name,colors属性,由于父类的方法没有写在方法体类
                     SuperTogether.call(this,name);
                    this.age = age;
                 }

                 //继承方法方式
                 SubTogether.prototype = new SuperTogether();


                 SubTogether.prototype.sayHelloWorld = function(){
                    alert(this.name+" Say: "+"Hello,World "+this.age);
                 }

                 SubTogether.prototype.sayColorAgain = function(){
                    this.colors.push("SkyBlue");
                    alert(this.colors);
                 }

                 function superSubTogether(){
                     var instance = new SubTogether("SanPi",23);
                    instance.colors.push("Yellow");
                    alert(instance.colors); //"red,blue,green,Yellow"

                    instance.sayName(); //SanPi
                    instance.sayHelloWorld(); //SanPi Say: Hello,World 23
                    instance.sayColors(); //父类sayColors
                    instance.sayColorAgain(); //"red,blue,green,Yellow,SkyBlue"
                 }

                 //[注]:这组合继承非常好用，不过发现有种写法不行,在子类中的继承方式
                 //比如：
//                    SubTogether.prototype.sayHelloWorld = function(){
//                    alert(this.name+" Say: "+"Hello,World "+this.age);
//                 }

//                 SubTogether.prototype.sayColorAgain = function(){
//                    this.colors.push("SkyBlue");
//                    alert(this.colors);
//                 }
                //以上两种方法不能合并写在一起:
//                     SubTogether.prototype = {
//                        sayHelloWorld : function(){
//                    },
//                        sayColorAgain : function(){
//                    }
//                }
//                 【注】：这种写会修改子类的属性,继承过来的方法会无效，只能一个个写
        </script>
    </head>

    <body>
            <input type="button" value="继承之原型链" onclick="ooExtendPrototype()">
            <br>
            <input type="button" value="原型链继承缺点" onclick="extendPrototypeDefect()">
            <br>
            <input type="button" value="借用构造函数解决原型链继承缺点" onclick="brrowConstr()"/>
            <br>
            <input type="button" value="组合继承" onclick="superSubTogether()">
    </body>

</html>

刷新页面返回顶部

三皮觉罗

JS面向对象的程序设计(二)

About