继承方式知多少
过完年，马上又到了金三银四的季节，这段时间无论是身经百战的老鸟，还是在程序界中杀个七进七出的高手，抑或是菜鸟都在这段时间内，疯狂的恶补自己的知识面，以便于在跳槽的时候拿到一个称心如意的offer —— 而js继承不必说必然是一个非常高频的基础面试题
说它基础是因为绝大部分都能说出几点来，接下来我就带大家全面的回顾一下这个知识点
JS是一种弱类型的面向对象语言（抽象，封装，继承，多态），所以在实现继承上还是一如既往的灵活
//父类
function Person(name) {
this.name = name || '无名'
this.sayHello = function () {
console.log('hello everyBody i am ' + this.name)
}
}
Person.prototype.doWork = function (work) {
console.log(this.name + '的工作是--' + work)
}
ES5继承
第一种 —— 原型继承
原型继承基本上是人人都会的功能无非就是 将父类的实例当作子类的原型，
其中牵扯到的知识点有两个
this的指向
原型的链条继承
//子类
function Teacher() {}
Teacher.prototype = new Person('张三')
var ls = new Teacher()
console.log(ls.name) // 张三
ls.sayHello() //hello everyBody i am 张三
ls.doWork('教师') //张三的工作是--教师
var zs = new Teacher()
console.log(zs.name) // 张三
zs.sayHello() //hello everyBody i am 张三
zs.doWork('教师') //张三的工作是--教师
优点：
- 简单，只要是父类原型上的方法和属性都可以访问使用
缺点：
- 优点即缺点，多个子类实例共享父类的属性
- 实例不能传参 即 var lisi = new Teacher('李四')，参数李四不会传到父类，输出依然是张三
- 不能实现多继承（多继承是指继承多个父类）
第二种 —— 通过构造函数继承
通过call来调用父类构造函数，所以每一个子类都会有一个父类实例的副本
知识点
- 通过call实现对象冒充
//子类
function Teacher(name) {
Person.call(this,name)
this.name = name || '无名'
}
var zs = new Teacher('张三')
console.log(zs.name)
zs.sayHello()
zs.doWork('教师') //报错
优点
- 通过call实现后，子类的实例拷贝的是父类的副本，不存在属性共享的问题
- 可实现多继承，通过多个call调用
缺点
- 优点类似于拷贝赋值，所以实例化的对象只是子类的实例，而不是父类的实例
- 无法复用父类原型链上的方法
第三种 拷贝继承
这个有点类似于上面，就是把父类的实例化遍历，通过赋值的方式赋值给子类的原型
//子类
function Teacher(name) {
var example = new Person();
for(var p in example){
Teacher.prototype[p] = example[p];
}
Teacher.prototype.name = name || 'Tom';
}
优点
- 可实现多继承，即把多个父类的实例化通过遍历的方式赋值给子类
缺点
- 麻烦，因为要遍历父类原型占用内存高
第四种 —— 把父类的实例当作子类返回值
通过实例化父类，然后为这个实例添加新的属性
//子类
function Teacher(name) {
let example = new Person()
example.name = name || '无名'
return example
}
var zs = new Teacher('张三')
console.log(zs.name)
zs.sayHello()
zs.doWork('教师')
优点
- 因为有return返回的值所以不管是new Teacher()还是函数调用Teacher()返回的结果是一样的
缺点
- 因为返回的是父类的实例，所以实例化对象zs只是父类的实例，不是子类的实例
- 不能实现多继承
小结一下
上面的四种方法都各有自己的优缺点，但是总体来看要么是不全面要么是麻烦或者占内存，一般在开发中不建议这样使用，但是也根据你自己的实际情况，比如上面的某个方式很符合你的业务场景，而又不考虑扩展之类的其它东西，也是可以使用的
当然除了这些，js发展了这么多年肯定是有比上面四种更好的方法，我们接着介绍
第五种 —— 组合继承（构造 + 实例）继承
通过call拷贝来父类的属性给子类使用，并且通过原型链的方式实现原型链的继承
//子类
function Teacher(name) {
Person.call(this，name)
this.name = name || '无名'
}
Teacher.prototype = Object.create(Person.prototype)
Teacher.prototype.constructor = Teacher
var zs = new Teacher('张三')
console.log(zs.name)
zs.sayHello()
zs.doWork('教师')
优点
- 解决了构造继承和原型继承的缺点
缺点
- 调用了两次父类的构造，生成了两份实例
第六种 寄生组合式继承
这种方式可以理解为第五种方法的优化
//子类
function Teacher(name) {
Person.call(this，name)
this.name = name || '无名'
}
(function(){
let Example = function(){};
Example.prototype = Person.prototype;
Teacher.prototype = new Example();
Teacher.prototype.constructor = Teacher
})();
var zs = new Teacher('张三')
console.log(zs.name)
zs.sayHello()
zs.doWork('教师')
优点
- 堪称完美
缺点
- 有点复杂
ES6 继承
class Person{
constructor(name){
this.name = name
}
sayName(){
console.log('my name is ' + this.name)
}
}
class Teacher extends Person{
constructor(name){
super()
this.name = name
}
}
console.log(new Teacher('zs'))
new Teacher('zs').sayName()
子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工，如果不调用super方法，子类就得不到this对象。因此，只有调用super之后，才可以使用this关键字
底层实现：一个继承语句同时存在两条继承链：一条实现属性继承，一条实现方法的继承
class A extends B{}
A.__proto__ === B; //继承属性
A.prototype.__proto__ == B.prototype;//继承方法
从上面可以看到不管是ES5还是ES6继承的基本实现方式是一样的，我想这就是所谓的万变不离其宗吧
如果有错误的地方 欢迎指正批评