一、原型继承
function Father() {
this.names = ['tom', 'kevin'];
}
Father.prototype.getName = function () {
console.log(this.names);
}
function Child() {
}
Child.prototype = new Father();
var child1 = new Child();
child1.names.push('boaz'); // ['tom', 'kevin'，'boaz']
child1.getName();
var child2 = new Child();
child2.getName(); // ['tom', 'kevin'，'boaz']
原型继承的缺点：
- 父类的引用类型属性会被所有子类实例共享，任何一个子类实例修改了父类的引用类型属性，其他子类实例都会受到影响
- 创建子类实例的时候，不能向父类传参
二、借用构造函数继承
function Father(name) {
this.name = name;
this.say = function () {
console.log('hello');
}
}
function Child(name) {
this.name = name;
Father.call(this,name);
}
var p1 = new Child('Tom');
console.log('p1', p1);
p1.say();
var p2 = new Child('Kevin');
console.log('p2', p2);
p2.say();
优点：
- 避免了引用类型属性被所有实例共享
- 可以向父类传参
缺点：
- 方法必须定义在构造函数中
- 每创建一个实例都会创建一遍方法
三、组合继承（原型继承和借用构造函数继承的组合）
function Father(name, age) {
this.name = name;
this.age = age;
console.log(this);
}
Father.prototype.say = function() {
console.log('hello');
}
function Child(name,age) {
Father.call(this,name,age);
}
Child.prototype = new Father();
var child = new Child('Tom', 22);
console.log(child);
常用的继承方式唯一的缺点是，父类的构造函数会被调用两次
四、寄生式继承
function createObj(o) {
var clone = object.create(o);
clone.sayName = function () {
console.log('hello');
}
return clone;
}
就是创建一个封装的函数来增强原有对象的属性，跟借用构造函数一样，每个实例都会创建一遍方法
五、寄生组合式继承
// 红宝书上面的方式
function object(o) {
var F = function() {};
F.prototype = o;
return new F();
}
function inhert(subType,superType) {
var prototype = object(superType.prototype);
// 构造器重定向，如果没有通过实例找回构造函数的需求的话，可以不做构造器的重定向。但加上更严谨
prototype.constructor = subType;
subType.prototype = prototype;
}
function Super(name) {
this.name = name;
}
Super.prototype.sayName = function() {
console.log(this.name);
}
function Sub(name, age) {
Super.call(this, name);
this.age = age;
}
inhert(Sub, Super);
var sub = new Sub('Tom', 22);
sub.sayName();
另外一种更容易理解的方式
// 原型+借用构造函数+寄生
function Person() {
console.log(22);
this.class = '人类';
}
// 原型继承模式
Person.prototype.say = function() {
console.log(this.name);
}
/**
* 寄生 Man.prototype.__proto__ === Person.prototype;
* Man的父亲的父亲 === Person的父亲
*/
Man.prototype = Object.create(Person.prototype);
Man.prototype.constructor = Man;
function Man(name, age) {
this.name = name;
this.age = age;
// 借用构造函数模式
Person.call(this);
}
var man = new Man('张三丰', 100);
console.log(man);
这是es5最好的继承方式，集合了所有继承方式的优点于一身。
六、es6的继承方式
class Father{
constructor(name) {
this.name = name;
}
sayName() {
console.log(this.name);
}
}
class Child extends Father{
constructor(name, age) {
super(name);
this.age = age;
}
}
var child = new Child('Tom',22);
child.sayName();
总结:
三种简单的继承方式
- 原型式继承
- 借用构造函数继承
- 寄生式继承
两种复杂的继承方式
- 组合式继承: 1+2的组合
- 寄生组合式继承: 1+2+3的组合
