《原型链重置版》一万多字让你读懂JavaScript原型对象与原型链的继承,探秘属性的查找机制! (3)

简介: 理解javascript原型链

logo.png

原型链

理解了以上这些是什么之后,那么接下来,我们就可以来研究一下什么是原型链了!

并且js中实现继承主要是依靠原型链来实现! 所以我们才需要学习原型链的原理!

在学习原型链之前,你先记住一个概念,就是原型链: 其实是实例对象原型对象之间的链条!

我们之前不是说了 实例对象在搜索属性或者方法的优先级吗 ?

就是说如果当你调用一个属性或者方法时, 其实首先是会在当前实例对象上进行搜索, 如果没有那么就到构造函数中去进行搜索,如果还是没有,那么就到原型对象当中去是进行搜索

那么有人就会问了,如果 当前构造函数的原型对象中也没有呢? 接下来js会干什么呢?

揭晓谜底吧,请看下图:

如图
7.jpg

分析

以上这张图就是默认情况下,如果说person这个实例对象如果顺着__proto__这个链条没有在Person.prototype中找到想找的方法或数据,那么又会继续顺着__proto__这个链条往上走,继续寻找,

那么找谁呢? 这是js设计者规定的,默认就会找到一个Object.prototype原型对象当中去, 那么这样子的查找链条也就形成了原型链

并且既然这里有一个所谓的Object.prototype原型对象 那么这个对象也会有一个属性叫constructor的属性,来返指向其它的构造函数Object, 这里的Object.prototype原型对象自身其实也有一个__proto__, 因为我们说了,实例对象才有这个属性,所以还可以向上访问,不过这里再往上就只能返回null了,因为没有了!

小结

js其实在面向对象的设计之初就是依照近原则,当我们要使用一个方法和数据时,js会优先查找自身,如果没有就查找离自己最近的,这里也就指的是构造函数,如果自己没有,他就会沿着原型链__proto__这个链条,向上查找,如果还没有找到,它还会沿着原型链继续向上查找,直到找到Object.prototype原型对象

Object.prototype原型对象默认也是会有一些方法在里面的

如图

8.png

所以这里 其实就是解释了js中每个函数都存在原型对象属性prototype

并且在js中所有函数的默认的原型对象都是Object实例对象,而且默认还形成一个层层嵌套的形式,这也就是默认原型链

那我们要Object原型对象干嘛,它里面又没几个方法属性来满足我们日常开发的需求对吧,

所以我们需要扩大我们的原型链条, 这就要谈论到继承

原型对象中的this指向

当我们使用new操作符来执行一个函数的时候,这个时候,构造函数中的this会指向到该实例对象

原型对象中如果函数方法出现的this 那么也是指向的该实例对象

举个栗子

function Test(name,age,company,salary){
   
    this.username=name;
    this.age=age;
    this.company=company;
    this.salary=salary;
    console.log(this);//打印this
}

Test.prototype.say=function (){
   
    console.log(this); //打印this
}

var test=new Test('张三',18,'重庆科技','9K');

//打印实例对象
console.log(test);

结果如下

8-1.png

由此可见构造函数中的this原型对象中方法中的this 其实就是当前new出来的实例对象

相关文章
|
6天前
|
JavaScript 前端开发
js遍历对象的方法
js遍历对象的方法
13 1
|
25天前
|
JavaScript 前端开发
javaScript Number 对象
avaScript Number 对象是 JavaScript 中用于表示数字的基本类型之一。它表示的数字可以是整数,也可以是浮点数。在 JavaScript 中,所有的数字都是 Number 类型的实例,可以通过 new Number() 构造函数来创建。此外,JavaScript 还提供了一些用于处理数字的常用方法和属性,例如 parseFloat()、parseInt()、isNaN()、is
53 6
|
3天前
|
前端开发 JavaScript 数据处理
JavaScript中的异步编程及Promise对象
【2月更文挑战第3天】 传统的JavaScript编程模式在处理异步任务时常常会导致回调地狱和代码可读性较差的问题,而Promise对象的引入为解决这一问题提供了一种优雅的解决方案。本文将介绍JavaScript中的异步编程方式以及Promise对象的使用方法和优势,帮助读者更好地理解和运用异步编程技术。
14 8
|
9天前
|
JavaScript 前端开发 索引
【JavaScript】面试手撕数组原型链(易)
续借上文,这篇文章主要讲的是数组原型链相关的考题,有些人可能会纳闷,数组和原型链之间有什么关系呢?我们日常使用的数组forEach,map等都是建立在原型链之上的。举个🌰,如我有一个数组const arr = [1,2,3]我想要调用arr.sum方法对arr数组的值进行求和,该如何做呢?我们知道数组没有sum函数,于是我们需要在数组的原型上定义这个函数,才能方便我们调用,具体代码如下。接下来我们就是采用这种方式去实现一些数组常用的方法。
29 6
|
19天前
|
JavaScript Unix 索引
2022年11月21日13:32:00——T5——JS对象与Date日期函数
2022年11月21日13:32:00——T5——JS对象与Date日期函数
20 0
|
21天前
|
JavaScript 前端开发 Java
JavaScript数组操作示例及对象操作技巧
今天针对javascript的数组的一些常见操作进行一些讲解,希望对给为开发者有帮助。 先看下面常见的三种循环。
|
23天前
|
前端开发 JavaScript Java
前端(JavaScript)------函数与对象
前端(JavaScript)------函数与对象
47 0
|
23天前
|
JavaScript
JS 获取对象数据类型的键值对的键与值
JS 获取对象数据类型的键值对的键与值
|
23天前
|
JavaScript 索引
js之数组,对象,类数组对象
js之数组,对象,类数组对象
|
25天前
|
JavaScript 前端开发 Java
Postman 提供的Javascript 对象有哪些?
Postman 提供的Javascript 对象有哪些?

相关产品

  • 云迁移中心