JS：实现继承

最新推荐文章于 2024-07-04 13:19:16 发布

萏语

最新推荐文章于 2024-07-04 13:19:16 发布

阅读量93

点赞数 3

CC 4.0 BY-SA版权

分类专栏： JS 文章标签： javascript 前端原型模式

本文链接：https://blog.csdn.net/liuxudanhahaha/article/details/122282131

JS 专栏收录该内容

9 篇文章

订阅专栏

JS：实现继承

在这里插入图片描述
关键：将子类的prototype指向父类的某个实例，然后子类的实例就可以以某个people类的实例为原型，原型链连上了

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 父类，人类
        function People(name, age, sex) {
            this.name = name;
            this.age = age;
            this.sex = sex;

        }
        People.prototype.sayHello = function () {
            console.log('你好，我是' + this.name + '我今年' + this.age + '岁了')
        };
        People.prototype.sleep = function(){
             console.log(this.name + '开始睡觉zzzzz')
         };
        // 子类，学生类
        function Student(name, age, sex, scholl, studentNumber) {
            this.name = name;
            this.age = age;
            this.sex = sex;
            this.scholl = scholl;
            this.studentNumber = studentNumber;
        }

        // 关键语句，实现继承
        Student.prototype = new People();


        Student.prototype.study = function () {
            console.log(this.name + '正在学习');
        }
        Student.prototype.exam = function () {
            console.log(this.name + '正在考试，加油！');
        }
        // 重写、复写（override）父类的sayHello
        Student.prototype.sayHello = function () {
            console.log('敬礼！我是' + this.name + '我今年' + this.age + '岁了');
        }

        // 实例化
        var hanmeimei = new Student('韩梅梅', 9, '女', '慕课小学', 100556);

        hanmeimei.study();
        hanmeimei.sayHello();
        hanmeimei.sleep();

        var laozhang = new People('老张', 66, '男');
        laozhang.sayHello();
        // laozhang.study();  错误，因为laozhang只是people，不是学生
    </script>
</body>

</html>