js中的继承与其说是对象的继承，但更像是让函数的功能和用法的复用，组合；例如两个不同的函数各有各的方法，但是我想拥有两个函数所有的方法，就可以通过继承得到，下面总结了js实现继承的几种方式以及各自的优缺点：
首先定义一个父类
// 定义一个父类
function Father(name) {
// 属性
this.name = name || '->father';
// 实例方法
this.sayName = function() {
console.log(this.name);
}
}
// 原型方法
Father.prototype.age = 18;
Father.prototype.sayAge = function() {
console.log(this.age);
}
准备好了么？ 要开始了哦~
1、原型链继承：将父类的实例作为子类的原型
function Son(name) {
// Father.call(this);
this.name = name || '->son';
}
Son.prototype = new Father();
var s = new Son('son');
console.log(s.name); // son
s.sayAge(); // 18
s.sayName(); // son
console.log(s.age); // 18
console.log(s instanceof Father); // true
console.log(s instanceof Son); // true
- 优点
- 纯粹的继承关系，实例是子类的实例，也是父类的实例
- 父类新增原型方法、原型属性，子类都能访问到
- 简单，易于实现
- 缺点
- 可以在Son构造函数中，为Son实例增加实例属性。新增的属性和方法必须放在new Father()这样的语句之后执行。
- 无法实现多继承，因为原型一次只能被一个实例更改
- 来自原型对象的所有属性被所有实例共享
- 创建子类实例时，无法向父构造函数传参
2、构造继承：复制父类的实例属性给子类
function Son(name) {
Father.call(this);
this.name = name || '->son';
}
var s = new Son('son');
console.log(s.name); // son
//s.sayAge(); // 抛出错误
s.sayName(); // son
console.log(s.age); // undefined
console.log(s instanceof Father); // false
console.log(s instanceof Son); // true
- 优点
- 解决了原型链继承中子类实例共享父类引用属性的问题
- 创建子类实例时，可以向父类传递参数
- 可以实现多继承（call多个父类对象）
- 缺点
- 实例并不是弗雷德实例，只是子类的实例
- 只能继承父类实例的属性和方法，不能继承其原型上的属性和方法
- 无法实现函数复用，每个子类都有父类实例的副本，影响性能
3、实例继承：为父类实例添加新特征，作为子类实例返回
function Son(name) {
var f = new Father();
f.name = name || '->son'
return f;
}
var s = new Son('son');
console.log(s.name); // son
s.sayAge(); // 18
s.sayName(); // son
console.log(s.age); // 18
console.log(s instanceof Father); // true
console.log(s instanceof Son); // false
- 优点
- 不限制调用方法，不管是new子类()还是子类()，返回的对象具有相同的效果
- 缺点
- 实例是父类的实例，不是子类的实例
- 不支持多继承
4、拷贝继承：对父类实例中的的方法与属性拷贝给子类的原型
function Son(name) {
var f = new Father();
for(var k in f) {
Son.prototype[k] = f[k];
}
Son.prototype.name = name || '->son';
}
var s = new Son('son');
console.log(s.name); // son
s.sayAge(); // 18
s.sayName(); // son
console.log(s.age); // 18
console.log(s instanceof Father); // false
console.log(s instanceof Son); // true
- 优点
- 支持多继承
- 缺点
- 效率低，性能差，占用内存高（因为需要拷贝父类属性）
- 无法获取父类不可枚举的方法（不可枚举的方法，不能使用for-in访问到
5、组合继承：通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用
function Son(name) {
Father.call(this);
this.name = name || '->son'
}
Son.prototype = new Father();
// 修复构造函数指向
Son.prototype.constructor = Son;
var s = new Son('son');
console.log(s.name); // son
s.sayAge(); // 18
s.sayName(); // son
console.log(s.age); // 18
console.log(s instanceof Father); // true
console.log(s instanceof Son); // true
- 优点
- 弥补了构造继承的缺点，现在既可以继承实例的属性和方法，也可以继承原型的属性和方法
- 既是子类的实例，也是父类的实例
- 不存在引用属性共享问题
- 可传参
- 函数可以复用
- 缺点
- 调用了两次父类构造函数，生成了两份实例（子类实例将子类原型上的那份屏蔽了）
6、寄生组合继承：通过寄生方式，砍掉父类的实例属性，避免了组合继承生成两份实例的缺点
function Son(name) {
Father.call(this);
// var f = new Father();
this.name = name || '->son'
}
(function() {
// 创建一个没有实例方法的类
var None = function() {};
None.prototype = Father.prototype;
// 将实例作为子类的原型
Son.prototype = new None();
// 修复构造函数指向
Son.prototype.constructor = Son;
})();
var s = new Son('son');
console.log(s.name); // son
s.sayAge(); // 18
s.sayName(); // son
console.log(s.age); // 18
console.log(s instanceof Father); // true
console.log(s instanceof Son); // true
- 优点
- 堪称完美
- 缺点
- 实现起来较为复杂
7、Class继承：使用extends表明继承自哪个父类，并且在子类构造函数中必须调用super
class Son extends Father {
constructor(name) {
super(name);
this.name = name || '->father';
}
}
var s = new Son('son');
console.log(s.name); // son
s.sayAge(); // 18
s.sayName(); // son
console.log(s.age); // 18
console.log(s instanceof Father); // true
console.log(s instanceof Son); // true
网友评论