JavaScript什么是原型链原型链原理讲解

发布时间：2025-09-21 00:56:00 阅读量： 0 来源： 互联网转载

前言

原型链在js中是有一定难度的，如果把原型链学习好了，相信大家对javascript的原理会有更好的理解。学习原型链首先我们需要建立一种概念，比方我们人吧，他是一个种类，可以细分为男人，女人，然后男人又可以细分为老中青少幼几个分类，在人之上我们是不是还有个人科，人科之上是灵长目科，然后这里包含了各种猴子。在灵长目上是哺乳动物，哺乳动物之上又有脊索动物门。即使分了这么多科目所有的物种是不是也存在共同的属性，比如我们都是碳水化合物的生物。然后人科下的生物是不是也有共同的属性，比如都是胎生，两性繁殖。

那么我们通过现实衍射虚拟，javascript里，不管是函数，还是数组，字符串，数字，或则是对象本身，它们都最终会指向同一个对象Object。我不知道javascript是怎么定义的，在我学习c#时告诉我Object是一切类的基类。

比如Number类型，我们可以用代码实例来看看

Let a= 3console.dir(Object.getprototypeOf(a))

我们可以看到a它实际是一个函数，来自与function Number() { [native code] } ，在它的原型上有Constructor,toExponential,toFixed,toLocaleString,toPrecision,toString,valueOf这些方法，其中constructor是构造函数,其它的是它的共享方法。比如我们常用的数字转字符串 toString()方法。而变量Number的上一级就是Object，它们都有相同的共享方法toString,valueOf。

运行流程

这里我拿toString来举例，比如我们把变量a转换为字符串，调用方法a.toString()。JavaScript首先查找a本身有没有这个方法，如果没有向Number()查找，在没有就查找Object，如果还没有就报错，它是一层一层往上查找的，比如我们常用的一些内置函数如indexof split等等都是通过原型来实现的。我们可以把上面的示例代码的变量a改成字符串在打印一下看看。

结果显示，字符串来自函数String(),它下面包含了所有的字符串能使用的方法，包括我上面讲的indexof,split内置函数。

自定义一个原型

为了加深一下理解，我们自己写一个示例把。如下

function test(){}test.prototype.person=()=>{}let a=new test()console.dir(Object.getPrototypeOf(a))

现在我们就可以调用a.person()方法了,它们之前的关系我们可以在上图看到，a来自与test()，test()的实例也包含有person()方法。

上诉我们使用了自定义函数，字符串，数字，现在我们在看一下其他的类型

数组

let a=[1,2,3]console.dir(Object.getPrototypeOf(a))

打印后我们发现数组来自与一个Array()函数.。

布尔型

let a=falseconsole.dir(Object.getPrototypeOf(a))

打印后发现Boolean()函数。

最后总结

首先原型是建立在函数上，实例会继承函数的所有方法，比如我们定义的字符串let a="字符串类型"，首先继承与String()->Function()->Object()，最后面a可以使用原型上的所有方法。比***自String()的ｒｅｐｌａｃｅ() 。具体属于各自的方法包含共享方法我们可以在控制台打印查看。这样是不是发现javascript貌似也是由一个一个函数组成？今天大致的原理就讲解到这里，接下来我会在写原型的具体方法，以及包括构造函数constructor,Prototype,proto及一些原型上的方法。本篇文章主要让大家知道一下大致的原理，心里面由个概念就成。

JavaScript原型链全讲解 JavaScript什么是原型链原型链原理讲解 JavaScript原型链constructor prototype __proto__讲解 JavaScript原型链什么是原型链原型链的原理是什么

JavaScript什么是原型链 原型链原理讲解

热门文章

JavaScript什么是原型链原型链原理讲解