JavaScript原型和原型链新解

为什么说是新解呢?

看了网上很多描述JS原型的文章,大部分都是这样描述的,JS对象分为两种,一个是普通对象,另外一个则是原型对象,其中原型对象包含prototype属性,普通对象则没有,还有就是,二者都包含__proto__来实现原型链等等


我相信很多人看完后,都是死记硬背的记住了上面的内容,至于为什么JS要分两种对象,原因是什么?估计都不是很清楚,因为大家都是基于结果来分析的


这里我尝试换一种角度去分析并理解这块内容,希望对大家能有所帮助


通常我们在JS中创建对象有两种方法:

1:function - 创建对应上面说的原型对象

2:new - 创建上面所说的普通对象


我们这里先想下,这两种被创建的对象最本质的区别是什么?我们创建对象的目的是什么?当然是保存数据了,

所以,它们最大的不同,是保存的数据类型不同

1:function创建的对象,是用于保存程序运行的代码描述的

2:new创建的对象,是基于function描述的代码来创建的实例

第二点很重要,我再重复一遍,要通过new创建对象,它的前提肯定是类代码,那function就是那个保存了类代码描述的对象!!


看代码:

function test(){
  let var1 = 'harish';
}

var obj1 = new test();

这段代码的执行步骤:

1:   检测到function关键字,创建一个叫test对象,然后将function内部运行的代码和属性数据保存到其中

2:检测到new关键字,从而创建一个新对象保存到obj1中, 并将obj1的constructor属性设置为test

3:接着执行obj1.constructor,并将函数执行上下文中的this属性设置为obj1,从而完成obj1数据的初始化


对象obj1创建完后,大家会发现有点不对劲,这个function描述的类好像只有构造函数,没有成员变量和成员函数的定义,没地方定义,那继承什么的就是无从谈起了,

所以强大的JS就约定,只要是function类对象,就可以通过prototype属性来描述这个类的成员变量和成员函数。

把代码改下:

function test(){
  let var1 = 'harish';
}

test.prototype.harish = 'dog';
test.prototype.testfunc = function(){
  alert('test1 = ' + this.harish);
}

var obj1 = new test();
obj1.testfunc();

然后上面的代码执行步骤改为:

1:   检测到function关键字,创建一个叫test对象,然后将function内部运行的代码和属性数据保存到其中

2:检测到new关键字,从而创建一个新对象保存到obj1中, 并将obj1的constructor属性设置为test

3:将test类的成员变量和成员函数描述对象prototype索引保存到obj1的__proto__属性中

4:接着执行obj1.constructor,并将函数执行上下文中的this属性设置为obj1,从而完成obj1数据的初始化

5:调用obj1.testfunc(), JS先看obj1对象的属性列表中是否存在testfunc的定义,这里显然没有

6:接着从obj1.__proto__中查找,找到testfunc并执行


接着总结下:

1:原型,即prototype,是function类描述其成员变量和成员函数的,而function函数自身,则在类创建的过程中会被当做构造函数执行

2:__proto__是原型链的基础,在JS中,所有的对象查找属性变量,规则总是这样的,先看对象自身是否存在该属性,如果不存在,则看__proto__属性是否为null,如果不是,则查找__proto__对应对象是否存在该属性,如此反复,直到找到或者__proto__为null为止


原型和原型链是JS实现继承的基础


下面说下JS是如何基于二者实现继承的:

     function A       function B         function C

     prototype        prototype          prototype 


我们先定义三个类,在JS中,即三个function类型的对象A,B,C,然后还为每个类分别定义了成员变量和函数保存到prototype

类有了,接着我们希望 A继承自B,B继承自C


上面说过了JS对象对属性的查找规则,基于该规则,就可以很容易的实现继承

new A()                 function A                       function B                        function C

__proto__   -> prototype.__proto__ ->  prototype.__proto__  ->   prototype.__proto__(null)


上面箭头指向的是prototype对象


现在回过头来,你们应该明白,为什么new A()创建是普通对象没有prototype属性了吧,因为prototype对象描述的是类的成员函数和变量的定义,而这个数据是用来创建普通逻辑对象的,普通逻辑对象不需要也不应该包含prototype变量


最后,拿网上朋友的一个例子作为收尾:

var animal = function(){};
var dog = function(){};
animal.price = 2000;//
dog.prototype = animal;
var tidy = new dog();
console.log(dog. price) //undefined
console.log(tidy.price) // 2000
输出结果为什么是这样?原因是啥?大家自行思考,这里就不做介绍了^_^



1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值