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

小灰灰 2024-04-17 05:29 14阅读 0赞

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

### 文章目录 ###

*  1.考点
 *  2.解决方法
 *   *  2.1 类的声明
     *  2.2 生成实例
     *  2.3 继承的几种方式

# 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的继承