JS中常见的几种继承方式

2021-11-08 09:00:58 阅读：153 来源： 互联网

标签：name Parent 继承 age 张三几种 Child JS 构造函数

JS的三种继承方式

1.ES6 类继承

		//1- es6 类继承
        class Parent {
            constructor() {
                this.age = 30;
            }
        }
        class Child extends Parent {
            constructor() {
                super();
                this.name = '张三';
            }
        }
        let o1 = new Child();
        console.log(o1, o1.name, o1.age);// Child {age: 30, name: '张三'} '张三' 30

2.原型链继承

优点: 父类方法可以复用

缺点:父类的所有引用属性（info）会被所有子类共享，更改一个子类的引用属性，其他子类也会受影响子类型实例不能给父类型构造函数传参

		// 2- 原型链继承
        function Parent() {
            this.age = 30;
        }
        function Child() {
            this.name = '张三';
        }
        Child.prototype = new Parent();
        let o2 = new Child();
        console.log(o2, o2.name, o2.age);// Child {name: '张三'} '张三' 30

3.构造函数继承

优点: 1.可以在子类构造函数中向父类传参数

2.父类的引用属性不会被共享

缺点:只能继承构造函数的内部成员,不能继承原型链(Parent.prototype)上的方法

		// 3- 构造函数继承
        function Parent() {
            this.age = 18;
        }
        function Child() {
            this.name = '张三';
            Parent.call(this);
        }
        let o3 = new Child();
        console.log(o3, o3.name, o3.age);// Child {name: '张三', age: 18} '张三' 18

4.混合继承

优点: 1.父类的方法可以复用

2.可以在Child构造函数中向Parent构造函数中传参

3.父类构造函数中的引用属性不会被共享

		// 4- 组合式继承
        function Parent() {
            this.age = 19;
        }
        function Child() {
            Parent.call(this);
            this.name = '张三';
        }
        Child.prototype = new Parent();
        let o4 = new Child();
        console.log(o4, o4.name, o4.age);// Child {age: 19, name: '张三'} '张三' 19

标签：name,Parent,继承,age,张三,几种,Child,JS,构造函数
来源： https://www.cnblogs.com/Jyc403/p/15522684.html