JavaScript继承与聚合实例详解


Posted in Javascript onJanuary 22, 2019

本文实例讲述了JavaScript继承与聚合。分享给大家供大家参考,具体如下:

一、继承

第一种方式:类与被继承类直接耦合度高

1. 首先,准备一个可以被继承的类(父类),例如

//创建一个人员类
function Person(name) {//现在Person里面的域是由Person里面的
来this来控制的
  this.name=name;
}

2. 然后,有个需要继承父类的子类

function Teacher(name,books) {
  Person.call(this,name);//相当于java中的super函数 在new Teacher时将Person的name初始化
  this.books=books;
}

说明一下:

(1)call方法可以将一个函数的对象上下文从初始化变成由this来决定一个类去控制另一个类

(2)Teacher类去控制 Person类 用Teacher域里面的 this来控制Person域里面的 this

(3)调用 Perosn的构造函数,因为Perosn没有用 new 所以是个空对象(模板)     显示调用call方法,可以初始化 Person

3. 最后,实现继承

(步骤1)先继承

Teacher.prototype=new Person();
Teacher.prototype.constructor=Teacher;//确保继承后任然是Teacher自己的构造函数

(步骤2)为子类扩展一些方法,用于访问从父类继承的内容

Teacher.prototype.getBook=function () {
  return this.name+" "+this.books;
}

(步骤3)使用已经继承好的类

var jim=new Teacher("Jim","Javascript");
alert(jim.getBook())

总结:此种方法是直接在子类中显示调用父类,耦合度高,复用性差。

第二种方式,使用封装,完成程序中所用继承操作

1. 首先,准备一个可以被继承的类(父类),例如

//创建一个人员类
function Person(name) {//现在Person里面的域由Person里面的来this来控制的
  this.name=name;
}

2. 创建extend函数为了程序中所有的继承操作(最重要的地方)

/*创建extend函数为了程序中所有的继承操作*/
//subClass:子类 superClass:超类(2)
function extend(subClass,superClass) {
    //1,使子类原型属性等于父类的原型属性
    //初始化一个中间空对象,目的是为了转换主父关系
    var F = function () {};
    F.prototype = superClass.prototype;
    //2, 让子类继承F
    subClass.prototype = new F();
    subClass.prototype.constructor = subClass;
    //3,为子类增加属性 superClass ==》原型链的引用
    subClass.superClass = superClass.prototype;
    //4,增加一个保险,就算你的原型类是超类(Object)那么也要把你的构造函数级别降下来  【说明一些:这里只是其中一个简单的保险,其余情况后续增加。。。】
    if (superClass.prototype.constructor == Object.prototype.constructor) {
      superClass.prototype.constructor = superClass;
    }
}

3. 有一个需要继承其他类的子类

function Author(name,books) {
  Author.superClass.constructor.call(this,name);//没有直接写父类,降低了耦合度
  //Person.call(this,name)  直接写Person代表其构造函数
  this.books=books;
  this.getBooks=function () {
    return this.name+" "+this.books ;
  }
}

4. 最后,实现继承

//继承
extend(Author,Person);//(子类,父类)

5. 使用已经继承好的类

var peter=new Author("Peter","Javascript");
alert(peter.getBooks());

方式二图解为:

 JavaScript继承与聚合实例详解

这里可能会有一个疑问就是为啥要使用中间类???

这里假如没有中间类的话,我们在实例化子类时就需要为父类传递一些相应的参数,这样的话,该句代码

Author.superClass.constructor.call(this,name);

就不能放在子类(Author)中,而是需要放入到extend中,这样的话代码的通用性就很低,故此需要使用中间类。

二、聚合

使用聚合的原因,有的时候不需要严格的继承,我们真正需要的是一个类(或几个类)中的一些函数。故此我们可以使用聚合 也就是使用 掺元类

 对于聚合有两种情况

第一种是聚合到 var a={}空类或者不是用function声明的类中

1. 首先,需要一个合适的可以被聚合的类(给体),此时需要在本类的内部进行扩展属性,方法

var JSON={//写到类的内部
    toJsonString:function () {
      var output=[];
      for(key in this){//this代表那个调用,就指向那个一个对象
        output.push(key+"---->"+this[key]);
      }
      return output;
    }
};

2. 制作一个聚合函数(最重要)

/*聚合函数
receivingClass:接受聚合内容的类
givingClass:被聚合的目标类
* */
function mixin(receivingClass,givingClass){
    for(methodName in givingClass){
      if(!receivingClass.__proto__[methodName]){//判断当前原型中是否含有即将要被聚合的方法,若没有则聚合进来
        receivingClass.__proto__[methodName]=givingClass[methodName];//直接获得类中的方法,因为方法是直接写在方法内部的。
      }
    }
}

3. 接受聚合的类(受体)

var get={name:"Text",age:20};

4. 实现将JSON类的方法聚合到类get中

mixin(get,JSON);//(受体,给体)

5. 使用get类中聚合的方法

document.write(get.toJsonString().join(","));

第二种是聚合用function声明的类中

var a=function(){}

1. 首先,需要一个合适的可以被聚合的类(给体),此时需要在本类的原型对象上进行扩展属性,方法

var JSON={};
JSON.prototype={//写到类的原型对象上
 toJsonString:function () {
 var output=[];
 for(key in this){//this代表那个调用,就指向那个一个对象
 output.push(key+"---->"+this[key]);
 }
 return output;
 }
}

2. 制作一个聚合函数

(2)制作聚合函数(receivingClass中聚合givingClass中的属性,或者方法)

function mixin(receivingClass,givingClass) {
 for(methodName in givingClass.prototype){
 if(!receivingClass.prototype[methodName]){//判断当前原型中是否含有即将要被聚合的方法,若没有则聚合进来
 receivingClass.prototype[methodName]=givingClass.prototype[methodName];
 }
 }
}

3. 接受 聚合的类(受体)

var o=function () {
 this.name="聚合";
 this.age=19;
}

4. 实现JSON类到o类的聚合(将JSON类中的方法聚合到o类中)

mixin(o,JSON);//(受体,给体)

5. 使用o类中聚合而来的方法

var useO=new o();
document.write(useO.toJsonString().join(","));

第二种图解理解为:

 JavaScript继承与聚合实例详解

该方式属于类o上一层的聚合。

更多关于JavaScript相关内容还可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript 读取xml,写入xml 实现代码
Jul 10 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
Jan 05 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
Nov 20 Javascript
Javascript中for循环语句的几种写法总结对比
Jan 23 Javascript
js微信应用场景之微信音乐相册案例分享
Aug 11 Javascript
vue.js实现带日期星期的数字时钟功能示例
Aug 28 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
Oct 09 Javascript
JavaScript Dom 绑定事件操作实例详解
Oct 02 Javascript
javascript使用链接跨域下载图片
Nov 01 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
Apr 20 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
Jul 31 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
Sep 04 Javascript
JavaScript格式化json和xml的方法示例
Jan 22 #Javascript
基于vue的验证码组件的示例代码
Jan 22 #Javascript
JavaScript中的"=、==、==="区别讲解
Jan 22 #Javascript
深入分析element ScrollBar滚动组件源码
Jan 22 #Javascript
js实现京东秒杀倒计时功能
Jan 21 #Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
Jan 21 #Javascript
JavaScript使用Math.random()生成简单的验证码
Jan 21 #Javascript
You might like
世界上第一台立体声收音机
2021/03/01 无线电
咖啡语言
2021/03/03 咖啡文化
php+ajax做仿百度搜索下拉自动提示框(有实例)
2012/08/21 PHP
PHP将Excel导入数据库及数据库数据导出至Excel的方法
2015/06/24 PHP
laravel5.6实现数值转换
2019/10/23 PHP
HR vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
JS 文件本身编码转换 图文教程
2009/10/12 Javascript
JavaScript的类型转换(字符转数字 数字转字符)
2010/08/30 Javascript
JS文本框追加多个下拉框的值的简单实例
2013/07/12 Javascript
Jquery选中或取消radio示例
2013/09/29 Javascript
js 点击页面其他地方关闭弹出层(示例代码)
2013/12/24 Javascript
js原型继承的两种方法对比介绍
2014/03/30 Javascript
js插件YprogressBar实现漂亮的进度条效果
2015/04/20 Javascript
JavaScript实现cookie的写入、读取、删除功能
2015/11/05 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
2015/12/07 Javascript
js将json格式的对象拼接成复杂的url参数方法
2016/05/25 Javascript
Bootstrap Modal遮罩弹出层(完整版)
2016/11/21 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
2016/12/21 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
2017/03/21 jQuery
webpack-dev-server自动更新页面方法
2018/02/22 Javascript
React 组件中的 bind(this)示例代码
2018/09/16 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
2019/08/26 Javascript
python中实现指定时间调用函数示例代码
2017/09/08 Python
python学习教程之使用py2exe打包
2017/09/24 Python
基于Python实现迪杰斯特拉和弗洛伊德算法
2020/05/27 Python
python下的opencv画矩形和文字注释的实现方法
2019/07/09 Python
python 实现矩阵填充0的例子
2019/11/29 Python
Python如何基于selenium实现自动登录博客园
2019/12/16 Python
Python注释、分支结构、循环结构、伪“选择结构”用法实例分析
2020/01/09 Python
Python3 实现爬取网站下所有URL方式
2020/01/16 Python
python使用numpy实现直方图反向投影示例
2020/01/17 Python
如何利用CSS3制作3D效果文字具体实现样式
2013/05/02 HTML / CSS
印刷工程专业应届生求职信
2013/09/29 职场文书
幼儿教师寄语集锦
2014/04/03 职场文书
三严三实对照检查材料
2014/08/25 职场文书
Python必备技巧之函数的使用详解
2022/04/04 Python