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>


 
相关文章
|
7天前
|
JSON JavaScript 前端开发
JavaScript原生代码处理JSON的一些高频次方法合集
JavaScript原生代码处理JSON的一些高频次方法合集
|
22天前
|
JavaScript
js开发:请解释什么是ES6的类(class),并说明它与传统构造函数的区别。
ES6的类提供了一种更简洁的面向对象编程方式,对比传统的构造函数,具有更好的可读性和可维护性。类使用`class`定义,`constructor`定义构造方法,`extends`实现继承,并可直接定义静态方法。示例展示了如何创建`Person`类、`Student`子类以及它们的方法调用。
20 2
|
25天前
|
JavaScript 前端开发
js开发:请解释原型继承和类继承的区别。
JavaScript中的原型继承和类继承用于共享对象属性和方法。原型继承利用原型链查找属性,节省内存但不支持私有成员。类继承通过ES6的class和extends实现,支持私有成员但占用更多内存。两者各有优势,适用于不同场景。
18 0
|
27天前
|
存储 JavaScript 前端开发
非常实用的JavaScript一行代码(整理总结)
非常实用的JavaScript一行代码(整理总结)
27 0
|
1月前
|
JavaScript 前端开发 测试技术
如何编写JavaScript模块化代码
如何编写JavaScript模块化代码
12 0
|
1月前
|
机器学习/深度学习 前端开发 JavaScript
实用的javascript代码分享
32个史上最有用的js代码
28 1
|
1月前
|
存储 JavaScript 前端开发
在JavaScript中,对象和数组是如何进行扩展的?
在JavaScript中,对象和数组是如何进行扩展的?
20 4
|
22天前
|
JSON 前端开发 JavaScript
16个重要的JavaScript代码
16个重要的JavaScript代码
30 1
|
22天前
|
JavaScript
js开发:请解释什么是ES6的扩展运算符(spread operator),并给出一个示例。
ES6的扩展运算符(...)用于可迭代对象展开,如数组和对象。在数组中,它能将一个数组的元素合并到另一个数组。例如:`[1, 2, 3, 4, 5]`。在对象中,它用于复制并合并属性,如`{a: 1, b: 2, c: 3}`。
12 3
|
24天前
|
JavaScript
当当网新用户注册界面——JS代码
当当网新用户注册界面——JS代码
7 0