网站建设上,wordpress标签调用,电脑版百度网盘,编程培训机构JS的原型链 文章目录 JS的原型链前言一、原型是什么#xff1f;二、原型链总结 前言
在使用数组或对象中的方法时#xff0c;你是不是会感觉很奇怪#xff0c;为什么仅仅是创建了一个数组或是对象#xff0c;就能够使用它提供的方法呢#xff1f;JS是怎么做到的呢#x…JS的原型链 文章目录 JS的原型链前言一、原型是什么二、原型链总结 前言
在使用数组或对象中的方法时你是不是会感觉很奇怪为什么仅仅是创建了一个数组或是对象就能够使用它提供的方法呢JS是怎么做到的呢原因很简单因为这些方法早就被定义在数组或对象的构造函数的原型上了接下来本篇文章就将着重讲解JS原型和原型链的相关知识。 一、原型是什么
JS中每一个函数都有自己的原型对象这个对象会存放一些属性和方法。这个函数上会有一个prototype属性指向这个原型对象同时通过这个函数创建的实例对象身上都会有一个名叫__proto__的属性也指向这个原型对象。如下图所示
正是因为这样的关系所以当你使用实例上的方法或属性时js会先从这个实例身上找找到了对应的方法或者属性则直接调用或者返回而如果找不到js就会顺着__proto__这条线找到当前实例构造函数的原型上面看这个对象身上有没有使用的方法或属性如果有则使用原型上的属性和方法。
二、原型链
先看一张图 原型链本质就是原型关系的拓展就像之前说的原型本质就是一个对象而任何对象都是Object这个构造函数的实例因此当一个实例 众所周知在JavaScript中函数也是一种特殊的对象因此任何通过构造函数创建的实例都可以找到Object这个构造函数的原型从而使用它上面的方法这里举一个例子 我在Object的原型上创建了一个叫sayHaHa的方法并且用一个空对象执行这个方法发现执行时并未报错原因就是在obj这个空对象身上找不到sayHaHa这个方法就去它的构造函数的原型身上找此时发现Object的原型身上有这个方法于是调用了这个方法。
这也解释了前言中的问题当的使用对象或数组中的方法时在对象和数组身上找不到对应的方法于是js顺着__proto__这条线找到了它们的构造函数也就是Function和Object的原型上而原型上是有这些方法的。
而原型链有一个特定就是依次查找首先在实例身上找找到了直接调用找不到就顺着__proto__去它的构造函数的原型上找找到了就调用还没找到就顺着构造函数原型对象的__proto__属性继续向上查找直到找到为止但就像上图所示在JavaScript中任何实例顺着原型链都会最终查找的Object的原型上因此JS将Object构造函数的原型上的__proto__指向了null作为原型链的终点当查到了null之后如果还没查到就会报错提示找不到。
这就是JS中原型链的相关概念活用原型链可以给我们代码开发提供很多便利最典型的就是数组和对象原型链上提供的各种方法另外vue2中全局事件总线也是通过向Vue的原型上注入$bus对象再给这个对象上增加属性和方法从而达成组件间相互传参的。 总结
JS的原型主要是用于扩展实例对象身上的属性和方法让同一个构造函数下的实例都能够使用这些新增加的属性或方法。调用属性或方法的方式就是顺着原型链一层一层向上查直到找到对应的属性和方法找到就返回或调用或者找到了原型链的尽头null提示报错信息XXX不存在。
