`
zdb_cn
  • 浏览: 122420 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

javascript设计模式 第四章

 
阅读更多

继承

 

父类

/* Class Person. */

function Person(name) {
  this.name = name;
}

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

var reader = new Person('John Smith');
reader.getName();

 1、原型链

/* Class Author. */

function Author(name, books) {
  Person.call(this, name); // Call the superclass' constructor in the scope of this.
  this.books = books; // Add an attribute to Author.
}

Author.prototype = new Person(); // Set up the prototype chain.
Author.prototype.constructor = Author; // Set the constructor attribute to Author.
Author.prototype.getBooks = function() { // Add a method to Author.
  return this.books;
};

var author = [];
author[0] = new Author('Dustin Diaz', ['JavaScript Design Patterns']);
author[1] = new Author('Ross Harmes', ['JavaScript Design Patterns']);

author[1].getName();
author[1].getBooks();

 2、extend函数

将派生子类的整个过程包装在一个名为extend的函数中。

/* Extend function. */

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

/* Class Author. */

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

Author.prototype.getBooks = function() {
  return this.books;
};

 改进后代码:

/* Extend function, improved. */

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;
  }
}


/* Class Author. */

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

Author.prototype.getBooks = function() {
  return this.books;
};

Author.prototype.getName = function() {
  var name = Author.superclass.getName.call(this);
  return name + ', Author of ' + this.getBooks().join(', ');
};

 3、掺元类

/* Mixin class. */

var Mixin = function() {};
Mixin.prototype = {
  serialize: function() {
    var output = [];
    for(key in this) {
      output.push(key + ': ' + this[key]);
    }
    return output.join(', ');
  }
};

augment(Author, Mixin);

var author = new Author('Ross Harmes', ['JavaScript Design Patterns']);
var serializedString = author.serialize();

/* Augment function. */

function augment(receivingClass, givingClass) {
  for(methodName in givingClass.prototype) { 
    if(!receivingClass.prototype[methodName]) {
      receivingClass.prototype[methodName] = givingClass.prototype[methodName];
    }
  }
}

/* Augment function, improved. */

function augment(receivingClass, givingClass) {
  if(arguments[2]) { // Only give certain methods.
    for(var i = 2, len = arguments.length; i < len; i++) {
      receivingClass.prototype[arguments[i]] = givingClass.prototype[arguments[i]];
    }
  } 
  else { // Give all methods.
    for(methodName in givingClass.prototype) { 
      if(!receivingClass.prototype[methodName]) {
        receivingClass.prototype[methodName] = givingClass.prototype[methodName];
      }
    }
  }
}
 

继承  耗费内存一些

原型  set 和 get 注意要统一

掺元  扩展类

 

 

分享到:
评论

相关推荐

    javascript 设计模式与开发实践

    和张容铭的javascript设计模式相比,个人觉得有以下不同之处: 1、需要对原型链和闭包有一定的基础 2、案例比较经典并且通熟易懂,讲解特别清晰 3、知识点的归纳总结也比较突出重点,方便二次学习以及做笔记 字体...

    JavaScript设计模式中文版第4章-继承.pdf

    JavaScript设计模式中文版第4章-继承.pdf

    JavaScript设计模式中文版第4章-继承定义.pdf

    JavaScript设计模式中文版第4章-继承定义.pdf

    JavaScript模式中文[pdf] 百度云

     第4章 函数  背景  回调模式  返回函数  自定义函数  即时函数  即时对象初始化  初始化时分支  函数属性——备忘模式  配置对象  Curry  小结  第5章 对象创建模式  命名空间模式  声明依赖关系  ...

    设计模式-7种开发语言(C#、JAVA、JavaScript、C++、Python、Go、PHP).pdf

    第四节 抽象工厂模式 第五节 单例模式 第六节 外观模式 第七节 模板模式 第八节 组合模式 第九节 代理模式 第十节 命令模式 第十一节 观察者模式 第十二节 策略模式 第十三节 建造者模式 第十四节 适配器模式 第十五...

    ASP.NET设计模式-杨明军译(源码)

    第4章 业务逻辑层:组织 4.1 理解业务组织模式 4.1.1 Transaction Script 4.1.2 Active Record 4.1.3 Domain Model 4.1.4 Anemic Domain Model 4.1.5 领域驱动设计 4.2 小结 第5章 业务逻辑层:模式 5.1 ...

    JavaScript模式 斯托扬·斯特凡洛夫 著

    第4章 函数 背景 回调模式 返回函数 自定义函数 即时函数 即时对象初始化 初始化时分支 函数属性——备忘模式 配置对象 Curry 小结 第5章 对象创建模式 命名空间模式 声明依赖关系 私有属性和方法 模块模式 沙箱模式...

    javascript——PDF教程大合集.rar

    javascript——PDF教程大合集 1、100个直接可以拿来用的JavaScript实用功能代码片段 ...7、javascript设计模式 8、JavaScript完全解析 9、JavaScript学习指南 10、JavaScript语言精粹 11、深入浅出JavaScript(中文版)

    JavaScript面向对象编程指南(第2版)

    尤其值得一提的是,本书作者是JavaScript设计模式方面的专家,他在本书第8章中介绍了几种常用的JavaScript编程模式,这也成为他的另一本重要著作《JavaScript模式》(JavaScript Patterns)奠定了基础。, 本书全面地...

    JavaScript高级程序设计(第四版)中文版.pdf文件 下载就能看,还有很多书的电子版,上传的没上传的,可以找我要

    第4章 变量、作用域与内存 83 4.1 原始值与引用值 83 4.2 执行上下文与作用域 87 4.3 垃圾回收 94 4.4 小结 101 第5章 基本引用类型 103 5.1 Date 103 5.2 RegExp 107 5.3 原始值包装类型 113 5.4 单例...

    JavaScript设计模式—单例模式详解【四种基本形式】

    本文实例讲述了JavaScript设计模式—单例模式.分享给大家供大家参考,具体如下: 单例模式也称为单体模式,其中: 1,单体模式用于创建命名空间,将系列关联的属性和方法组织成一个逻辑单元,减少全局变量。  逻辑...

    编写可维护的JavaScript(中文)

    第4章 变量、函数和运算符 4.1 变量声明 4.2 函数声明 4.3 函数调用间隔 4.4 立即调用的函数 4.5 严格模式 4.6 相等 4.6.1 eval() 4.6.2 原始包装类型 第二部分 编程实践 第5章 UI层的松耦合 5.1 什么是...

    JavaScript for PHP Developers(中文版)第2版

    中文完整版! ...本书主要内容有讲解语法,包括变量、数组、循环和条件。学习中的函数为何重要,以及为什么它们实际上是...第4章面向对象编程 第5章内建API 第6章ECMAScript 5第7章JavaScrIpl模式 第7章JavaScrIpl模式

    JavaScript王者归来part.1 总数2

     第4章 语言结构  4.1 JavaScript的基本文法   4.2 常量和变量   4.3 表达式和运算符符   4.4 控制语句 句   4.5 总结   第5章 数据类型  5.1 基本数据类型   5.2 数组和对象   5.2.1 数组   ...

    学习JavaScript设计模式之策略模式

    把不变的部分和变化的部分隔开是每个设计模式的主题。 条条大路通罗马。我们经常会遇到解决一件事情有多种方案,比如压缩文件,我们可以使用zip算法、也可以使用gzip算法。其灵活多样,我们可以采用策略模式解决。 ...

    学习JavaScript设计模式之模板方法模式

    模板方法是基于继承的设计模式,可以很好的提高系统的扩展性。 java中的抽象父类、子类 模板方法有两部分结构组成,第一部分是抽象父类,第二部分是具体的实现子类。 二、示例 Coffee or Tea (1) 把水煮沸 (2) 用...

    javascript 使用手册

     第四,两种语言所采取的变量是不一样的。Java采用强类型变量检查,即所有变量在编译之前必须作声明。JavaScript中变量声明,采用其弱类型。即变量在使用前不需作声明,而是解释器在运行时检查其数据类型。  第五...

    WebGIS从基础到开发实践代码(基于ArcGIS API for JavaScript)

    第4章地图与图层 4.1图层操作 4.1.1图层类及其之间的继承关系 4.1.2切片地图图层 4.1.3动态地图图层 4.1.4图形图层 4.1.5带地理参考的影像图层 4.1.6 KML图层 4.2自定义图层 4.2.1自定义动态图层——热度图图层 ...

    编写可维护的javascript(英文)

    第4章 变量、函数和运算符 4.1 变量声明 4.2 函数声明 4.3 函数调用间隔 4.4 立即调用的函数 4.5 严格模式 4.6 相等 4.6.1 eval() 4.6.2 原始包装类型 第二部分 编程实践 第5章 UI层的松耦合 5.1 什么是...

Global site tag (gtag.js) - Google Analytics