《原型链重置版》一万多字让你读懂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出来的实例对象

相关文章
|
12天前
|
存储 JavaScript 前端开发
|
13天前
|
JavaScript 前端开发 网络架构
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
17 1
|
10天前
|
JavaScript C++
js【详解】原型 vs 原型链
js【详解】原型 vs 原型链
8 0
|
11天前
|
JavaScript
js 简易对象转字符串后恢复为简易对象(如 ^a=$1^b=2转对象)
js 简易对象转字符串后恢复为简易对象(如 ^a=$1^b=2转对象)
8 0
|
11天前
|
JavaScript
js 数组移除指定元素【函数封装】(含对象数组移除指定元素)
js 数组移除指定元素【函数封装】(含对象数组移除指定元素)
9 0
|
11天前
|
JavaScript
JS 数组去重(含简单数组去重【5种方法】、对象数组去重【2种方法】)
JS 数组去重(含简单数组去重【5种方法】、对象数组去重【2种方法】)
13 0
|
12天前
|
JavaScript 前端开发 测试技术
js 控制台调试——console 对象【详解】
js 控制台调试——console 对象【详解】
14 0
|
12天前
|
JavaScript
js 内建对象的拓展 shim/polyfill ( 内含js 判断对象的属性是否存在的方法)
js 内建对象的拓展 shim/polyfill ( 内含js 判断对象的属性是否存在的方法)
11 0
|
13天前
|
前端开发 JavaScript 流计算
前端 JS 经典:打印对象的 bug
前端 JS 经典:打印对象的 bug
11 0
|
13天前
|
JavaScript 前端开发 API
js 运行机制(含异步机制、同步任务、异步任务、宏任务、微任务、Event Loop)
js 运行机制(含异步机制、同步任务、异步任务、宏任务、微任务、Event Loop)
8 0