《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

相关阅读:
禾匠运行h5
禾匠前端用户中心显示隐藏菜单
 禾匠创建新插件
 芸众如何查看前端版本
 查看电脑内存条个数和内存是ddr几代
 yii框架中的andFilterWhere 和 andWhere的区别
 mysql 5.7之前版本截取json字符串的值
 FTP上传文件总是上传一半就断掉
 Java中如何保证线程安全性
 Java8内存结构解读
原文地址：https://www.cnblogs.com/juedui0769/p/4122131.html