前言
原型链在js中是有一定难度的,如果把原型链学习好了,相信大家对javascript的原理会有更好的理解。学习原型链首先我们需要建立一种概念,比方我们人吧,他是一个种类,可以细分为男人,女人,然后男人又可以细分为老中青少幼几个分类,在人之上我们是不是还有个人科,人科之上是灵长目科,然后这里包含了各种猴子。在灵长目上是哺乳动物,哺乳动物之上又有脊索动物门。即使分了这么多科目所有的物种是不是也存在共同的属性,比如我们都是碳水化合物的生物。然后人科下的生物是不是也有共同的属性,比如都是胎生,两性繁殖。
那么我们通过现实衍射虚拟,javascript里,不管是函数,还是数组,字符串,数字,或则是对象本身,它们都最终会指向同一个对象Object。我不知道javascript是怎么定义的,在我学习c#时告诉我Object是一切类的基类。
比如Number类型,我们可以用代码实例来看看
Let a= 3 console.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=false console.dir(Object.getPrototypeOf(a))
打印后发现Boolean()函数。
最后总结
首先原型是建立在函数上,实例会继承函数的所有方法,比如我们定义的字符串let a="字符串类型",首先继承与String()->Function()->Object(),最后面a可以使用原型上的所有方法。比如来自String()的replace() 。具体属于各自的方法包含共享方法我们可以在控制台打印查看。这样是不是发现javascript貌似也是由一个一个函数组成?今天大致的原理就讲解到这里,接下来我会在写原型的具体方法,以及包括构造函数constructor,Prototype,proto及一些原型上的方法。本篇文章主要让大家知道一下大致的原理,心里面由个概念就成。