【JavaScript】原型链继承

时间:2019-01-10
本文章向大家介绍【JavaScript】原型链继承,主要包括【JavaScript】原型链继承使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

前言:

js就严格意义上来讲它不是一个面向对象的语言,因为这里没有类的概念,但是呢它通过某些东西,却可以认为它是基于对象的一门语言,也就是说这里有对象,也有封装,继承和多态,本篇博客主要讲解js中的继承到底是什么原理!

1、什么是原型链

原型链是一种关系,实例对象和原型对象之间的关系,关系是通过原型(proto)来联系的!

首先明确第一点:每个对象都有__proto__属性,但是只有 函数对象才有prototype属性!

接着明确第二点:实例对象中__proto__是原型,浏览器使用的,构造函数中的prototype是原型,是程序员使用的

接下来图演示一下:

代码:

<script>

    function Person(name, age) {
        this.name = name;
        this.age = age;
        this.eat = function () {
            console.log("吃啥啊");
        }
    };

    Person.prototype.sex = "男";
    Person.prototype.sayHi = function () {
        console.log("你好啊");
    };

    var per = new Person("小明", "20");

    console.dir(per);//查看类中的属性和方法

</script>

代码对应的图:如下图所示:

此时我们的实例对象可以访问原型对象的方法!

2、原型链是如何体现出继承的

代码

<script>

    //人的构造函数
    function Person(name, age,sex){
        this.name = name;
        this.sex = sex;
        this.age = age;
    }

    //原型函数
    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("小明", 10, "男");
    
    //学生
    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>

代码对应的图:

这就实现了继承;下一篇博客讲述原型链的三种继承方式!