本文仅仅是记录自己学习的心得体会，如果有误，欢迎指出，非原创，具体请参考：《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
newbook1&&newbook2输出结果.png
现在处于昏迷状态，让我捋捋再改。
