1. 程式人生 > 其它 >JS中常見的幾種繼承方式

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