js 用几种方式实现继承（构造函数继承、原型链继承、组合方式继承）

借助构造函数实现继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类与继承</title>
</head>
<body>
    <script>
        function a(){
            this.a=1;
        }
        function b(){
            a.call(this);
            this.b=2;
        }
        console.log(new b);
    </script>
</body>
</html>

结果

存在问题

上述方式，是通过改变 a 构造函数运行时 this 指向，指向 b，但是 a 原型链上的东西没有继承。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类与继承</title>
</head>
<body>
    <script>
        function a(){
            this.a=1;
        }
        a.prototype.ma = function(){
            console.log('aaa');
        }
        function b(){
            a.call(this);
            this.b=2;
        }
        console.log(new b);
    </script>
</body>
</html>

因此，通过构造函数来实现的继承，只能继承父类构造函数的属性，如果原型 prototype上面还有方法甚至原型链上的方法，不会继承。

借助原型链实现继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类与继承</title>
</head>
<body>
    <script>
        function a(){
            this.a=1;
        }
        function b(){
            this.b=2;
        }
        b.prototype = new a();
        console.log(new b);
    </script>
</body>
</html>

结果

存在的问题

首先读者请看如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类与继承</title>
</head>
<body>
    <script>
        function a(){
            this.a=1;
            this.arr=[1,2,3,4,5,];
        }
        function b(){
            a.call(this);
            this.b=2;
        }
        b.prototype = new a();
        let b1 = new b();
        let b2 = new b();
        b1.arr.push(100);
        console.log(b1,b2);
    </script>
</body>
</html>

从以上结果来看，当我们修改某一个对象时，该函数所产出的所有新实例都会发生改变，这就造成了 数据污染 问题，肯定不是我们想要的。（因为它们引用的是同一个父类实例对象）

组合方式实现继承1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类与继承</title>
</head>
<body>
    <script>
        function a(){
            this.name='aaa';
            this.arr=[1,2,3,4,5];
        }
        function b(){
            a.call(this);
            this.type='bbb';
        }
        b.prototype = a.prototype;
        let b1 = new b();
        let b2 = new b();
        b1.arr.push(100);
        console.log(b1,b2);
        console.log(b1.constructor);
        console.log(b2.constructor);
    </script>
</body>
</html>

结果

存在的问题

如上图结果图所示，拿得是父类的原型对象，依旧没有自己的 constructor。（和父类的原型对象是同一个对象，导致 constructor也指向父类）

组合方式实现继承2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类与继承</title>
</head>
<body>
    <script>
        function par(){
            this.name='aaa';
            this.arr=[1,2,3,4,5];
        }
        function child(){
            par.call(this);
            this.type='bbb';
        }
        //这里使用Object.create()方法，和之前直接用a.prototype来说，它创建了
        //一个中间对象，和父类不是指向同一个区域了
        //这样就能区分父类和子类的原型对象了，达到父类和子类原型对象的隔离效果
        child.prototype = Object.create(par.prototype);
        //由于隔离了父类子类的原型对象，我们就可以指定子类自己的constructor
        child.prototype.constructor = child;
        let child1 = new child();
        let child2 = new child();
        child1.arr.push(100);
        console.log(child1,child2);
        //判断构造函数
        console.log(child1.constructor);
        console.log(child2.constructor);
    </script>
</body>
</html>