类式继承

0.构造函数

一个简单的Person类

function Person(name){
this.name = name;
}
Person.prototype.getName = function(){
return this.name;
}

1.原型链实现继承

未封装extend函数继承

继承步骤如下:

step 1:创建继承类的构造函数

step 2:设置继承类的原型链为父类构造函数。

step 3:调整继承类的构造函数。

step 4:创建继承类

function Author(name, books){
Person.call(this, name); //step 1
this.books = books;
}
Author.prototype = new Person(); //step 2
Author.prototype.constructor = Author; // step 3
Author.prototype.getBooks = function(){
return this.books;
};
var author = new Author('ysy',['js desgin']); // step 4

简单封装extend函数继承

function extend(subClass, superClass){
var F = function(){};
F.prototype = superClass.prototype;
subClass.prototype = new F(); // step 2
subClass.prototype.constructor = subClass; // step3
}

这种展示了封装的原理,但是step1并没有封装进来,而最重要的是step1中会产生对Person的耦合。

高级封装extend函数继承

function extend(subClass, superClass){
var F = function(){};
F.prototype = superClass.prototype;
subClass.prototype = new F();
subClass.prototype.constructor = subClass;
subClass.superclass = superClass.prototype;
if(superClass.prototype.constructor == Object.prototype.constructor){
superClass.prototype.constructor = superClass;
}
}

这样在构建子类的构造函数时示例如下:

function Author(name, books){
Author.superclass.constructor.call(this, name);
this.books = books;
}
extend(Author, Person);

原型式继承

0.原型对象

直接定义一个对象即可

var Person = {
name: 'ysy',
getName: function(){
return this.name;
}
}

1.对继承而来的成员的读和写的不对等性

这个其实很好理解,如果在读属性之前还未对继承而来的属性进行赋值操作,那么读的就是super中的属性,而此时写的话,却是对sub中的写。

当然,一旦写过之后,读和写就是对等的了。

这个简单问题就不再给出代码了。如果你不懂,就去彻底了解一下原型链。

2.clone函数

function clone(obj){
function F(){}
F.prototype = obj;
return new F;
}

3.继承的实现

var Author = clone(Person);
Author.books = [];
Author.getBooks = function(){
return this.books;
}

貌似这个继承的实现要简单好多哇。

继承与封装

只有公用和特权成员会被继承下来。

因此,门户大开型式最适合派生自雷的。它们的所有成员都是公开的,因此可以被遗传给子类。如果某个成员需要稍加隐藏,可以用下划线规范。

在派生具有真正的私有成员的类时,特权方法是公用的,可以被继承,因此也就可以访问父类的私有成员,但是我们不能在子类中添加能够直接访问他们的新的特权方法。

掺元类

有一种重用代码的方法不需要用到严格的继承。

他的做法是:先创建一个包含各种通用方法的类,然后再用他扩充其他类。

这种包含通用方法的类就是掺元类。

下面定义一个简单的掺元类:

var Mix = function(){};
Mix.prototype = {
serialize: function(){
var output = [];
for(key in this){
output.push(key+':'+this[key]);
}
return output.join(',');
}
}
augment(Author, Mix);
var author = new Author('Ross', ['js desgin']);

augment其实很简单。他用一个for in将giving class的prototype中的每个成员都添加到receiving class中。

function augment(rclass, gclass){
if(arguments[2]){ //giving more than 3 paras
for(var i=2, len=arguments.length; i<len; i++){
rclass.prototype[arguments[i]] = gclass.prototype[arguments[i]];
}
}else{
for(methodName in gclass.prototype){
if(!rclass.prototype[methodName]){
rclass.prototype[methodName] = gclass.prototype[methodName];
}
}
}
}

上面的方法还可以指明只继承其中的部分成员。

 掺元类的重大有点就是可以实现多继承效果,其他的方法就没法了,因为一个对象只能有一个原型对象。

JS设计模式——4.继承(概念)的更多相关文章

  1. JS设计模式——4.继承(示例)

    目的 我们的目的就是编写一个用于创建和管理就地编辑域的可重用的模块化API.它是指网页上的一段普通文本被点击后就变成一个配有一些按钮的表单域,以便用户就地对这段文本进行编辑. 思路 当用户点击时 1. ...

  2. JS设计模式——7.工厂模式(概念)

    工厂模式 本章讨论两种工厂模式: 简单工厂模式 使用一个类(通常是一个单体)来生成实例. 使用场景:假设你想开几个自行车商店(创建自行车实例,组装它,清洗它,出售它),每个店都有几种型号的自行车出售. ...

  3. js设计模式--------基本概念的理解

    1.闭包,前面已经说过,这里不再做说明 2.封装    对于JS而言,他不像java一样存在私有,公有 ,可以让对象在一些细节方面存在差异,降低他们的耦合程度,对数据做一些约束,我们可以更容易调试,封 ...

  4. JS设计模式(一)

    刚入职时,看过一段时间的设计模式,似懂非懂.不知不觉过去七个月了,对JS的理解更深刻了,数据结构与算法的基础也基本上算是过了一遍了,接下来要把设计模式搞定,然后不再深层次研究JS了,而是学习前端自动化 ...

  5. JS创建对象、继承原型、ES6中class继承

    面向对象编程:java中对象的两个基本概念:1.类:类是对象的模板,比如说Leader 这个是泛称领导,并不特指谁.2:实例:实例是根据类创建的对象,根据类Leader可以创建出很多实例:liyi,y ...

  6. JS设计模式一:单例模式

    单例模式       单例模式也称作为单子模式,更多的也叫做单体模式.为软件设计中较为简单但是最为常用的一种设计模式.       下面是维基百科对单例模式的介绍:     在应用单例模式时,生成单例 ...

  7. JAVA之旅(六)——单例设计模式,继承extends,聚集关系,子父类变量关系,super,覆盖

    JAVA之旅(六)--单例设计模式,继承extends,聚集关系,子父类变量关系,super,覆盖 java也越来越深入了,大家加油吧!咱们一步步来 一.单例设计模式 什么是设计模式? JAVA当中有 ...

  8. 前端笔记之JavaScript面向对象(三)初识ES6&underscore.js&EChart.js&设计模式&贪吃蛇开发

    一.ES6语法 ES6中对数组新增了几个函数:map().filter().reduce() ES5新增的forEach(). 都是一些语法糖. 1.1 forEach()遍历数组 forEach() ...

  9. 【学习笔记】六:面向对象的程序设计——理解JS中的对象属性、创建对象、JS中的继承

    ES中没有类的概念,这也使其对象和其他语言中的对象有所不同,ES中定义对象为:“无序属性的集合,其属性包含基本值.对象或者函数”.现在常用的创建单个对象的方法为对象字面量形式.在常见多个对象时,使用工 ...

随机推荐

  1. Hibernate 应知应会

    Hibernate 的关联关系的配置: 一对一外键约束: 举例子是一个丈夫和妻子:[一个丈夫只能有一位妻子] 表结构: CREATE TABLE `tbl_hus` ( `uuid` ) NOT NU ...

  2. 【Django】Django迁移数据库

    我们已经编写了博客数据库模型的代码,但那还只是 Python 代码而已,Django 还没有把它翻译成数据库语言,因此实际上这些数据库表还没有真正的在数据库中创建 为了让 Django 完成翻译,创建 ...

  3. Fibsieve`s Fantabulous Birthday LightOJ - 1008(找规律。。)

    Description 某只同学在生日宴上得到了一个N×N玻璃棋盘,每个单元格都有灯.每一秒钟棋盘会有一个单元格被点亮然后熄灭.棋盘中的单元格将以图中所示的顺序点亮.每个单元格上标记的是它在第几秒被点 ...

  4. 【POJ1741】Tree(点分治)

    [POJ1741]Tree(点分治) 题面 Vjudge 题目大意: 求树中距离小于\(K\)的点对的数量 题解 完全不觉得点分治了.. 简直\(GG\),更别说动态点分治了... 于是来复习一下. ...

  5. BZOJ3771 Triple 【NTT + 容斥】

    题目链接 BZOJ3771 题解 做水题放松一下 先构造\(A_i\)为\(x\)指数的生成函数\(A(x)\) 再构造\(2A_i\)为指数的生成函数\(B(x)\) 再构造\(3A_i\)为指数的 ...

  6. 【bzoj4559】成绩比较

    Portal -->bzoj4559 补档计划 ​  借这题补个档--拉格朗日插值 ​​  插值的话大概就是有一个\(n-1\)次多项式\(A(x)\),你只知道它在\(n\)处的点值,分别是\ ...

  7. libevent文档学习(一)多线程接口和使用

    参考libevent官方提供的文档: http://www.wangafu.net/~nickm/libevent-book/Ref1_libsetup.html 这一篇主要翻译libevent多线程 ...

  8. Nginx多个配置文件共用location配置

    一.应用情况 很多时候我们在一台服务器上部署了不止 一个项目,我们通过Nginx来代理,为了方便管理往往会将各个项目的配置分开写到不同的配置文件中,如: 在nginx.conf 文件中加上  incl ...

  9. 「Python实践」学习之路

    一.列表内容对比 方式一: import operatorl1 = ['a','b','c']l2 = ['a','d','e']print(operator.lt(l1,l2))运行结果为True ...

  10. 【算法日记】Dijkstra最短路径算法

    上一篇再说广度优先搜索的适合提到了图. 狄克斯拉特算法是在图的基础上增加了 加权图的概念.就是节点和节点之间是有不同距离的 1.算法实例 用Dijkstra算法找出以A为起点的单源最短路径步骤如下 算 ...