【JavaScript】继承的几种方式

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/jerry11112/article/details/86291640

本博客三种继承导图

1、原型继承：

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

    Person.prototype.sayHi = function () {

        console.log("您好");
    };

    function Student(score) {

        this.score = score;
    }

    //继承了人的数据
    Student.prototype = new Person("小明", 10, "男", "50KG");

    var stu1 = new Student("100");
    console.log(stu1.name, stu1.age, stu1.sex, stu1.score);

    var stu2 = new Student("110");
    console.log(stu1.name, stu1.age, stu1.sex, stu1.score);

    var stu2 = new Student("120");
    console.log(stu1.name, stu1.age, stu1.sex, stu1.score);
</script>

控制台显示的结果

这种继承方式有个缺点就是继承的所有的属性都是一样的

2、构造函数继承

    function Student(name, age, sex,score) {
        Person.call(this, name, age, sex ,score)
        this.score = score;
    }
    var stu1 = new Student("小明", 10, "男", "10KG", "100");
    console.log(stu1.name, stu1.age, stu1.sex, stu1.score);
    stu1.sayHi();//将会报错，他不能继承

    var stu2 = new Student("小红", 20, "男", "30KG", "50");
    console.log(stu1.name, stu1.age, stu1.sex, stu1.score);

    var stu3 = new Student("小绿", 30, "男", "20KG", "70");
    console.log(stu1.name, stu1.age, stu1.sex, stu1.score);

上边的确实解决了属性的继承的问题，但是不能继承方法！

3、组合继承：在构造函数继承的基础上添加原型继承（改变原型指向）

    function Student(name, age, sex,score) {

        Person.call(this, name, age, sex ,score)
        this.score = score;
    }


//改变原型指向
  Student.prototype = new Person();

    var stu1 = new Student("小明", 10, "男", "10KG", "100");
    console.log(stu1.name, stu1.age, stu1.sex, stu1.score);
    stu1.sayHi();

    var stu2 = new Student("小红", 20, "男", "30KG", "50");
    console.log(stu1.name, stu1.age, stu1.sex, stu1.score);

    var stu3 = new Student("小绿", 30, "男", "20KG", "70");
    console.log(stu1.name, stu1.age, stu1.sex, stu1.score);

此时就可以继承方法了!