【JavaScript】继承的几种方式_继承有几种-优快云博客

本文链接：https://blog.youkuaiyun.com/jerry11112/article/details/86291640

本文深入探讨JavaScript中三种常见的继承模式：原型继承、构造函数继承和组合继承。通过实例代码，详细解析每种继承方式的工作原理，优势及局限性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本博客三种继承导图

在这里插入图片描述

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);

此时就可以继承方法了!