【前端面试】06 类的定义和继承的几种方式

本文笔记基于「千古壹号」的GitHub项目：https://github.com/qianguyihao/web

1.考点

• 类的声明
• 生成实例
• 如何实现继承？继承的本质就是原型链
• 继承的几种方式

2.解决方法

2.1 类的声明

• 传统写法，构造函数法

 function Animal1() {
        this.name = 'hyo'; //通过this，表明这是一个构造函数
    }

• ES6写法，用class声明

  class Animal2 {
        constructor() {  //可以在构造函数里写属性
            this.name = name;
        }
    }

2.2 生成实例

直接new

var obj=new Animal1();
var obj2=new Animal2();

2.3 继承的几种方式

继承的方式有几种？每种形式的优缺点是？

1.借助构造函数

function Parent1() {
        this.name = 'parent1 的属性';
    }
 function Child1() {
        Parent1.call(this);         //【重要】此处用 call 或 apply 都行：改变 this 的指向，parent的实例 --> 改为指向child的实例
        this.type = 'child1 的属性';
    }
console.log(new Child1);

• parent的实例的属性挂在到了child的实例上，这就实现了继承。
• 优点：改变this指向，实现了继承；
• 缺点：无法继承父类的原型。

2.通过原型链继承

 function Parent() {
        this.name = 'Parent 的属性';
    }
    function Child() {
        this.type = 'Child 的属性';
    }
  Child.prototype = new Parent(); //【重要】
 console.log(new Child());

• 优点：可以继承父类的原型；
• 缺点：如果修改子类一个实例的属性，则子类的另一个实例的相应属性也会跟着改变（原因：共用原型）

3.构造函数+原型链

 function Parent3() {
        this.name = 'Parent 的属性';
        this.arr = [1, 2, 3];
    }
    function Child3() {
        Parent3.call(this); //方法1
        this.type = 'Child 的属性';
    }
    Child3.prototype = new Parent3(); //方法2
    var child = new Child3();

• 优点：解决前两种方法的问题
• 缺点：让父类的构造方法执行了2次

【注意】ES6中的继承了解即可，重点掌握ES5的继承