早在学习java的时候,就已经接触了继承,在java中因为有extends关键字,因此继承就比较简单。但是在JavaScript中,只能通过灵活的办法实现类的继承。

下面是我昨天在学习过程中,了解到的实现继承的一些方法,包括有具体的代码以及该方法的优缺点:

1.组合继承方式

  原理:在子类的构造函数中,调用父类的构造函数,在子类原型上实例化父类,所以称为组合模式。

  优点:融合了类式继承和构造函数继承的优点

  缺点:父类构造函数调用了两次。第一次是使用构造函数时调用了父类的构造函数,第二次是实现子类原型的类式继承时又调用了一次。

  

    /*
1.组合继承方式
缺点:在初始化时会调用两次构造函数
*/
var SuperClass = function(id,name){
this.id = id;
this.name = name;
this.books = ['javascript','html','css']; }
SuperClass.prototype.getName = function(){
return this.name; }
SuperClass.prototype.getId = function(){
return this.id; }
var SubClass = function(id,name,price){
SuperClass.call(this,id,name);
this.price = price; }
SubClass.prototype = new SuperClass();
SubClass.prototype.getPrice = function(){
return this.price; } //测试用例
var sub = new SubClass('001','css',25);
sub.books.push('internet');
console.log(sub.books);//["javascript", "html", "css", "internet"]
var father = new SuperClass('002','html');
console.log(father.books);// ["javascript", "html", "css"]

2、寄生式组合继承

  原理:原型继承和构造函数继承组合,此方法是Douglas Crockford对寄生式继承的一个改造。

    /**
*2.寄生式组合继承法
**/
function inheritObject(o){
function F(){};
F.prototype = o;
return new F();
}
/**
*1、继承设置
*传递参数:subclass子类
*传递参数:superclass父类
**/
function inheritPrototype(subClass,superClass){
//先将父类原型副本保持一份在变量中
var p = inheritObject(superClass.prototype);
p.constructor = subClass;
subClass.prototype = p; } var SuperClass = function(id,name){
this.id = id;
this.name = name;
this.books = ['javascript','html','css']; }
SuperClass.prototype.getName = function(){
return this.name; }
SuperClass.prototype.getId = function(){
return this.id; }
var SubClass = function(id,name,price){
SuperClass.call(this,id,name);
this.price = price; }
inheritPrototype(SubClass,SuperClass);
SubClass.prototype.getPrice = function(){
return this.price; } //测试用例
var sub = new SubClass('001','css',25);
sub.books.push('internet');
console.log(sub.books);//["javascript", "html", "css", "internet"]
var father = new SuperClass('002','html');
console.log(father.books);// ["javascript", "html", "css"]
console.log(SubClass.prototype instanceof SuperClass);//SubClass的实例才是SuperClass的一个实例,true

3、多重继承

  原理:将所有的目标属性和方法复制,可带多个参数。

    Object.prototype.mix = function(){
//复制属性和方法
var len = arguments.length; for(var i = 0; i < len; i++){
var arg = arguments[i];
for(var property in arg){
this[property] = arg[property];
}
} }
var Book = function(id,name){
this.id = id;
this.name = name; }
var Image = function(url,size){
this.url = url;
this.size = size;
}
//测试用例
var book = new Book('001','javascript');
var image = new Image('http://baidu.com',52);
var imageBook = new Object();
var imageBook1 = new Object();
imageBook.mix(book,image);
imageBook1.mix(book,image);
imageBook1.name = "真的很不错";
console.log(imageBook);// Object { id="001", name="javascript", url="http://baidu.com", 更多...}
console.log(imageBook1);// Object { id="001", name="真的很不错", url="http://baidu.com", 更多...}

4、多态

  原理:非常类似于java中的函数的重载,只不过加上了一些封装

  例子:比如一个add()方法,无参数,返回0;一个参数,返回参数本身值+10;两个参数,返回两个参数值相加

  

    //多态
var add = function(){
function zero(){
return 0;
}
function one(num){
return 10 + num;
}
function two(num1,num2){
return num1 + num2;
}
var arg = arguments;
var len = arg.length;
switch(len){
case 0 : return zero();
case 1 : return one(arg[0]);
case 2 : return two(arg[0],arg[1]);
}
}
console.log(add());//
console.log(add(5));//
console.log(add(2,18));//

到此,第二章的知识也就完毕了,迎来第三章。有错误的话,请大家留言指正哦~~

JavaScript设计模式学习之路——继承的更多相关文章

  1. JavaScript设计模式学习之路——面向对象的思想

    今天,我拿到了张容铭写的这本<JavaScript设计模式>这本书,开始了关于JavaScript更深一点的学习. 看到这本书开始的时候,虽然之前通过看书.一些比较好的视频的讲解,对Jav ...

  2. Javascript设计模式学习一

    学习Javascript设计模式之前,需要先了解一些相关知识,面向对象的基础知识.this等重要概念,以及掌握一些函数式编程的技巧. Js多态 多态的思想:实际上是把“做什么”和“谁去做”分离开来.例 ...

  3. JavaScript设计模式学习笔记

    1 JavaScript设计模式深入分析 私有属性和方法:函数有作用域,在函数内用var 关键字声明的变量在外部无法访问,私有属性和方法本质就是你希望在对象外部无法访问的变量. 特权属性和方法:创建属 ...

  4. javascript设计模式学习之十七——程序设计原则与面向接口编程

    一.编程设计原则 1)单一职责原则(SRP): 这里的职责是指“引起变化的原因”:单一职责原则体现为:一个对象(方法)只做一件事. 事实上,未必要在任何时候都一成不变地遵守原则,实际开发中,因为种种原 ...

  5. javascript设计模式学习之十二——享元模式

    一.享元模式的定义及使用场景 享元模式是为了解决性能问题而诞生的设计模式,这和大部分设计模式为了提高程序复用性的原因不太一样,如果系统中因为创建了大量类似对象而导致内存占用过高,享元模式就非常有用了. ...

  6. 设计模式学习之路——Decorator装饰模式(结构模式)

    子类复子类,子类何其多 假如我们需要为游戏中开发一种坦克,除了各种不同型号的坦克外,我们还希望在不同场合中为其增加以下一种或多种功能:比如红外线夜视功能,比如水陆两栖功能,比如卫星定位功能等等. 动机 ...

  7. javascript设计模式学习之十六——状态模式

    一.状态模式的定义 状态模式的关键是区分事务内部和外部的状态,事务内部状态改变往往会带来事务的行为改变. 状态模式中有意思的一点是,一般我们谈到封装,都是优先封装对象的行为,而非对象的状态.但在状态模 ...

  8. javascript设计模式学习之十三——职责链模式

    一.职责链的定义和使用场景 职责链模式的定义是,职责链模式将一系列可能会处理请求的对象连接成一条链,请求在这些对象之间一次传递,直到遇到一个可以处理它的对象.从而避免请求的发送者和接收者之间的耦合关系 ...

  9. javascript设计模式学习之十——组合模式

    一.组合模式定义及使用场景 组合模式将对象组合成树形结构,用以表示“部分—整体”的层次结构,除了用来表示树形结构之外,组合模式还可以利用对象的多态性表现,使得用户对单个对象和组合对象的使用具有一致性. ...

随机推荐

  1. 利用谷歌插件破解今日头条的新闻ajax参数加密,新手都能懂

    最近在学习谷歌插件,想找个项目练练手,就拿今日头条开刀 首先访问地址是:https://www.toutiao.com/c/user/50025817786/#mid=50044041847 通过抓包 ...

  2. 冒泡排序,C语言实现

    冒泡排序是一种稳定排序,时间复杂度平均为O(n^2),最好的时间复杂度为O(n),最坏为O(n^2). 排序时每次只比较当前元素与后一个 元素的大小,如果当前元素大于后一个元素,则交换,如此循环直到队 ...

  3. Word中用VBA插入一个文件夹里的所有.jpg图片

    每四张图片放在一页,第一行为四张图片的文件名 插入图片调整尺寸参考 Sub final() Dim FN As String, N%, W#, H#, PW#, PH# With ActiveDocu ...

  4. flex Datagrid checkbox

    <?xml version="1.0" encoding="utf-8"?><!-- http://blog.flexexamples.com ...

  5. 20155207 2006-2007-2 《Java程序设计》第4周学习总结

    20155207 2006-2007-2 <Java程序设计>第4周学习总结 教材学习内容总结 ISP原则:一个类对另一个类的依赖应该限制在最小化的接口上. OCP原则:软件构成(类,模块 ...

  6. su的使用与退出

    偶尔用回到ubuntu系统,想切换到su,总是显示不成功,也许是初次使用,即需要设定一下: 使用sudo $:sudo passwd 系统提示输入密码,即安装时的用户密码,然后,系统提示输入两次新密码 ...

  7. c++ 结构指针和双向链表

    结构指针 为结构指针动态分配内存 结构中的结构 双向链表 结构指针 struct mytime { //char name[256]; int hour;//时 int min; //分 i ...

  8. NUnit基本使用方法

    通常的单元测试框架都以他们支持的语言的开头字母加上Unit作为名字,他们统称为xUnit框架.C++的叫做CppUnit,Java的叫做JUnit,.Net的叫做NUnit.当然不是所有的都这么命名, ...

  9. 用php实现简单的自制计算器

    存档: <!DOCTYPE html> <html> <head> <title>PHP实现计算器</title> </head> ...

  10. 常用常忘的delegate,记一下。

    多线程: 1 new Thread(new ThreadStart(Method1))).Start(); 1 new Thread(new ParameterizedThreadStart(Meth ...