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[0] = new Author('Dustin Diaz', ['JavaScript Design Patterns']);
author[1] = new Author('Ross Harmes', ['JavaScript Design Patterns']);

alert(author[0].getName()); //输出 Dustin Diaz
alert(author[0].getBooks()); //输出 JavaScript Design Patterns
alert(author[1].getName()); //输出 Ross Harmes
alert(author[1].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[0] = new Author('Dustin Diaz', ['JavaScript Design Patterns']);
author[1] = new Author('Ross Harmes', ['JavaScript Design Patterns']);

alert(author[0].getName()); //输出 Dustin Diaz
alert(author[0].getBooks()); //输出 JavaScript Design Patterns
alert(author[1].getName()); //输出 Ross Harmes
alert(author[1].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[0] = new Author('Dustin Diaz', ['JavaScript Design Patterns']);
author[1] = new Author('Ross Harmes', ['JavaScript Design Patterns']);

alert(author[0].getName()); //输出 Dustin Diaz , Author of JavaScript Design Patterns
alert(author[0].getBooks()); //输出 JavaScript Design Patterns
alert(author[1].getName()); //输出 Ross Harmes , Author of JavaScript Design Patterns
alert(author[1].getBooks()); //输出 JavaScript Design Patterns
</script>


本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/p/5051835.html,如需转载请自行联系原作者
相关文章
|
2月前
|
JavaScript
短小精悍的js代码
【10月更文挑战第17天】
131 58
|
22天前
|
JavaScript 前端开发 测试技术
在 golang 中执行 javascript 代码的方案详解
本文介绍了在 Golang 中执行 JavaScript 代码的四种方法:使用 `otto` 和 `goja` 嵌入式 JavaScript 引擎、通过 `os/exec` 调用 Node.js 外部进程以及使用 WebView 嵌入浏览器。每种方法都有其适用场景,如嵌入简单脚本、运行复杂 Node.js 脚本或在桌面应用中显示 Web 内容。
58 15
在 golang 中执行 javascript 代码的方案详解
|
24天前
|
机器学习/深度学习 JavaScript Cloud Native
Node.js作为一种快速、可扩展的服务器端运行时环境
Node.js作为一种快速、可扩展的服务器端运行时环境
35 8
|
1月前
|
JavaScript
原生js炫酷随机抽奖中奖效果代码
原生js随机抽奖是一个炫酷的根据数据随机抽奖的代码,该网页可进行随机抽取一个数据,页面动画高科技、炫酷感觉的随机抽奖效果,简单好用,欢迎下载!
46 3
|
6天前
|
前端开发 JavaScript 应用服务中间件
Nginx 支持 JavaScript:前所未有的扩展
Nginx 是全球领先的高性能 Web 服务器,以其高效的反向代理和负载均衡功能著称。近期,Nginx 正式支持 JavaScript(通过 NJS 模块),基于 V8 引擎,允许在配置中嵌入 JS 代码,极大提升了灵活性和扩展性。开发者可以使用 JavaScript 实现动态请求处理、自定义认证、复杂响应处理、中间件编写及流量控制等功能,显著降低开发和维护难度,同时保持高性能。NJS 模块的引入为 Nginx 带来了前所未有的扩展能力,适应快速变化的业务需求。
15 0
|
1月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
38 2
|
1月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
502 4
|
27天前
|
JSON JavaScript 关系型数据库
node.js连接GBase 8a 数据库 并进行查询代码示例
node.js连接GBase 8a 数据库 并进行查询代码示例
|
1月前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
115 6