JavaScript设计模式学习之继承

本文仅仅是记录自己学习的心得体会，如果有误，欢迎指出，非原创，具体请参考：《JavaScript设计模式》 张容铭 著

1.子类的原型对象继承——类式继承

//声明父类
function ParentClass() {
  this.ParentValue = true;
}
ParentClass.prototype.getParentValue = function () {
  return this.ParentValue;
}
//声明子类
function ChildClass() {
  this.ChildValue = false;
}
ChildClass.prototype = new ParentClass();//继承父类
ChildClass.prototype.getChildValue = function () {
  return this.ChildValue;
}

这里实现继承是将父类的实例赋予给了子类的原型

var newChild = new ChildClass();
console.log(newChild)
console.log(newChild.__proto__)

输出结果:

输出结果.png

这里的newChild是子类的实例，newChild的原型对象现在是父类的实例，这个时候newChild继承了父类的属性以及原型上的方法

使用：

var result = newChild .getChildValue();
var result1 = newChild .getParentValue();
console.log(result);//false
console.log(result1);//true

子类继承的缺点：

1.如果父类的属性中含有引用类型，那么在子类中改变后，父类的属性的值也会改变。
2.因为这种继承是将父类的实例化对象赋给子类的原型，所以这里没有办法向父类传递参数

//声明父类
function ParentClass() {
//引用类型属性
  this.booksName = ['JavaScript','CSS3','HTML5'];
}
ParentClass.prototype.getParentValue = function () {
  return this.booksName;
}
//声明子类
function ChildClass() {
  this.ChildValue = false;
}
ChildClass.prototype = new ParentClass();
ChildClass.prototype.getChildValue = function () {
  return this.ChildValue;
}
var newChild1 = new ChildClass();
var newChild2  = new ChildClass();
console.log(newChild2.booksName)//["JavaScript","CSS3","HTML5"]
newChild1.booksName.push('JQuery'); //别人修改这个值后
console.log(newChild2.booksName)//["JavaScript","CSS3","HTML5","JQuery"]

2.构造式继承

//声明父类
function ParentClass(bookId) {
  //引用类型属性
  this.booksName = ['JS','CSS3','HTML5']
  this.id = bookId
}
//父类添加原型方法
ParentClass.prototype.getBooks = function () {
  console.log(this.booksName)
}
//子类
function ChildClass(bookId) {
  //继承父类
  ParentClass.call(this,(bookId))
}
//创建两个子类实例对象
var newChild1 = new ChildClass(101);
var newChild2 = new ChildClass(102);
newChild1.booksName.push('JQ');
console.log(newChild1.booksName);//["JS","CSS3","HTML5","JQ"]
console.log(newChild1.id);//101
console.log(newChild2.booksName);//["JS","CSS3","HTML5"]
console.log(newChild2.id);//102
newChild1.getBooks();//Uncaught TypeError: newChild1.getBooks is not a function

call这个方法可以更改函数的作用环境，在子类中，对ParentClass调用这个方法，就是将子类的变量在父类中执行了一遍。父类中是给this绑定属性的，new对象的时候这个this指向new的对象(这里是newChild1 和newChild2)，这样就把父类的属性都复制了到了这两个实例化的对象上，所以当我改变newChild1.booksName的时候没有改变到newChild2.booksName的值

这种办法既可以传参，也可以防止父类中的引用类型属性被修改，是不是刚好和类式继承互补呢,SO?

3.组合式继承

//声明父类
function ParentClass(name) {
  this.name = name
  this.booksName = ['JS','HTML5','CSS3']
}
//父类原型公共方法
ParentClass.prototype.getBookName = function () {
  console.log(this.name)
}
//声明子类
function ChildClass(name,time) {
  this.time = time
  ParentClass.call(this,(name))
}
//类式继承
ChildClass.prototype = new ParentClass()
//子类原型方法
ChildClass.prototype.getBookTime = function () {
  console.log(this.time)
}

var book1 = new ChildClass('JQ',2011);
var book2 = new ChildClass('Vue',2015);

book1.getBookTime();  //2011
book1.getBookName();  //JQ
book1.booksName.push('React');
book2.getBookTime();  //2015
book2.getBookName();  //Vue
console.log(book1.booksName);  //["JS", "HTML5", "CSS3", "React"]
console.log(book2.booksName);  //["JS", "HTML5", "CSS3"]

4.原型式继承

function innerObject(fn) {
  function Fun() {
    //new 一个过渡函数
  }
  Fun.prototype = fn; //过渡函数的原型指向传入的对象
  return new Fun(); //返回原型继承了fn的实例
}

这种方法有缺点：
1.和类似继承很像，如果传入的对象属性中有引用类型，那么将产生和类似继承一样的问题，公用了一个属性，也会容易被其他的修改而发生改变
2.但是在此基础上推进可以得到寄生式继承

5.寄生式继承

function innerObject(fn) {
 function Fun() {

 }
 Fun.prototype = fn;
 return new Fun();
}

var book = {
 bookName : 'js book',
 alikeBooks : ['css book','html book']
};
function CreatBook() {
 var newBook = innerObject(book);
 newBook.getName = function () {
   console.log(bookName)
 }
 return newBook;
}
var book1 = new CreatBook();
var book2 = new CreatBook();
book1.alikeBooks.push('JQ');
console.log(book1)
console.log(book2)
console.log(book1.alikeBooks)//['css book','html book','JQ']
console.log(book2.alikeBooks)//['css book','html book','JQ']

book1 && book2输出结果：

book1 && book2输出结果.png

书上说“其实寄生式继承就是对原型继承的第二次封装，并且在这第二次封装的过程中对继承的对象进行了扩展，这样新创建的对象不仅有父类的属性和方法，还添加新的属性和方法”

6.寄生组合式继承

function innerObject(fn) {
  function Fun() {}
  Fun.prototype = fn;
  return new Fun();
}
function innerPrototypeObject(childClass, parentClass) {
  //传入父类的原型 得到继承了父类原型的对象newChildClassPrototype 
  var newChildClassPrototype = new innerObject(parentClass.prototype);
  //将继承了父类原型的对象newChildClassPrototype 的构造函数指向子类
  newChildClassPrototype.constructor = childClass;
  //重写子类的原型，newChildClassPrototype成为子类的原型
  childClass.prototype = newChildClassPrototype;
}

测试：

function innerObject(fn) {
  function Fun() {}
  Fun.prototype = fn;
  return new Fun();
}
function innerPrototypeObject(childClass, parentClass) {
  //传入父类的原型 得到继承了父类原型的对象newChildClassPrototype 
  var newChildClassPrototype = new innerObject(parentClass.prototype);
  //将继承了父类原型的对象newChildClassPrototype 的构造函数指向子类
  newChildClassPrototype.constructor = childClass;
  //重写子类的原型，newChildClassPrototype成为子类的原型
  childClass.prototype = newChildClassPrototype;
}

function parentClass(bookname) {
  this.name = bookname
  this.color = ['red','blue','green']
}
parentClass.prototype.getName = function () {
  console.log(this.name)
}
function childChass(bname,time) {
  parentClass.call(this,(bname))//继承父类属性
  this.time = time
}
innerPrototypeObject(childChass,parentClass);//继承父类原型
childChass.prototype.getTime = function () {
  console.log(this.time)
}
var newbook1 = new childChass('js',2015);
var newbook2 = new childChass('jq',2017);
console.log(newbook1)
console.log(newbook2)
newbook1.color.push('yellow');
console.log(newbook1.color);  //['red','blue','green','yellow']
console.log(newbook2.color);  //['red','blue','green']
newbook1.getTime();  //2015
newbook2.getName();  //jq

这里修改了实例newbook1的color这个属性，但是并没有影响到newbook2实例的属性的值，newbook1&&newbook2输出结果：

newbook1&&newbook2输出结果.png

现在处于昏迷状态，让我捋捋再改。