分为六步，能看完的话，不会你打我
类式继承、构造函数继承、组合继承、原型继承、寄生式继承、寄生组合式继承
/**
* 一、类式继承
* 优点：原型链会被继承类使用
* 缺点：多个继承类 会公用构造函数的this的公用属性，一个修改会影响到其他
*/
// 父类
function superClass(name) {
this.name = name || 'superClass';
this.friends = ['zhangsan', 'lisi', 'wanger'];
}
superClass.prototype.showSomething = function () {
console.log(this.name, 'showSomething of superClass');
}
// 子类
function subClass(name) {
this.name = name || 'subClass';
}
// 将子类的原型指向父类的实例 父类实例可访问父类原型和构造函数的方法及属性 实现了继承
subClass.prototype = new superClass();
subClass.prototype.showSomethingOfSub = function() {
console.log(this.name, 'showSomething of subClass');
}
// 此时instance1、instance2继承了superClass
instance1 = new subClass('chencheng');
instance2 = new subClass('wuxuanyu');
// 测试
console.log(instance1.name, 'instance1.name');
console.log(instance1.friends, 'instance1.friends');
instance1.showSomething();
instance1.friends.push('nigulasi-zhaosi'); // 修改数组 看结果如何
console.log(instance2.name, 'instance2.name');
console.log(instance2.friends, 'instance2.friends');
instance2.showSomething();
// 结果
// chencheng instance1.name
// [ 'zhangsan', 'lisi', 'wanger' ] 'instance1.friends'
// chencheng showSomething of superClass
// wuxuanyu instance2.name
// [ 'zhangsan', 'lisi', 'wanger', 'nigulasi-zhaosi' ] 'instance2.friends'
// wuxuanyu showSomething of superClass
// 结论：第一继承类修改了friends数组 结果第二个继承类的friends也跟着变了，所以有瑕疵，接下来看第二种
// --------------------------------------------------------------------------------------
/**
* 二、构造函数继承
* 优点：多个继承类 不会公用构造函数的this的公用属性，避免了类式继承的缺点
* 缺点：原型链不会被继承类使用
*/
// 父类
function superClass(name) {
this.name = name || 'superClass';
this.friends = ['zhangsan', 'lisi', 'wanger'];
}
superClass.prototype.showSomething = function () {
console.log(this.name, 'showSomething of superClass');
}
// 子类
function subClass(name) {
this.name = name || 'subClass';
// 请注意，继承精髓在此，利用了call方法的改变this继承类创建了新的this属性，避免了引用类型指向一个
superClass.call(this, this.name);
}
// 此时instance1、instance2继承了superClass
instance1 = new subClass('chencheng');
instance2 = new subClass('wuxuanyu');
// 测试
console.log(instance1.name, 'instance1.name');
console.log(instance1.friends, 'instance1.friends');
instance1.showSomething();
instance1.friends.push('nigulasi-zhaosi'); // 修改数组 看结果如何
console.log(instance2.name, 'instance2.name');
console.log(instance2.friends, 'instance2.friends');
instance2.showSomething();
// 结果
// superClass instance1.name
// [ 'zhangsan', 'lisi', 'wanger' ] 'instance1.friends'
// 报错
// superClass instance2.name
// [ 'zhangsan', 'lisi', 'wanger' ] 'instance2.friends'
// 报错
// 结论：子类修改数组不会相互影响了，开心哦，但是instance1.showSomething()、instance2.showSomething()都报错了，尴尬
// 说明了子类并没有父类原型链的方法，有瑕疵，接下来看第三种
// --------------------------------------------------------------------------------------
/**
* 三、组合继承
* 优点：多个继承类 不会公用构造函数的this的公用属性，避免了类式继承的缺点，原型链也会被继承类使用
* 缺点：构造函数在原型链被复制过程中，又被搞了一回，资源浪费啊，原型链里有个constructor也被一起复制了，没必要的
*/
// 父类
function superClass(name) {
this.name = name || 'superClass';
this.friends = ['zhangsan', 'lisi', 'wanger'];
}
superClass.prototype.showSomething = function () {
console.log(this.name, 'showSomething of superClass');
}
// 子类
function subClass(name) {
this.name = name || 'subClass';
// 请注意，继承精髓在此，利用了call方法的改变this继承类创建了新的this属性，避免了引用类型指向一个
superClass.call(this, this.name);
}
// 原型链我也指向一次，这样我实例化的对象就能用父类原型链的方法，哈哈哈，可惜啊，这个父类实例化对象带有父类的构造函数，上面已经superClass.call(this)了，在这没必要了，浪费了
subClass.prototype = new superClass();
subClass.prototype.showSomethingOfSub = function() {
console.log(this.name, 'showSomething of subClass');
}
// 此时instance1、instance2继承了superClass
instance1 = new subClass('chencheng');
instance2 = new subClass('wuxuanyu');
// 测试
console.log(instance1.name, 'instance1.name');
console.log(instance1.friends, 'instance1.friends');
instance1.showSomething();
instance1.friends.push('nigulasi-zhaosi'); // 修改数组 看结果如何
console.log(instance2.name, 'instance2.name');
console.log(instance2.friends, 'instance2.friends');
instance2.showSomething();
// 结果
// superClass instance1.name
// [ 'zhangsan', 'lisi', 'wanger' ] 'instance1.friends'
// superClass showSomething of superClass
// superClass instance2.name
// [ 'zhangsan', 'lisi', 'wanger' ] 'instance2.friends'
// superClass showSomething of superClass
// 结论：子类修改数组不会相互影响了，开心哦，而且也能用父类的原型的方法了，但是父类构造函数第二次在原型中有点浪费了接下来看第四种吧，还有耐心不啊
// --------------------------------------------------------------------------------------
/**
* 四、原型式继承-类式继承subClass不带构造函数的封装
* 优点：洁净板的类式继承
* 缺点：缺点同第一种
*/
function inheritObject(o) {
function F() {}
F.prototype = o; // 为什么不是new o呢？因为这个例子里o不是构造函数啦 是个非构造函数对象
return new F();
}
// 测试
let people = {
name: 'chencheng',
friends: ['zhangsan', 'lisi', 'wanger']
}
let instance1 = inheritObject(people);
let instance2 = inheritObject(people);
console.log(instance1.name, 'instance1.name');
console.log(instance1.friends, 'instance1.friends');
instance1.friends.push('nigulasi-zhaosi'); // 修改数组 看结果如何
console.log(instance2.name, 'instance2.name');
console.log(instance2.friends, 'instance2.friends');
// 结果
// chencheng instance1.name
// [ 'zhangsan', 'lisi', 'wanger' ] 'instance1.friends'
// chencheng instance2.name
// [ 'zhangsan', 'lisi', 'wanger', 'nigulasi-zhaosi' ] 'instance2.friends'
// 结论：跟第一种问题一样，妈的瑕疵 整第五种吧，我也累了 哈哈
// --------------------------------------------------------------------------------------
/**
* 五、寄生式继承
* 优点：洁净板的类式继承的升级
* 缺点：缺点同第一种
*/
function inheritObject(o) {
function F() {}
F.prototype = o; // 为什么不是new o呢？因为这个例子里o不是构造函数啦 是个非构造函数对象
return new F();
}
function createPeople(obj) {
let o = new inheritObject(obj);
// 重点在此 可拓展了
o.doSomething = function () {
console.log('do something ba');
}
return o;
}
// 测试
let people = {
name: 'chencheng',
friends: ['zhangsan', 'lisi', 'wanger']
}
let instance1 = createPeople(people);
let instance2 = createPeople(people);
console.log(instance1.name, 'instance1.name');
console.log(instance1.friends, 'instance1.friends');
instance1.doSomething();
instance1.friends.push('nigulasi-zhaosi'); // 修改数组 看结果如何
console.log(instance2.name, 'instance2.name');
console.log(instance2.friends, 'instance2.friends');
// 结果
// chencheng instance1.name
// [ 'zhangsan', 'lisi', 'wanger' ] 'instance1.friends'
// chencheng instance2.name
// [ 'zhangsan', 'lisi', 'wanger', 'nigulasi-zhaosi' ] 'instance2.friends'
// 结论：跟上一种问题一样，接下来到完美的继承了 好累
// --------------------------------------------------------------------------------------
/**
* 六、寄生式组合式继承-就叫完美继承吧
* 优点：完美
* 缺点：看了半天才到完美继承 坑爹
*/
function inheritObject(o) {
function F() {}
F.prototype = o; // 为什么不是new o呢？因为这个例子里o不是构造函数啦 是个非构造函数对象
return new F();
}
function inheritPrototype(subClass, superClass) {
// 复制父类原型保存一份给p
let p = inheritObject(superClass.prototype);
// 修正因为修改F()子类原型导致子类的constructor属性被修改
p.constructor = subClass;
// 设置子类原型
subClass.prototype = p;
}
// 恭喜你 找到了完美继承的方式 太累了
困了 安
网友评论