<script type="text/javascript">
function Person(name) {
this.name = name;
} Person.prototype.getName = function() {
return this.name;
} function Author(name, books) {
Person.call(this, name); // 定义:调用一个对象的一个方法,以另一个对象替换当前对象。
this.books = books; // Add an attribute to Author.
} Author.prototype = new Person(); // 设置原型链
Author.prototype.constructor = Author; // 设置构造属性
Author.prototype.getBooks = function() { // 添加方法
return this.books;
}; var author = [];
author[] = new Author('Dustin Diaz', ['JavaScript Design Patterns']);
author[] = new Author('Ross Harmes', ['JavaScript Design Patterns']); alert(author[].getName()); //输出 Dustin Diaz
alert(author[].getBooks()); //输出 JavaScript Design Patterns
alert(author[].getName()); //输出 Ross Harmes
alert(author[].getBooks()); //输出 JavaScript Design Patterns
</script>

功力不够,无法理解

进一步升级提取

<script type="text/javascript">
/* 扩展函数 */
function extend(subClass, superClass) {
var F = function() {};
F.prototype = superClass.prototype; // F已成superClass父类
subClass.prototype = new F(); //子类继承父类的原子
subClass.prototype.constructor = subClass;
} /* Person类 */ function Person(name) {
this.name = name;
} Person.prototype.getName = function() {
return this.name;
} /* Author类 */ function Author(name, books) {
Person.call(this, name);
this.books = books;
}
extend(Author, Person); Author.prototype.getBooks = function() {
return this.books;
}; var author = []; //定义数组
author[] = new Author('Dustin Diaz', ['JavaScript Design Patterns']);
author[] = new Author('Ross Harmes', ['JavaScript Design Patterns']); alert(author[].getName()); //输出 Dustin Diaz
alert(author[].getBooks()); //输出 JavaScript Design Patterns
alert(author[].getName()); //输出 Ross Harmes
alert(author[].getBooks()); //输出 JavaScript Design Patterns
</script>

进一步改进,太牛逼了,作者

<script type="text/javascript">
/* 扩展函数 */
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;
}
} /* Person类 */ function Person(name) {
this.name = name;
} Person.prototype.getName = function() {
return this.name;
} /* 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(', ');
}; var author = []; //定义数组
author[] = new Author('Dustin Diaz', ['JavaScript Design Patterns']);
author[] = new Author('Ross Harmes', ['JavaScript Design Patterns']); alert(author[].getName()); //输出 Dustin Diaz , Author of JavaScript Design Patterns
alert(author[].getBooks()); //输出 JavaScript Design Patterns
alert(author[].getName()); //输出 Ross Harmes , Author of JavaScript Design Patterns
alert(author[].getBooks()); //输出 JavaScript Design Patterns
</script>

js深入研究之无法理解的js类代码,extend扩展的更多相关文章

  1. js深入研究之神奇的匿名函数类生成方式

    <script type="text/javascript"> var Book = (function() { // 私有静态属性 ; // 私有静态方法 funct ...

  2. 深入理解unslider.js源码

    最近用到了一个挺好用的幻灯片插件,叫做unslider.js,就想看看怎么实现幻灯片功能,就看看源码,顺便自己也学习学习.看完之后收获很多,这里和大家分享一下. unslider.js 源码和使用教程 ...

  3. Js 职责链模式 简单理解

    js 职责链模式 的简单理解.大叔的代码太高深了,不好理解. function Handler(s) { this.successor = s || null; this.handle = funct ...

  4. JS魔法堂:彻底理解0.1 + 0.2 === 0.30000000000000004的背后

    Brief 一天有个朋友问我“JS中计算0.7 * 180怎么会等于125.99999999998,坑也太多了吧!”那时我猜测是二进制表示数值时发生round-off error所导致,但并不清楚具体 ...

  5. 关于闭包的理解(JS学习小结)

    前言: 啊啊啊,看书真的很痛苦啊,还是好想做项目写代码才有意思,不过我现在缺的确是将知识体系化,所以不论看书多么痛苦都一定要坚持坚持啊,这才是我现在最需要的进步的地方,加油! 因为现在期末啦,下周一也 ...

  6. 封装常用的js(Base.js)——【01】理解库,获取节点,连缀,

    封装常用的js(Base.js)——[01]理解库,获取节点,连缀,  youjobit07 2014-10-10 15:32:59 前言:       现如今有太多优秀的开源javascript库, ...

  7. 关于js with语句的一些理解

    关于js with语句的一些理解   今天看到js的with语句部分,书中写到,with语句接收的对象会添加到作用域链的前端并在代码执行完之后移除.看到这里,我有两点疑问,添加到作用域链前端是不是指对 ...

  8. 【翻译】要理解Ext JS 5小工具

    原版的:Understanding Widgets in Ext JS 5 在Ext JS 5,引入了新的"widgetcolumn",支持在网格的单元格中放置组件. 同一时候,还 ...

  9. 理解Node.js的事件轮询

    前言 总括 : 原文地址:理解Node.js的事件轮询 Node小应用:Node-sample 智者阅读群书,亦阅历人生 正文 Node.js的两个基本概念 Node.js的第一个基本概念就是I/O操 ...

随机推荐

  1. HDU_1239——再次调用外星智慧

    Problem Description A message from humans to extraterrestrial intelligence was sent through the Arec ...

  2. python+mysql数据库的简单操作

    最近接了一个任务,测试某项类似于收益情况报表的功能,因计算公式复杂,单纯手算过于复杂,所以想到写成脚本 根据python的分治原则,先整了几个函数用于实现计算逻辑,后发现数据输入过于繁琐,所以决定使用 ...

  3. HDFS文件读取详解

    客户端与HDFS文件读取 创建HDFS文件系统实例 FileSystem fs = FileSystem.get(new URI("hdfs://ns1"), new Config ...

  4. Github 开源编辑器 ATOM 已开放下载

    Update:2014-09-08 Atom 于5月6日正式开放下载(遗憾的是只有 MAC 版本),并且在 MIT 协义下开源,从界面可以看出,这款软件很像 Sublime Text,不过由于她的开源 ...

  5. 动软代码生成V2.74模版简介

    最近发现很多人用动软代码生成,确实方便,有些经验记录下,以后查看回顾. ..\Maticsoft\Codematic2\Template\TemplateFile 为模板文件夹,直接在目录下新建文件夹 ...

  6. firefox 不能显示 glyphicons 字体

    折腾了很久才发现是firefox 不能跨域下载相应的字体文件,将bootstrap相应的css文件和字体文件copy到调用的项目里,问题才得以解决.

  7. tomcat下出现The file is absent or does not have execute&

    启动tomcat出现The file is absent or does not have execute permission... Cannot find bin/catalina.sh The ...

  8. iOS_SN_UITableView的优化

    1.提前计算并缓存好高度(布局),因为heightForRowAtIndexPath:是调用最频繁的方法. 2.异步绘制,遇到复杂界面,遇到性能瓶颈时,可能就是突破口. 3.滑动时按需加载,这个在大量 ...

  9. Canvas--2

    Canvas2(关键词:setLineDash .rect .strokeRect .clearRect .arc.sin .strokeText )   绘制其他样式: lineCap 结束端点的设 ...

  10. 使用ffmpeg录音

    官方教程:http://ffmpeg.org/ffmpeg.html 录音方法: 开始找到了这个方法,但是不行呀,好像是没有这个oss吧. oss 是linux 下的声音相关的东西,与alsa 一样, ...