Javascript类继承-机制-代码Demo【原创】

　　最近看到《Javascript设计模式》，对js模拟的”继承方式“有了更深一步的了解，虽然之前也总是用到prototype、new ，但只是知其然不知所以然，现在将类继承的方法整理如下，暂时不对原型链、继承机制做过多描述，直接上代码，让大家先有一个整体的了解！

　　依照教程中对”类继承“逐步的优化，递进方式讲述了以下几种类继承方法，将教材中的几个demo例子记录一下，分享给大家，共同学习：

　　先给一个类定义与实例化的方法：　　

/* Class Person. */
//类定义
function Person(name) {
  this.name = name;
}
Person.prototype.getName = function() {
  return this.name;
}
//实例化
var reader = new Person('John Smith');
reader.getName();

　　下面开始说继承，Author类继承Person类

　　方法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;
};
//Author类实例化
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 function. */
function extend(subClass, superClass) {
  var F = function() {};
  F.prototype = superClass.prototype;
  subClass.prototype = new F();
  subClass.prototype.constructor = subClass;
}
/* Class Person. */
function Person(name) {
  this.name = name;
}
Person.prototype.getName = function() {
  return this.name;
}
/* Class Author. */
function Author(name, books) {
  Person.call(this, name);     //该方法的问题:超类Person名字被固化在Author类的声明之中
  this.books = books;
}
extend(Author, Person); 
Author.prototype.getBooks = function() {
  return this.books;
};

　　方法3：

　　　　解决方法2中问题（超类Person名字被固化在Author类声明中）

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

  //确保超类的constructor属性（superClass.prototype.constructor）已被正确设置
  subClass.superclass = superClass.prototype;
  if(superClass.prototype.constructor == Object.prototype.constructor) {
    superClass.prototype.constructor = superClass;
  }
}
/* Class Person. */
function Person(name) {
  this.name = name;
}
Person.prototype.getName = function() {
  return this.name;
}
/* 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;
};
//有了superclass属性，就可以直接调用超类中的方法
Author.prototype.getName = function() {
  var name = Author.superclass.getName.call(this);
  return name + ', Author of ' + this.getBooks().join(', ');
};

　　最后，针对方法3，看一下两个class的结构，一目了然：

转载，请注明地址：

　　http://www.cnblogs.com/qiongmiaoer/p/4599869.html

------------------------------------------------

　　博主经营一家发饰淘宝店，都是纯手工制作哦，开业冲钻，只为信誉！需要的亲们可以光顾一下！谢谢大家的支持！
店名：
　　小鱼尼莫手工饰品店
经营:
　　发饰、头花、发夹、耳环等（手工制作）
网店：
　　http://shop117066935.taobao.com/

  ---------------------------------------------------------------------