【JavaScript】浅谈JavaScript prototype和__proto__属性

前端入门水平,根据个人体会总结下JavaScript中的prototype和__proto__属性,高手就略过吧。

本文根据一个实际例子来说明这两个属性的区别,先看一张图吧:

1. 先对上图进行描述下:

图中主要包括:原生Object类对象、Function类对象、以及我自定义的一个娄:Man( function Man(){ this.name="tuanfe"; this.age =25;})、

以及man对象(var man = new Man())、带有虚线的框是中间对象,为了好说明我就这样画出来了。

图上注明的什么类型,如function类型、object类型,这个我是通过typeof函数方法得到的。

如果大家也想跟着实践下,在chrome的控制台上,通过使用console.log()和console.dir()方法进行实践,console.dir()方法是表示输出对象的所有属性。

2. 总结这两个属性

上面的草图表述得非常明显:

(1)通过new出来的对象只有__proto__属性,而定义的function Man(){},Object,Function都具有prototype和__proto__属性;

(2)man.__proto__和Man.prototype都指向同一个对象,用console.log(typeof man.__proto__)的结果是object,因此指向的对象是object类型;

(3)Function的prototype和__proto__指向同一个function对象:function Empty(){},且它里面的__proto__是指向Object;

(4)Object的prototype指向的是一个object类型的Object对象,与Man中的prototype的类型是一样的;

(5)__proto__属性其实在原型链中起着非常重要的作用。如果我调用man.getName()方法,首先会在man这个对象的自身属性去查找这个方法,如果没有,根据__proto__所指向的对象去它里面查找是否有这个方法,如果没有根据Man这个中间对象的__proto__属性指针到Object对象中去查找,直接找到该定义的方法,如果没有就报错;这也体现出我们原型继承的思想。

(6)通过Man的prototype增加其他属性或方法,这相当于C++中的静态成员和静态方法,让实例化的对象能通过原型继承机制共享静态成员或静态方法。当我直接调用Man.test()方法时,如果在当前Man中没有找到,就通过__proto__属性到function Empty(){}中去寻找,如果没有找到,通过function Empty(){}中中的__proto__到Object里去找,也就是说原型链的继承机制最后到顶层就是到Object对象中进行查找,如果在这里还没有找到就要报错了。

(7)其实在上图中也还能发现其他很多规律,读者可以自行总结。






评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值