实现继承的几种方式?

本文详细介绍了JavaScript中的三种主要继承模式:构造函数继承、原型继承和组合继承。构造函数继承通过call、apply或bind方法实现,但无法复用原型对象中的函数;原型继承实现了函数复用,但无法灵活传递参数;组合继承结合两者优势,既能复用函数又能灵活传参。

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

构造函数继承

原理:利用call,apply,bind等方法,在构造函数内部去调用别的构造函数,为己所用.
缺点:原型对象的函数无法复用

        function People(name,age) {
            this.name = name;
            this.age = age;
        } 
        People.prototype.action = function () {
            console.log("复习");
        }

        function Student(name,age) {
            People.call(this,name,age);
        }

        var student1 = new Student("mark",21);
        console.log(student1);

原型继承

优点:实现了原型对象内的函数复用.
缺点:虽然得到了属性值,但无法在实例对象内灵活的传参,根本不能用.

        function People(name,age) {
            this.name = name;
            this.age = age;
        } 
        People.prototype.action = function () {
            console.log("复习");
        }
        function Student(name,age,banji) {
            this.banji = banji;
        }
        // People的实例对象一定可以使用People的所有功能,
        //new People中需要传参。
        // 沿着原型链向上寻找属性值和方法
        Student.prototype = new People("jack",25);
        Student.prototype.constructor = Student;
        Student.prototype.trouble = function () {
            console.log("考试");
        }
        var student1 = new Student("mark",20,"2班");
        console.log(student1.name, student1.age);//jack,25
        student1.action();//复习
        student1.trouble();//考试

组合继承

原理:构造函数继承与原型链继承的组合使用.
优势:既实现了原型对象内的函数复用,又可以在实例对象内灵活的传参.

        function People(name,age) {
            this.name = name;
            this.age = age;
        } 
        People.prototype.action = function () {
            console.log("复习");
        }
        function Student(name,age) {
            People.call(this,name,age);
        }
        // 由于使用借用构造函数继承的方式给Student设置了自身的属性name和age,
        // 所以new People中的参数不需要传入。
        Student.prototype = new People();
        // 由于使用了覆盖方式设置原型,需要补全constructor属性
        Student.prototype.constructor = Student;
        // 注意:单独设置的功能需要在继承操作后设置。
        Student.prototype.trouble = function () {
            console.log("考试");
        }
        var student1 = new Student("mark",20);
        console.log(student1.name);//mark
        student1.action();//复习
        student1.trouble();//考试
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值