【JS】原型对象与原型链

标签: JS

原型链:

实例对象和原型对象之间的关系,通过__proto__来联系的链(如下图的1,2,3)

 

原型对象:

原型对象(Person.prototype)是 构造函数(Person)的一个实例

 

构造函数:

构造函数就是制造一个对象的函数

 

大家先看一段代码:

<meta charset="UTF-8">
    <script>
        //人的构造函数
        function Person(age){
            this.age=age;
        }
        //给人的原型对象添加一个eat的方法
        Person.prototype.eat=function(){
            console.log("eat food");
        }
        
        
        //学生个构造函数
        function Student(sex){
            this.sex=sex;
        }
        //给学生的原型添加一个sayHi的方法
        Student.prototype.sayHi=function(){
            console.log("hi");
        }
        
        //学生的原型指向了一个新的人对象(继承)
        Student.prototype=new Person(10);
        
        Student.prototype.Study=function(){
            console.log("study");
        }
        
        //实例化了一个学生
        var student =new Student("man");
        
        //这个时候,student是无法调用sayHi这个方法的
        //student.sayHi();
        
        //但是可以调用Study这个方法
        student.Study();

        //但是他可以调用eat这个方法
        student.eat();
        
        console.log(per);
    </script>

如果:

构造函数的原型(Student)对象指向的对象(person)发生了变化,那么之前在原型添加的方法(sayHi),新的实例(student)对象时无法调用的,但是指向的对象方法(person)的方法(eat),新的实例(student)是可以调用的!

 

继承

其实上述的过程就是js实现继承的过程,虽然js不是一门面向对象的语言,但是它可以通过原型实现继承。当个一对象的构造函数指向另外一个实例对象时,这个时候,这个构造函数就继承了指向对象的属性和方法,之后通过这个构造函数创建的对象就有了继承了实例对象的方法!

上代码为例:

Student指向了person(这就是实现了Student继承了Person),之后由student创建的student就有了person的eat的方法!

图一

 

图解:

图二

注释:

紫色的线:student之前的指向

绿色的线:student修改之后的指向

红色的线:person的指向

 

构造函数中prototype:构造函数中原型对象

  1. 构造函数中唯一的属性
  2. 我们程序员用的
  3. 可以看做原型对象的指针
  4. 它里边的属性或是方法可以通过实例对象直接调用

原型对象中prototype:实际的原型对象(具体的数据)

  1. 实际的原型对象
  2. 具体的数据集合
  3. 它也是一个对象,里边也有__proto__

实例对象中__proto__

  1. 指向该实例对象中的构造函数中的prototype
  2. 原型对象的__proto__(经过一系列对象)最终指向object,object__proto__指向null(如图一所示)

 

可以通过修改实例对象的值修改原型对象的值吗?

  • 不可以

那么怎么修改原型对象的值呢?

  • 直接对象.prototype.value = 值(直接修改)

如果访问对象的这个属性的时候,没有找到该对象的属性,怎么办?

  • 由于JS属于动态开发语言,对象没有该属性的时候,会动态的创建该属性!

 

大家有什么细节不懂,可以点这里

简单总结分享,有什么问题欢迎大家和我交流,感谢大家认真阅读和点赞鼓励!

 

版权声明:本文为lk1822791193原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/lk1822791193/article/details/82720929

智能推荐

Flutter:Scaffold.of() called with a context that does not contain a Scaffold.

Flutter:Scaffold.of() called with a context that does not contain a Scaffold. 当我第一次点击按钮想要弹出底部消息时出现了如下错误 当BuildContext在Scaffold之前时,调用Scaffold.of(context)会报错。这时可以通过Builder Widget来解决,代码如下:...

【机器学习基础】线性回归

                                                        &nbs...

08-Vue实现书籍购物车案例

书籍购物车案例 index.html main.js style.css 1.内容讲解 写一个table和thead,tbody中每一个tr都用来遍历data变量中的books列表。 结果如下: 在thead中加上购买数量和操作,并在对应的tbody中加入对应的按钮。结果如下: 为每个+和-按钮添加事件,将index作为参数传入,并判断当数量为1时,按钮-不可点击。 结果如下: 为每个移除按钮添加...

堆排序

堆排序就是利用堆进行排序的方法,基本思想是,将代排序列构造成一个大根堆,此时整个序列的最大值就是堆顶的根节点。将它与堆数组的末尾元素交换,此时末尾元素就是最大值,移除末尾元素,然后将剩余n-1个元素重新构造成一个大根堆,堆顶元素为次大元素,再次与末尾元素交换,再移除,如此反复进行,便得到一个有序序列。 (大根堆为每一个父节点都大于两个子节点的堆) 上面思想的实现还要解决两个问题: 1.如何由一个无...

基础知识(变量类型和计算)

一、值类型 常见的有:number、string、Boolean、undefined、Symbol 二、引用类型 常用的有:object、Array、null(指针指向为空)、function 两者的区别: 值类型暂用空间小,所以存放在栈中,赋值时互不干扰,所以b还是100 引用类型暂用空间大,所以存放在堆中,赋值的时候b是引用了和a一样的内存地址,所以a改变了b也跟着改变,b和a相等 如图: 值...

猜你喜欢

Codeforces 1342 C. Yet Another Counting Problem(找规律)

题意: [l,r][l,r][l,r] 范围内多少个数满足 (x%b)%a!=(x%a)%b(x \% b) \% a != (x \% a) \% b(x%b)%a!=(x%a)%b。 一般这种题没什么思路就打表找一下规律。 7 8 9 10 11 12 13 14 15 16 17 18 19 20 28 29 30 31 32 33 34 35 36 37 38 39 40 41 49 50...

[笔记]飞浆PaddlePaddle-百度架构师手把手带你零基础实践深度学习-21日学习打卡(Day 3)

[笔记]飞浆PaddlePaddle-百度架构师手把手带你零基础实践深度学习-21日学习打卡(Day 3) (Credit: https://gitee.com/paddlepaddle/Paddle/raw/develop/doc/imgs/logo.png) MNIST数据集 MNIST数据集可以认为是学习机器学习的“hello world”。最早出现在1998年LeC...

哈希数据结构和代码实现

主要结构体: 实现插入、删除、查找、扩容、冲突解决等接口,用于理解哈希这种数据结构 完整代码参见github: https://github.com/jinxiang1224/cpp/tree/master/DataStruct_Algorithm/hash...

解决Ubuntu中解压zip文件(提取到此处)中文乱码问题

在Ubuntu系统下,解压zip文件时,使用右键--提取到此处,得到的文件内部文件名中文出现乱码。 导致此问题出现的原因一般为未下载相应的字体。 解决方案: 在终端中使用unar命令。 需要注意的是系统需要包含unar命令,如果没有,采用如下的方式解决: 实例效果展示: 直接提取到此处: 使用 unar filename.zip得到的文件...