井底之蛙

好记性不如烂笔头.菜鸟笔记.
  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
《ext江湖》第8章继承-代码片段

 

 创建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>
View Code

 

创建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>
View Code

 

删除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>
View Code

 

重置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>
View Code

 

对象冒充

<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>
View Code

 

静态属性, 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>
View Code
<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>
View Code

 原型继承：可以把父类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>
View Code

 

覆盖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>
View Code

 

 

 

 

 

 

 

 

 

--

 

posted on 2014-11-25 22:48  井底之蛙丶  阅读(142)  评论(0)  编辑  收藏  举报