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

最新推荐文章于 2024-09-02 17:34:07 发布
最新推荐文章于 2024-09-02 17:34:07 发布
阅读量59 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/juedui0769/p/4122131.html
版权

 

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

 

 

 

 

 

 

 

 

 

--

 

转载于:https://www.cnblogs.com/juedui0769/p/4122131.html

weixin_30512089
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
language-ext:C＃函数语言扩展-函数编程的基类库
04-01
C＃函数式编程语言扩展 该库使用并滥用C＃的功能来提供功能编程的“基类库”，如果您着眼睛看，它看起来像是对语言本身的扩展。 这里的愿望是使C＃编程更加可靠，并使工程师的...要使用language-ext的代码生成功能（顺
Ext-JS-meetup-Tokyo-materials:在东京Ext JS聚会上展示的源代码-Material source code
03-24
这个资料包“Ext-JS-meetup-Tokyo-materials”显然包含了在东京Ext JS聚会上分享的源代码和材料，这是一次技术交流活动，参与者可能探讨了如何利用Ext JS开发高质量的Web界面。 在JavaScript框架中，Ext JS以其组件...
Java基础
weixin_48864482的博客
03-20 415
Java基础部分
JAVA开发全集
热门推荐
u神的专栏
09-23 1万+
soap消息的分析和消息的创建和传递和处理 @WebService public interface IMyService {  @WebResult(name="addResult")  public int add(@WebParam(name="a")int a,@WebParam(name="b")int b);    @WebResult(name="us
国庆征文获奖名单公布
CSDN 官方博客
10-18 8831
来看看你上榜没哦～
springData Jpa 快速入门
WGH100817的博客
05-17 83
前言： 数据持久化的操作，一般都要由我们自己一步步的去编程实现，mybatis通过我们编写xml实现，hibernate也要配置对应的xml然后通过创建session执行crud操作。那么有没有这样一种技术，就是把底层的这些crud操作都封装好了，我们直接调用方法就行了，答案是有的，通过springData Jpa 就可以实现。点我可下载本案例源码。 一、简介：...
rails3 新特性 和 RJS评论
系统运维
03-13 228
rails 3.0是2010年8月份发布的。迄今为止，3.0已历经多个tiny版到了3.0.8。3.1已经放出rc4，看起来离正式版已为期不远。相对于2系，3系还是有一些令人惊喜的变化，而且在架构上也规范和严整了许多。3.1中更是又加入了几个颇为有趣的特性。我们的项目一直都是紧跟rails新版，很欣慰能够毫无道德压力地做一个喜新厌旧常换常新的男人。但什么都追新也吃了不少小苦头，不过仍然死不悔改，大...
一些重要的面试题！
弹吉他的ZTT的博客
05-03 4340
1.单例模式可能是代码最少的模式了，但是少不一定意味着简单，想要用好、用对单例模式，还真得费一番脑筋。本文对Java中常见的单例模式写法做了一个总结，如有错漏之处，恳请读者指正。饿汉法顾名思义，饿汉法就是在第一次引用该类的时候就创建对象实例，而不管实际是否需要创建。代码如下：1234567public class Singleton {       private static Singleton...
深入分析 Java 中的中文编码问题（转载）
江湖人称黑哥的博客
09-23 98
Java 中需要编码的场景 前面描述了常见的几种编码格式，下面将介绍 Java 中如何处理对编码的支持，什么场合中需要编码。 I/O 操作中存在的编码 我们知道涉及到编码的地方一般都在字符到字节或者字节到字符的转换上，而需要这种转换的场景主要是在 I/O 的时候，这个 I/O 包括磁盘 I/O 和网络 I/O，关于网络 I/O 部分在后面将主要以 Web 应用为例介绍。下图是 Java 中处...
rails3项目解析之2——rails基础
seamon
06-10 257
[url=http://www.iteye.com/topic/1058510]rails3项目解析之1——系统架构[/url] [url=http://www.iteye.com/topic/1108383]rails3项目解析之3——redis[/url] rails 3.0是2010年8月份发布的。迄今为止，3.0已历经多个tiny版到了3.0.8。3.1已经放出rc4，看起来离...
【完结】cyのMemo（20231231~20240208）
一只热爱奔跑的程序猿
12-31 4210
凛冬终逝，新年仍有太阳升起。
ext2-linux-file-system：EXT2文件系统仿真器
02-05
1. `src`目录：源代码文件，包含了实现EXT2文件系统仿真器的C语言代码。 2. `include`目录：头文件，定义了EXT2相关的数据结构和函数原型。 3. `doc`或`README`文件：项目文档，提供了关于如何编译、安装和使用仿真...
IPQ4019, QSDK资源, 开源代码-make-ext4fs-2015-05-01.tar.gz
07-23
IPQ4019, QSDK资源, 开源代码--make-ext4fs-2015-05-01.tar.gz
Python库 | git_ext-0.6.0-py2-none-any.whl
02-16
**Python库git_ext-0.6.0-py2-none-any.whl详解** 在Python的开发环境中，库扮演着至关重要的角色，它们提供了丰富的功能，让开发者能够更高效地完成任务。`git_ext`是一个这样的库，专为处理Git相关的操作而设计。...
vue3+vite 通过js引入的src，在打包后为什么不能显示
肖肖肖丽珠的博客
09-02 316
页面有个图片我是动态设置的。但是打包之后一直没有找到。我本来使用的绝对定位发现不行，改成了相对的也不行，最后改成下面的这种就可以啦。
Vue双向绑定
m0_56131422的博客
09-01 795
简单来说，双向绑定就是数据改变影响视图，视图改变也会影响数据。Vue 的双向绑定主要通过v-model。
跨页面进行数据通讯
最新发布
榴莲不好吃的专栏
09-02 495
Broadcast Channel API 允许在一个源的不同窗口、标签页或 iframe 之间进行通信。这是一种实时的通信机制，非常适合需要实时同步数据的场景。3.iframe 数据通讯 postMessage/message（可设置不同源数据通讯）1.使用 LocalStorage 或 SessionStorage（同源）// 检查消息来源，确保来自正确的源。// 检查消息来源，确保来自正确的源。'Hello 来自父亲的消息!'Hello 来自儿子的消息!// 忽略来自自身的消息。
【基础】Three.js加载纹理贴图、加载外部gltf格式文件
stay hungry, stay foolish
09-02 1502
.gltf（JSON文件）: 描述模型的主要结构，包括几何体、材质、动画、场景等。.bin（二进制文件）: 存储顶点数据、法线、UV坐标等二进制数据。纹理（.png, .jpg）: 存储模型使用的纹理贴图。。
深度解析Ext框架：Ext江湖
在面向对象和继承章节，作者介绍了Ext的类系统，让读者能够构建可复用的代码结构。UI组件部分是Ext的核心，书中涵盖了各种组件如表格、面板、窗口等的使用方法。布局管理则讲述了如何有效地组织和调整组件在屏幕上的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值