ES6中的类继承和ES5中的继承模式详解

1、ES5中的继承模式

我们先看ES5中的继承。

既然要实现继承,首先我们得要有一个父类。

Animal.prototype.eat = function(food) {
console.log(this.name + '正在吃' + food);
}
function Animal(name) {
this.color = ['green','red','blue'];
this.name = name || 'animal';
this.sleep = function() {
console.log(this.name + "正在睡觉")
}
}

1.1、原型链继承

原型链继承核心: 将父类的实例作为子类的原型。

function Cat(name) {
this.name = name
this.color = ['green','red','blue'];//引用类型值,,所有实例会共享这个属性。
}
Cat.prototype = new Animal();
var cat = new Cat('cat');
console.log(cat.name);
console.log(cat.eat('fish'));
console.log(cat instanceof Animal);
console.log(cat.sleep());

原型链式继承模式实现了子类对父类的原型的继承。

但是,原型链式继承并没有实现代码的复用,一些共同的属性:如name,在子类中还是得重新写一遍(即同一套代码还是得重新写)。

再者,cat继承了Animal实例的所有属性和方法,这些方法并不都是我们需要的,也就是过多的继承了没有用的属性。且如果原型中包含引用类型值,那么所有的实例会共享这个属性。

1.2、构造函数模式

构造函数模式核心: 在子类型构造函数的内部调用超类型构造函数。

function Person(name,age,sex){
this.name = name;
this.age = age;
this.sex = sex;
}
function Student(name,age,sex){
Person.call(this,name,age,sex);
this.grade = grade;
}
let student = new Student;

优点:

  • 构造函数模式继承实现了代码的复用

缺点:

  • 不能继承借用的构造函数的原型,只能借用构造函数本身的属性和方法
  • 每次构造函数都要多走一个函数

1.3、组合继承

实现核心:组合继承结合了上面两种方式的继承模式,即实现了代码复用,也实现呢了原型继承。

function SuperType(name) {
this.name = name;
this.colors = ['red','blue','pink'];
}
SuperType.prototype.sayName = function() {
console.log(this.name);
}
function SubType(name,age) {
//继承属性
SuperType.call(this,name);//在创建实例时第二次调用SuperType
this.age = age;
} //继承方法
SubType.prototype = new SuperType();//第一次调用SuperType
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function() {
console.log(this.age)
}

缺点:

  • 父类构造函数被调用2次,子类实例的属性存在两份,一份在原型上,一份在实例属性上。造成内存的浪费。

1.4、寄生组合式继承

寄生组合式继承是对组合继承的进一步优化。我们先看一下为什么要写这个语句。

SubType.prototype = new SuperType();

我们无非是想让SubType继承SuperType的原型。但是我们为什么不直接写成这样呢?

SubType.prototype = SuperType.prototype

这样写确实可以实现子类对象对父类对象原型的继承。但是这样写的话:所有继承该父类的子类对象的原型都指向同一个了。也就是说SubType不能有自己的原型了。这显然不是我们想要的。

既然不能直接继承,那可不可以间接继承SuperType.prototype呢。这就是最终的解决方案:寄生组合式继承

我们让一个函数去指向SuperType.prototype,然后让SubType.prototype指向这个函数产生的对象不就可以了嘛。

function inherit(Target,Origin) {//实现寄生组合式继承的核心函数
function F() {};
F.prototype = Origin.prototype; //F()的原型指向的是Origin
Target.prototype = new F(); //Target的原型指向的是F()
Target.prototype.constructor = Target;
SubType.prototype.__proto__ == SuperType.prototype
} function SuperType(name) {
this.name = name;
this.colors = ['red','blue','pink'];
}
SuperType.prototype.sayName = function() {
console.log(this.name);
}
function SubType(name,age) {
//继承属性
SuperType.call(this,name);//在创建实例时第二次调用SuperType
this.age = age;
} inherit(SubType,SuperType);//实现寄生组合式继承

我们再来看一下实现寄生组合式继承的核心函数。F函数其实是通用的,我们没必要每次进入inherit函数时都声明一遍。所以我们可以用闭包的形式来写:

var inherit = (function () {
var F = function () {};
return function (Target , Origin) {
F.prototype = Origin.prototype;//F()的原型指向的是Origin
Target.prototype = new F();//Target的原型指向的是F()
Target.prototype.constructor = Target;
Target.prototype.uber = Origin.prototype;
SubType.prototype.__proto__ == SuperType.prototype
}
})()

2、ES6中的类继承

我们先来看一下ES6里面是如何定义一个类的。

class Parent {
constructor(name,age) {
this.name = name;
this.age = age;
} getName() {
return this.name;
}
}
typeof Parent; //function,类的数据类型就是函数,类本身就指向构造函数

上面代码定义了一个“类”,可以看到里面有一个constructor方法,这就是构造方法,而this关键字则代表实例对象。也就是说,ES5的构造函数Parent,对应ES6的Parent类的构造方法。
Parent类除了构造方法,还定义了一个getName方法。

注意,定义“类”的方法的时候,前面不需要加上function这个关键字,直接把函数定义放进去就可以了。另外,方法之间不需要逗号分隔,加了会报错。类中定义的所有方法都是不可枚举的。

此外:类的所有方法都定义在类的prototype属性上面。且class不存在变量提升,如果在class声明之前调用,会报错。

new Parent();
class Parent {
constructor(name,age) {
this.name = name;
this.age = age;
} getName() {
return this.name;
}
}
//Uncaught ReferenceError: Parent is not defined

2.1、类的constructor方法

constructor方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法。一个类必须有constructor方法,

如果没有显式定义,一个空的constructor方法会被默认添加。

2.2、类的继承

class Child extends Parent {
constructor(sex) {
super();
this.sex = sex; }
}
var child = new Child('xiaoyu',12,'man');

在子类的构造函数中,如果显示声明了constructor,则必须要显示的调用super函数(这一点和Java有点不一样)。

只有调用super之后,才可以使用this关键字,否则会报错。

2.3、类的prototype属性和__proto__属性

大多数浏览器的ES5实现之中,每一个对象都有__proto__属性,指向对应的构造函数的prototype属性。

Class作为构造函数的语法糖,同时有 prototype属性和__proto__属性,因此同时存在两条继承链。

  • 子类的__proto__属性,表示类的继承,总是指向父类。
  • 子类prototype属性,表示类的实例的继承,类的实例的__proto__属性总是指向类的prototype属性。

这些特点和ES5的寄生组合式继承完全一致,所以类的继承可以看做是寄生组合式继承的语法糖(简单理解)。但实际上两者实现的底层原理是完全不一样的。因为阮一峰大大的书籍《ES6入门基础》里面认为ES6的继承机制完全和ES5的继承机制不同。阮一峰大大的书是这么说的。

ES5的继承,实质是先创造子类的实例对象this,然后再将父类的方法添加到this上面(Parent.apply(this))。ES6的继承机制完全不同,实质是先创造父类的实例对象this(所以必须先调用super方法),然后再用子类的构造函数修改this。

所以对这方面有深入理解的小伙伴们可以说说自己的理解。共同进步。

先写到这里,后面如果有更多的理解再继续添加。

上一篇:eclipse中创建类和方法自动注释


下一篇:数据库中table 和 schema的区别