日记8-20

2024.8.20

js继承方式有哪些

方式一：es6的class继承

优点：语法简洁

缺点：对旧版js不友好（需要编译，且底层实现仍然基于原型链和构造函数）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//es6
class Parent{
    constructor(){
        this.age=18;
    }
}
class Child extends Parent{
    constructor(){
        super();
        this.name = '张三';
    }
}

let a = new Child();
console.log(a,a.name,a.age);

方式二：js的原型链继承

优点：

1.继承机制简单，易于实现

2.子类自动继承父类的原型方法

缺点：

1.子类实例会共享父类原型对象，父类原型对象被修改，所有子类实例会受影响

2.不适合复杂的继承关系（多层继承）

1
2
3
4
5
6
7
8
9
10
11
//原型链继承
function Parent(){
    this.age =20;
}
function Child(){
    this.name = '张三';
}

Child.prototype = new Parent();
let b = new Child
console.log(b,b.name,b.age)

方式三：借用构造函数继承

优点：

1.支持多重继承(修改’prototype’对象)

2.可在子类构造函数中初始化父类的属性

缺点：

1.不支持父类原型上方法继承

2.不好管理继承链的多个父类

1
2
3
4
5
6
7
8
9
10
11
//借用构造函数继承
function Parent(sex){
    this.age =22;
    this.sex = sex
}
function Child(sex){
    this.name = '李四';
    Parent.call(this,sex)
}
let c = new Child('woman')
console.log(c,c.name,c.age,c.sex)

方式4：组合式继承

优点：解决了原型链继承的问题，继承链中的父类方法不会被共享，避免了副作用。

缺点：实现复杂，需要在子类构造函数中调用父类构造函数来初始化实例属性。

1
2
3
4
5
6
7
8
9
10
11
12
//混合继承
 function Parent(){
    this.age =23;
}
function Child(){
    this.name = '王五';
    Parent.call(this)
}
Child.prototype = new Parent();
let d = new Child()
console.log(d,d.name,d.age)