js 构造函数继承及原型链继承

最新推荐文章于 2023-07-12 23:06:58 发布

炉火纯青-旺

最新推荐文章于 2023-07-12 23:06:58 发布

阅读量243

点赞数

文章标签： javascript html5

本文链接：https://blog.csdn.net/qq_34870529/article/details/120745917

版权

这篇博客探讨了JavaScript中的两种继承方式：构造函数继承和原型链继承。通过示例代码展示了如何在子类中调用父类构造函数以实现继承，并解释了原型链如何允许实例访问其构造函数原型上的属性和方法。内容涵盖了如何创建子类、实例化对象以及调用继承的方法。

摘要由CSDN通过智能技术生成

1、构造函数继承

实现原理是，在子类的构造函数中，通过apply()或call()的形式，调用父类构造函数已实现继承

//定义一个超类/父类： 人
function Person (name, age) {
    //人都有姓名，年龄，会吃饭，会睡觉
    //传入出生年份 year，自动计算年龄
    this.name = name;
    this.age = age;
    this.eat = function () {
        alert('吃饭');
    }
    this.sleep = function () {
        alert('睡觉');
    }
}

//定义一个子类： 学生
//学生Student也是人，自然要继承超类 Person 的所有属性和方法
//学生都应当有姓名、年龄、会吃饭、会睡觉
//当然学生也有自己的一些属性：学号，学校名称等，和方法，比如都要去做一件事：写作业
function Student (stuID, schoolName, name, age) {
    this.stuID = stuID;
    this.schoolName = schoolName;
    //用call调用 Person,以实现继承
    Person.call(this, name, age);
    //用apply调用person实现继承
    Person.apply(this,[name,age]);
    // 用bind实现继承
    Person.bind(this)(name,age);
}

Student.prototype.doHomework = function () {
    alert('做作业');
}

//实例化一个学生
var stu1 = new Student(1001, '第一小学', '王宝宝',20);
console.log(stu1.stuID);       //1001
console.log(stu1.schoolName);  //'第一小学'
console.log(stu1.name);        //'王宝宝'
console.log(stu1.age);         //20
stu1.eat();                    //'吃饭'
stu1.sleep();                  //'睡觉'
stu1.doHomework();             //'做作业'

2、js原型链继承

所有的实例都有一个内部指针，指向它的原型对象，并且可以访问原型对象上的所有属性和方法。

//定义一个 Animal 构造函数，作为 Dog 的父类
function Animal () {
    this.superType = 'Animal';
}

Animal.prototype.superSpeak = function () {
    alert(this.superType);
}

function Dog (name) {
    this.name = name;
    this.type = 'Dog';  
}
//改变Dog的prototype指针，指向一个 Animal 实例
Dog.prototype = new Animal();
//上面那行就相当于这么写
//var animal = new Animal();
//Dog.prototype = animal;

Dog.prototype.speak = function () {
　　alert(this.type);
}
var doggie = new Dog('jiwawa');
doggie.superSpeak();  //Animal