《ext江湖》第8章继承-代码片段

时间：2024-10-07 11:05:38

创建Animal对象

<html>

<head>

<title>11</title>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=UTF-8">

<script type="text/javascript">

    Animal = function(tail){

        this.tail = tail || "动物的尾巴";

    };

    Animal.prototype={

        happy:function(){

            alert("摇动 > " + this.tail);

        },

        eat:function(){

            alert("动物吃生的");

        },

        run:function(){

            alert("动物四条腿跑");

        },

        fight:function(){

            alert("动物往死里打");

        }

    };

    Animal.prototype.constructor=Animal;

    var a = new Animal("蓬松的尾巴");

    a.happy();

    var b = new Animal("长尾巴");

    b.happy();

    var init = function(){};

</script>

</head>

<body onload="init();">

</body>

</html>

创建Person对象，继承Animal

<html>

<head>

<title>11</title>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=UTF-8">

<script type="text/javascript">

    Animal = function(tail){

        this.tail = tail || "动物的尾巴";

    };

    Animal.prototype={

        happy:function(){

            alert("摇动 > " + this.tail);

        },

        eat:function(){

            alert("动物吃生的");

        },

        run:function(){

            alert("动物四条腿跑");

        },

        fight:function(){

            alert("动物往死里打");

        }

    };

    Animal.prototype.constructor=Animal;

    Person = function(name){

        this.name = name;

    };

    Person.prototype=new Animal();

    var p = new Person("大漠穷秋");

    alert(p.tail);

    alert(p.name);

    p.happy();

    p.eat();

    p.run();

    p.fight();

    var init = function(){};

</script>

</head>

<body onload="init();">

</body>

</html>

删除Person的tail属性

<html>

<head>

<title>11</title>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=UTF-8">

<script type="text/javascript">

    Animal = function(tail){

        this.tail = tail || "动物的尾巴";

    };

    Animal.prototype={

        happy:function(){

            alert("摇动 > " + this.tail);

        },

        eat:function(){

            alert("动物吃生的");

        },

        run:function(){

            alert("动物四条腿跑");

        },

        fight:function(){

            alert("动物往死里打");

        }

    };

    Animal.prototype.constructor=Animal;

    Person = function(name){

        this.name = name;

    };

    Person.prototype=new Animal();

    delete Person.prototype.tail;

    var p = new Person("大漠穷秋");

    alert(p.tail);

    var init = function(){};

</script>

</head>

<body onload="init();">

</body>

</html>

重置constructor

<html>

<head>

<title>11</title>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=UTF-8">

<script type="text/javascript">

    Animal = function(tail){

        this.tail = tail || "动物的尾巴";

    };

    Animal.prototype={

        happy:function(){

            alert("摇动 > " + this.tail);

        },

        eat:function(){

            alert("动物吃生的");

        },

        run:function(){

            alert("动物四条腿跑");

        },

        fight:function(){

            alert("动物往死里打");

        }

    };

    Animal.prototype.constructor=Animal;

    Person = function(name){

        this.name = name;

    };

    Person.prototype=new Animal();

    delete Person.prototype.tail;

    Person.prototype.constructor=Person;

    var p = new Person("大漠穷秋");

    alert(p.constructor);

    alert(p.constructor==Person);

    var init = function(){};

</script>

</head>

<body onload="init();">

</body>

</html>

对象冒充

<html>

<head>

<title>11</title>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=UTF-8">

<script type="text/javascript">

    Animal = function(tail){

        this.tail = tail || "动物的尾巴";

    };

    Animal.prototype={

        happy:function(){

            alert("摇动 > " + this.tail);

        },

        eat:function(){

            alert("动物吃生的");

        },

        run:function(){

            alert("动物四条腿跑");

        },

        fight:function(){

            alert("动物往死里打");

        }

    };

    Animal.prototype.constructor=Animal;

    Person = function(name){

        Animal.call(this);

        this.name = name;

        delete this.tail;

    };

    var p = new Person("大漠穷秋");

    alert(p.name);

    alert(p.tail);

    p.happy();

    p.eat();

    p.run();

    p.fight();

    var init = function(){};

</script>

</head>

<body onload="init();">

</body>

</html>

静态属性, undefined是正常的。

<html>

<head>

<title>11</title>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=UTF-8">

<script type="text/javascript">

    Animal = function(tail){

        this.tail = tail || "动物的尾巴";

        Animal.instanceCounter++;

    };

    Animal.prototype={

        happy:function(){

            alert("摇动 > " + this.tail);

        },

        eat:function(){

            alert("动物吃生的");

        },

        run:function(){

            alert("动物四条腿跑");

        },

        fight:function(){

            alert("动物往死里打");

        }

    };

    Animal.prototype.constructor=Animal;

    Person = function(name){

        Person.superclass.call(this);

        this.name = name;

    };

    Person.superclass = Animal;

    var p1 = new Person("大漠穷秋");

    alert(Person.instanceCounter);

    var init = function(){};

</script>

</head>

<body onload="init();">

</body>

</html>
<html>

<head>

<title>11</title>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=UTF-8">

<script type="text/javascript">

    Animal = function(tail){

        this.tail = tail || "动物的尾巴";

        Animal.instanceCounter++;

    };

    Animal.instanceCounter=0;

    Animal.prototype={

        happy:function(){

            alert("摇动 > " + this.tail);

        },

        eat:function(){

            alert("动物吃生的");

        },

        run:function(){

            alert("动物四条腿跑");

        },

        fight:function(){

            alert("动物往死里打");

        }

    };

    Animal.prototype.constructor=Animal;

    Person = function(name){

        Person.superclass.call(this);

        this.name = name;

        for(var p in Animal){

            //不能拷贝父类的prototype上的属性

            Person[p] = Animal[p];

        }

    };

    Person.superclass = Animal;

    var p1 = new Person("大漠穷秋");

    var p2 = new Person("小秋");

    alert(Person.instanceCounter);

    //不能拷贝父类的prototype上的属性

    p1.happy();

    var init = function(){};

</script>

</head>

<body onload="init();">

</body>

</html>

原型继承：可以把父类prototype上的属性全部继承下来，而且利用内建的原型查找机制，子类的运行效率会比较高。但是，原型继承不能“继承”父类的静态属性。

对象冒充：可以继承通过this赋值的属性，配合上for...in循环的处理还可以“继承”父类的静态属性。但是，不能继承父类中通过prototype设置的属性。

对象冒充和原型继承综合运用

<html>

<head>

<title>11</title>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=UTF-8">

<script type="text/javascript">

    Animal = function(tail){

        this.tail = tail || "动物的尾巴";

        Animal.instanceCounter++;

    };

    Animal.instanceCounter=0;

    Animal.prototype={

        happy:function(){

            alert("摇动 > " + this.tail);

        },

        eat:function(){

            alert("动物吃生的");

        },

        run:function(){

            alert("动物四条腿跑");

        },

        fight:function(){

            alert("动物往死里打");

        }

    };

    Animal.prototype.constructor=Animal;

    Person = function(name){

        //对象冒充,并删除不需要的属性

        Person.superclass.call(this);

        delete this.tail;

        this.name = name;

        //拷贝父类的静态属性

        for(var p in Animal){

            Person[p] = Animal[p];

        }

    };

    Person.superclass = Animal;

    //原型继承并删除不需要的方法

    var F = function(){};

    F.prototype=Animal.prototype;

    delete F.prototype.fight;

    Person.prototype = new F();

    Person.prototype.constructor=Person;

    var p1 = new Person("大漠穷秋");

    alert(Person.instanceCounter);

    alert(p1.tail);

    alert(p1.name);

    p1.eat();

    p1.fight();

    var init = function(){};

</script>

</head>

<body onload="init();">

</body>

</html>

覆盖prototype上的方法

<html>

<head>

<title>11</title>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=UTF-8">

<script type="text/javascript">

    Animal = function(tail){

        this.tail = tail || "动物的尾巴";

        Animal.instanceCounter++;

    };

    Animal.instanceCounter=0;

    Animal.prototype={

        happy:function(){

            alert("摇动 > " + this.tail);

        },

        eat:function(){

            alert("动物吃生的");

        },

        run:function(){

            alert("动物四条腿跑");

        },

        fight:function(){

            alert("动物往死里打");

        }

    };

    Animal.prototype.constructor=Animal;

    Person = function(name){

        //对象冒充,并删除不需要的属性

        Person.superclass.call(this);

        delete this.tail;

        this.name = name;

        //拷贝父类的静态属性

        for(var p in Animal){

            Person[p] = Animal[p];

        }

    };

    Person.superclass = Animal;

    //原型继承并删除不需要的方法

    var F = function(){};

    F.prototype=Animal.prototype;

    delete F.prototype.fight;

    F.prototype.eat = function(){

        alert("人类吃熟的");

    };

    /**

    需要覆盖多个方法时使用Ext的apply

    Ext.apply(F.ptototype, {

        eat:function(){

            alert("人类吃熟的");

        }

    });

    **/

    Person.prototype = new F();

    Person.prototype.constructor=Person;

    var p1 = new Person("大漠穷秋");

    p1.eat();

    var init = function(){};

</script>

</head>

<body onload="init();">

</body>

</html>

--