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
输出结果为什么是这样?原因是啥?大家自行思考,这里就不做介绍了^_^



发布了46 篇原创文章 · 获赞 25 · 访问量 16万+

猜你喜欢

转载自blog.csdn.net/zhejiang9/article/details/78804712