js深入研究之无法理解的js类代码,extend扩展
<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扩展的更多相关文章
- js深入研究之神奇的匿名函数类生成方式
<script type="text/javascript"> var Book = (function() { // 私有静态属性 ; // 私有静态方法 funct ...
- 深入理解unslider.js源码
最近用到了一个挺好用的幻灯片插件,叫做unslider.js,就想看看怎么实现幻灯片功能,就看看源码,顺便自己也学习学习.看完之后收获很多,这里和大家分享一下. unslider.js 源码和使用教程 ...
- Js 职责链模式 简单理解
js 职责链模式 的简单理解.大叔的代码太高深了,不好理解. function Handler(s) { this.successor = s || null; this.handle = funct ...
- JS魔法堂:彻底理解0.1 + 0.2 === 0.30000000000000004的背后
Brief 一天有个朋友问我“JS中计算0.7 * 180怎么会等于125.99999999998,坑也太多了吧!”那时我猜测是二进制表示数值时发生round-off error所导致,但并不清楚具体 ...
- 关于闭包的理解(JS学习小结)
前言: 啊啊啊,看书真的很痛苦啊,还是好想做项目写代码才有意思,不过我现在缺的确是将知识体系化,所以不论看书多么痛苦都一定要坚持坚持啊,这才是我现在最需要的进步的地方,加油! 因为现在期末啦,下周一也 ...
- 封装常用的js(Base.js)——【01】理解库,获取节点,连缀,
封装常用的js(Base.js)——[01]理解库,获取节点,连缀, youjobit07 2014-10-10 15:32:59 前言: 现如今有太多优秀的开源javascript库, ...
- 关于js with语句的一些理解
关于js with语句的一些理解 今天看到js的with语句部分,书中写到,with语句接收的对象会添加到作用域链的前端并在代码执行完之后移除.看到这里,我有两点疑问,添加到作用域链前端是不是指对 ...
- 【翻译】要理解Ext JS 5小工具
原版的:Understanding Widgets in Ext JS 5 在Ext JS 5,引入了新的"widgetcolumn",支持在网格的单元格中放置组件. 同一时候,还 ...
- 理解Node.js的事件轮询
前言 总括 : 原文地址:理解Node.js的事件轮询 Node小应用:Node-sample 智者阅读群书,亦阅历人生 正文 Node.js的两个基本概念 Node.js的第一个基本概念就是I/O操 ...
随机推荐
- .Net词汇表中常见缩略语汇总
.Net中存在大量的专业词汇(详细列表,请参考:Visual Studio 和 .NET Framework 词汇表),其中很多词汇常常采用缩略语的形式被大量使用. 在阅读.Net书籍或网络资料时,便 ...
- JFreeChart学习
一.步骤: 创建数据集(准备数据) 根据数据集生成JFreeChart对象,并对其做相应的设置(标题,图例,x轴,Y轴,对象渲染等) 将JFreeChart对象输出到文件或者Servlet输出流等 二 ...
- MyBatis第一个项目示例
1.创建一个Java project,JikeBook 2.添加项目所需的依赖包 如 mybatis-3.2.8.jar,是实现mybatis功能所必需的依赖包 mysql-connector-jav ...
- 对Ul下的li标签执行点击事件——如何获取你所点击的标签
问题所来:做项目时,一般的数据都是用循环动态加载出来的,结构都是一样的,只是绑定的值不同,如何对相同的标签做处理的问题就来了. 例如:点谁就显示谁的数值 <ul > <li id=& ...
- 最全SpringMVC具体演示样例实战教程
一.SpringMVC基础入门,创建一个HelloWorld程序 1.首先.导入SpringMVC须要的jar包. 2.加入Web.xml配置文件里关于SpringMVC的配置 <!--conf ...
- oracle触发器实例
8.1 触发器类型 8.1.1 DML触发器 8.1.2 替代触发器 8.1.3 系统触发器 8.2 创建触发器 8.2.1 触发器触发次序 8.2.2 创建DML触发器 8.2.3 创建替代(INS ...
- 1034 - Navigation
Global Positioning System (GPS) is a navigation system based on a set of satellites orbiting approxi ...
- 怎么样学好C++
声明:这篇文章非本人所写,转自:http://coolshell.cn/articles/4119.html 昨天写了一篇如何学好C语言,就有人回复问我如何学好C++,所以,我把我个人的一些学习经验写 ...
- AsyncHttpClient 登录 Application Fragment 回调 监听 软键盘
Activity /**登录界面及登陆后用户首页界面,使用两个Fragment实现*/ public class LoginActivity extends Activity implements L ...
- Web前端开发面试题赋答案
第一部分:用CSS实现布局 让我们一起来做一个页面 首先,我们需要一个布局. 请使用CSS控制3个div,实现如下图的布局. 第二部分:用javascript优化布局 由于我们的用户群喜欢放大看页面 ...