zoukankan html css js c++ java

《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

查看全文

相关阅读:
15年里，对您触动最大的中西方管理著作或思想是什么？
[代言]加入微软中国研发团队的机会
 CSS3 column属性族firefox浏览器下的问题
 JavaScript中__proto__与prototype的关系
 JavaScript对象模型执行模型
 【转】一步一步学Linq to sql（九）：其它补充
 WPF基础之样式设置和模板化
 【转】一步一步学Linq to sql（十）：分层构架的例子
 WPF基础之基元素
 WPF基础之属性系统

原文地址：https://www.cnblogs.com/juedui0769/p/4122131.html