JavaScript中的继承

最新推荐文章于 2023-07-14 20:40:49 发布

杏黄的三叶草

最新推荐文章于 2023-07-14 20:40:49 发布

阅读量102

点赞数

分类专栏： Web前端JavaScript

本文链接：https://blog.csdn.net/dwjdj/article/details/104437432

版权

Web前端JavaScript 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

继承

首先继承是一种关系，是类(class)与类之间的关系；js中没有类，但是可以通过构造函数来模拟类；然后通过原型来实现继承；继承是为了实现数据共享，js中的继承也是为了实现数据共享。
原型的作用之一:实现数据共享，节省内存空间
原型的作用之二:为了实现继承
继承是一种关系:父类与子类之间的关系

js中是通过改变原型的指向来实现继承的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function Person(name,age,sex) {
        this.name=name;
        this.age=age;
        this.sex=sex;
    }
    Person.prototype.eat=function () {
        console.log("当我唱起这首歌");
    };
    Person.prototype.sleep=function () {
        console.log("眼泪不听话了");
    };
    Person.prototype.play=function () {
        console.log("还记得当时我们有多快乐");
    };
    function Student(score) {
        this.score=score;
    }
    //改变学生的原型的指向即可--->学生和人已经产生了关系
    Student.prototype=new Person("张雨生",18,"男");
    Student.prototype.study=function () {
        console.log("真的什么都没有了");
    };
    var stu=new Student(100);
    console.log(stu.name);
    console.log(stu.age);
    console.log(stu.sex);
    stu.eat();
    stu.play();
    stu.sleep();
    console.log("下面的是学生对象中自己有的");
    console.log(stu.score);
    stu.study();
</script>
</body>
</html>

在这里插入图片描述

通过借用父类的构造函数来实现继承

/*
    * 通过改变原型的指向来实现继承，有一些缺陷；
    * 缺陷:因为改变原型的指向的同时实现继承，直接初始化了属性，继承过来的值就是一样的了，不具有多样性
    * 就只能调用对象的属性来进行重新赋值
    * 解决方案:继承的时候，不要改变原型的指向，直接调用父级的构造函数的方式来为属性赋值
    * 解决了属性继承，值不重复的问题，但是不能调用父类的方法
    * */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function Person(name, age, sex, weight) {
        this.name = name;
        this.age = age;
        this.sex = sex;
        this.weight = weight;
    }
    Person.prototype.sayHi = function () {
        console.log("您好");
    };
    function Student(name, age, sex, weight,score) {
        Person.call(this,name, age, sex, weight);
        this.score=score;
    }
    var stu1 = new Student("小明",10,"男","10kg","100");
    console.log(stu1.name, stu1.age, stu1.sex, stu1.weight, stu1.score);
    var stu2 = new Student("小红",20,"女","20kg","120");
    console.log(stu2.name, stu2.age, stu2.sex, stu2.weight, stu2.score);
    var stu3 = new Student("小丽",30,"妖","30kg","130");
    console.log(stu3.name, stu3.age, stu3.sex, stu3.weight, stu3.score);
</script>
</body>
</html>

组合继承，解决借用构造函数父类方法不能调用的问题

组合继承=原型继承+借用构造函数继承，解决了他们两的缺点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function Person(name,age,sex) {
        this.name=name;
        this.age=age;
        this.sex=sex;
    }
    Person.prototype.sayHi=function () {
        console.log("当我唱起这首歌，眼泪不听话了，还记得当初我们是多么快乐");
    };
    function Student(name,age,sex,score) {
        //借用构造函数:解决属性值重复的问题
        Person.call(this,name,age,sex);
        this.score=score;
    }
    Student.prototype=new Person();
    var stu=new Student("小贱",18,"男",100);
    console.log(stu.name,stu.sex,stu.age,stu.score);
    stu.sayHi();

    var stu1=new Student("阿豪",19,"男",99);
    console.log(stu1.name,stu1.sex,stu1.age,stu1.score);
    stu.sayHi();
</script>
</body>
</html>

在这里插入图片描述

拷贝继承

拷贝继承:直接把对象中的属性和方法直接复制到另一个对象中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var obj={
        name:"小贱",
        age:18,
        hook:function () {
            console.log("为你我受冷风吹");
        }
    };
    //改变的是地址的指向
    var obj2=obj;
    console.log(obj2.name);

    //将对象的属性和方法复制，浅拷贝
    var obj3={};
    for(var key in obj){
        obj3[key]=obj[key];
    }
    console.log(obj3.age);

    //将对象的属性和方法复制，浅拷贝
    function Person() {
    }
    Person.prototype.age=10;
    Person.prototype.sex="男";
    Person.prototype.height=100;
    Person.prototype.play=function () {
        console.log("可惜让你快乐的人并不是我");
    };
    var obj4={};
    //Person的构造函数中有prototype原型，prototype是一个对象，那么里面的age,sex,height,play都是该对象中的属性或者方法
    for(var key in Person.prototype){
        obj4[key]=Person.prototype[key];
    }
    console.dir(obj4);
    obj4.play();
</script>
</body>
</html>

总结

    * 面向对象的特性:封装，继承，多态
    * js不是面向对象的语言，但是可以模拟面向对象，模拟继承，为了节省内存空间
    * 原型的作用:数据共享，节省内存空间；实现继承
    *
    * 原型继承:改变原型指向
    * 借用构造函数继承:解决属性单一问题
    * 组合继承:原型继承+借用构造函数继承；既能解决属性问题，又能解决方法问题
    * 拷贝继承:把对象中需要共享的属性和方法，用遍历的方式复制到另一个对象中

杏黄的三叶草

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中的继承

继承首先继承是一种关系，是类(class)与类之间的关系；js中没有类，但是可以通过构造函数来模拟类；然后通过原型来实现继承；继承是为了实现数据共享，js中的继承也是为了实现数据共享。原型的作用之一:实现数据共享，节省内存空间原型的作用之二:为了实现继承继承是一种关系:父类与子类之间的关系js中是通过改变原型的指向来实现继承的<!DOCTYPE html><ht...
复制链接

扫一扫