js的继承的方式

1.对象冒充继承
使用 bind,call,apply 解决构造函数属性的继承
缺点:不能继承原型上的属性和方法

  //-------------父类-------------

        function Person(name, age, sex) {
            this.name = name;
            this.age = age;
            this.sex = sex;
        }

        Person.prototype.run = function () {
            console.log(`我${this.name},爱跑步!`);
        }
        
        //-------------子类-------------
        function Student(sNo, name, age, sex) {
            //对象的冒充
            // bind,call,apply
            Person.call(this, name, age, sex);
            //后面
            this.sNo = sNo;
        }

        var s1 = new Student(10001, "刘德华", 20, "男");
        console.log(s1);
        s1.run()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

2.原型链继承
缺点:不能让构造函数的属性,初始化

   //-------------父类-------------
      function Person(name, age) {
        this.name = name;
        this.age = age;
      }
      Person.prototype.name = "刘德海";
      Person.prototype.run = function () {
        alert(123);
      }

      //-------------子类-------------
      function Student() {
      }
      //我只实现了原型继承,构造函数内部的属性,是无法设置初始值
      Student.prototype = new Person();
      var s2 = new Student();
      console.log(s2);
      // s2.run()
      console.log(s2.address);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3.组合继承(对象冒充+原型链继承)
缺点:原型中会有多余的属性,并且是undefined

   //-------------父类-------------
      function Person(name, age) {
        this.name = name;
        this.age = age;
      }
      Person.prototype.name = "刘德海";
      Person.prototype.run = function () {
        alert(123);
      }

      //-------------子类-------------
      function Student() {
      }
      //我只实现了原型继承,构造函数内部的属性,是无法设置初始值
      Student.prototype = new Person();
      var s2 = new Student();
      console.log(s2);
      // s2.run()
      console.log(s2.address);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

4.寄生组合继承
寄生继承+对象冒充继承=寄生组合继承
寄生组合继承 Object.create(base.prototype);

   // 寄生继承,解决原型问题
        // 寄生继承+对象冒充继承=寄生组合继承
        function inherit_proto(base, child) {
            // 1.创建父类原型,根据父类的原型,创建一个新的对象
            var basePrototype = Object.create(base.prototype);
            // 2.创建的原型对象,它的构造还是指向原来的构造函数
            // 我们就修改子类的构造器
            basePrototype.constructor = child
            // 3.让自己拥有父类的原型
            child.prototype = basePrototype
            console.log(basePrototype);
        }
        // 父类
        function Person(name, age, sex) {
            this.name = name
            this.age = age
            this.sex = sex
        }
        Person.prototype.sayHi = function () { }

        // 子类
        function Student(sNo, name, age, sex) {
            Person.call(this, name, age, sex)
            this.sNo = sNo
        }
        // 调用方法
        inherit_proto(Person, Student)
        var stu = new Student("1001", "小易", 22, "女")
        console.log(stu);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

5.ES6的类+extends继承

  class Person {
            constructor(name, age) {
                this.name = name
                this.age = age
            }
            run(){
                return  `跑步`
            }
        }
        class Student extends Person {
            constructor(name, age, sex) {
                super(name, age)
                this.sex = sex
            }
            // 重写:子类重写父类的方法
            run(){
                return  `哈哈哈哈哈哈或`
            }
        }
        var p=new Student("小易",22,"女")
        console.log(p.run());
        console.log(p);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22