美文网首页
Js原型(prototype)01

Js原型(prototype)01

作者: 63537b720fdb | 来源:发表于2020-06-29 16:23 被阅读0次

    1.原型是 function对象的一个属性,是构造函数构造出对象的公有祖先,而原型本身也是一个对象。
    2.从原型的概念出发,我们可以用构造函数构造出的对象提取原型上的属性。
    3.因为原型也是一个对象,所以原型本身对自己的属性有增删改查的权利。
    4.对象如何知道自己的原型是谁,可以通过对象中的_proto_属性查看,_proto_属性存的就是对象的原型,他是作为对象与原型之间的连接。
    5.构造函数构造的对象如何查看是谁构造出自己的,可以通过constructor属性

    首先从原型的定义开始解释:
    原型是function对象的一个属性,这句话如何理解?
    1.function函数其实就是一个对象,当你构造出一个函数时,这个函数对象就有了自己隐式的属性,prototype就是其中的一个属性。
    那么先构造出一个函数,在控制台查看,函数对象是否有prototype,并且prototype是否也是一个对象。

    image.png
    在控制台中可以看到father的prototype属性,并且prototype也是一个对象,在我们还没有对prototype操作时,他就自带了constructor和_proto_两个属性,这两个属性在下面会有很大的用处。
    image.png
    那么当证实prototype是一个对象,而对象可以有自己的属性和方法,我们是否可以往prototype里添加属性和方法。

    我们在控制台中给father的prototype属性添加name属性并赋值,看看是否有效?


    image.png

    给prototype添加属性后,并可以输出name的值。那么也是可以给prototype添加方法的。
    给prototype添加say方法实现输出自己的name,执行say(),的确输出了'haha'


    image.png
    我们再次查看father.prototype,里面已经存有name属性和say方法。
    image.png

    2.我们如何理解,prototype是构造函数构造出对象的公有祖先?
    首先当构造出函数时prototype就成为了这个函数的属性,并且prototype也可以添加属性和方法,而构造函数构造出的对象能继承构造函数中的方法,且这个对象自身也能添加属性和方法?
    那么问题来了?
    当我查看对象的name属性时,对象并没有这个属性,那他就会自动去构造出自己的函数中去找是否有这个属性,那当构造函数也没这个属性时,他就会去自己的原型上查找是否有这个属性,如果原型上存在name属性,对象就会获取到这个属性并输出。
    而这个获取到原型属性的过程,其实就是一种继承的方式。
    举例:


    image.png
    我们并没有给son对象和Mom函数中添加name属性,这时在控制台查看son对象的name属性时,如果输出'jicheng',说明son继承了prototype的属性,prototype是son对象的祖先。
    image.png
    证实,prototype是son的祖先,而公有祖先的意思是,只要是Mom构造函数构造出的对象,这些对象都能继承prototype的属性和方法。
    构造出了son1和son2两个对象
    image.png
    两个对象都能访问prototype的name属性,所以prototype是构造函数构造出的对象的公有祖先。
    image.png
    总结定义:

    1.prototype是function对象的一个属性;
    2.prototype是构造函数构造出对象的公有祖先;
    3.prototype也是一个对象。

    从总结的第三点可以知道,prototype可以拥有自己的属性和方法,并有权进行增删改查,那么接下来展示prototype如何进行增删改查。
    对Mom的prototype属性进行操作。


    image.png

    增:
    给出你想要添加的属性,并赋值。


    image.png

    删:
    delete


    image.png
    改:
    image.png
    查:
    image.png

    所以prototype对象的增删改查和普通对象的用法相同。
    这里还需注意,prototype上的属性只能由自身操作,对象从prototype上获取到的属性进行操作后,并不会影响到prototype。

    接下来解释对象的_proto_属性(前后分别是两个_)
    _proto_属性里存的是对象的prototype
    举例:

    image.png
    如果son1.name输出的是obj中的sunny的话,就证明_proto_中存的是prototype,他是作为对象与prototype之间的连接。
    image.png

    接下来解释constructor属性:
    对象可以通过该属性查看构造出自己的函数


    image.png

    总结:
    prototype是function对象的一个属性,是构造函数构造出的对象的公有祖先,他本身也是一个对象,所以他可以有自己的属性和方法,并对其进行增删改查的操作,对象没有权利修改prototype上的属性和方法。对象可以通过自己的_proto_查看他的prototype,通过constructor查看构造出自己的函数。

    相关文章

      网友评论

          本文标题:Js原型(prototype)01

          本文链接:https://www.haomeiwen.com/subject/zcnufktx.html