JavaScript继承与聚合实例详解

本文实例讲述了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());

方式二图解为:

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

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

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(","));

第二种图解理解为:

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

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

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

(0)

相关推荐

  • 使用JavaScript保存文本文件到本地的两种方法

    一段使用javascript保存文件的代码.这里方法可以保存指定id元素下的所有html内容:不过这个方法只支持IE浏览器. function createHtml() { try { save_record("index1", $("#yhtcprediv").html()); } catch (e) { alert(e); } } function save_record(filename, content) { //打开新窗口保存 var winRecord

  • JavaScript使用Math.random()生成简单的验证码

    第一种:单纯的纯数字验证码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js验证码</title> </head> <body> <div class="yzm" style="width: 20%;height: 300px;text-al

  • JavaScript之解构赋值的理解

    1. ES6的新特性 允许将对象或者数组'分解'成多个单独的值, 以对象的解构开始. 代码示例 2. 说明 1).  定义一个对象 const obj={b:2,c:3,d:4}; 此时系统中没有变量b, 变量c与变量d 2). 开始解构该对象, const {a,b,c} = obj 这句话的意思是, 定义a,b,c三个变量, 然后在obj对象中寻找a,b,c变量, 如果找到, 则赋值给对应的变量 所以, a, 已定义, 但是未赋值. 定义是在const{a,b,c}中定义的, 而没有在obj

  • JavaScript两种计时器的实例讲解

    通过使用 JavaScript,我们有能力做到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行.我们称之为计时事件.提供了两种计时器的方法如下: window.setInterval(): 这个方法就是在一个周期内反复执行一直到窗口关闭或者 clearInterval() window.setTimeout(); 延迟执行内容 setInterval()的使用方法: setInterval(code,millisec); code:可以是方法名,如果是方法不要加小括号.同时也可以

  • JavaScript格式化json和xml的方法示例

    本文实例讲述了JavaScript格式化json和xml的方法.分享给大家供大家参考,具体如下: 格式化json实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>原生js格式化json的方法</title> </head> <body> <!--格式化后的json写入的位

  • 使用javascript做时间倒数读秒功能的实例

    某个试卷在线考试需要读秒.网上找了一会就是没找到我想要的.只好自己改改网上的,这也用用,那也用用. 其他代码不贴了.贴相关的: html页面代码: <a class="btn btn-default" onclick="StartExamine();">开始</a> <div id="TimeClock" class="col-md-4" ><span class="text

  • JavaScript中的回调函数实例讲解

    在JS中,函数可以作为参数传递给函数,不止可以传递值或者对象,案例如下: 定义: /** *@project: data_overnance *@package: *@date:2018/11/30 0030 15:07 *@author 郭宝 *@brief: 回调函数 */ export default class Person { constructor(){ } /** * 设置名称 * @param nameCallback 传入回调函数 */ setName(nameCallback

  • Javascript迭代、递推、穷举、递归常用算法实例讲解

    累加和累积 累加:将一系列的数据加到一个变量里面.最后的得到累加的结果 比如:将1到100的数求累加和 小球从高处落下,每次返回到原来一半,求第十次小球落地时小球走过的路程 <script> var h=100; var s=0; for(var i=0;i<10;i++){ h=h/2; s+=h; } s=s*2+100; </script> 累积:将一系列的数据乘积到一个变量里面,得到累积的结果. 常见的就是n的阶乘 var n=100; var result= 1;

  • javascript json字符串到json对象转义问题

    在使用JavaScriptSerializer.Serialize 方法转json对象时,遇到一个问题,后台方法生成的json字符串中有没有转义的特殊字符代码: 而这些特殊的代码在使用javascript的转json对象方法时报错,为了讲这个转义的东西转义过来,折腾了半天.着实对javascript无语: 后台代转的对象是 Dictionary<string,string> DepartmentsExistTaskCounts 前台页面使用的MVC里的razor 写法,直接使用后台方法把数据转

  • JavaScript中的"=、==、==="区别讲解

    = 是赋值运算,== 用于一般比较,=== 用于严格比较 == 在比较的时候可以转换数据类型: === 严格比较,只要类型不匹配就返回flase. 举例说明: "1" == true 类型不同,"=="将先做类型转换,把true转换为1,即为 "1" == 1: 此时,类型仍不同,继续进行类型转换,把"1"转换为1,即为 1 == 1: 此时,"==" 左右两边的类型都为数值型,比较成功! 如果比较:&qu

随机推荐