早在学习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. Qt的checkbox风格修改

    环境: HelperA64开发板 Linux3.10内核 时间:2019.01.12 目标:修改Qt中checkbox图片太小的BUG 问题: 在从Qt4移植为Qt5时遇到很多问题,这次是移植到开发板 ...

  2. python学习第二天 -----2019年4月17日

    第二周-第02章节-Python3.5-模块初识 #!/usr/bin/env python #-*- coding:utf-8 _*- """ @author:chen ...

  3. java int 与 Integer之间的区别

    int与integer的区别从大的方面来说就是基本数据类型与其包装类的区别: int 是基本类型,直接存数值,而integer是对象,用一个引用指向这个对象 1.Java 中的数据类型分为基本数据类型 ...

  4. C语言复习20170826

    数组 先定义,再初始化,最后使用. 访问数组中的元素可以采用数组名加下标的方式,下标是从0开始,c并不检查数组下标是否越界,所以在访问数组中的元素时需要注意,需要对数组下标做判断,防止访问数组越界. ...

  5. 运行ntpdate报错:Temporary failure in name resolution

    一.问题报错: 忽然发现某台机器时间慢了些几分钟,之前没有搭建ntpd服务,目前都是使用的ntpdate加定时任务进行时间同步.直接执行ntpdate报错如下: # ntpdate cn.pool.n ...

  6. 【转】CentOS下MySQL忘记root密码解决方法

    原文转自:http://www.cnblogs.com/sbaicl/articles/3132010.html 1.首先确认服务器出于安全的状态,也就是没有人能够任意地连接MySQL数据库. 因为在 ...

  7. Struts 2(五):输入校验 & 校验框架

    第一节 Struts2输入校验 1.1 输入校验的重要性 输入校验分为客户端校验和服务器端校验.客户端校验用来过滤用户的错误操作,一般使用JavaScript代码实现.服务器端校验用来防止非法用户的恶 ...

  8. javaweb(三十四)——使用JDBC处理MySQL大数据

    一.基本概念 大数据也称之为LOB(Large Objects),LOB又分为:clob和blob,clob用于存储大文本,blob用于存储二进制数据,例如图像.声音.二进制文等. 在实际开发中,有时 ...

  9. Spark实施备忘

    AttributeError: 'SparkConf' object has no attribute '_get_object_id' 初始化SparkContext时出现这种错误是因为把Spark ...

  10. Django-建立网页

    进入cmd模式做 django-admin startproject helloworld创建一个project,并命名helloworld,新生成的文件结构如下   输入python manage. ...