如何理解函数对象中的prototype

163 阅读2分钟

在js中,函数function也是一种对象,在这个对象中有个属性prototype,这个属性的类型也是一个对象,打开控制台,我们验证一下

image.png

书上说函数的prototype是“空”的(指的是《JavaScript面向对象编程指南(第2版)》),

image.png

我不知道是作者就这么理解的还是翻译错了,很明显MyObj函数的prototype是个对象,点开这个对象

image.png

prototype中默认包含一个初始的属性constructor,下面[[Prototype]]先不用管,以后再说,constructor 就是构造函数MyObj,注意,又回到前面开篇的说明,constructor仍然是一个对象,这个对象包含4个属性和一个指向上一层Object()prototype,接下来往MyObjprototype中加一些东西

image.png

此时来new一个对象出来,这个对象就可以访问ageshowMsgshowAge属性方法,

image.png

但如果直接这样改变prototype是有副作用的MyObj.prototype = { somecode },这样就把整个prototype对象给替换掉了,也就是说原本默认就有的constructor也被覆盖了,那么猜一下,此时再new出来的对象的constructor会是谁,答案是Object()

image.png

other对象的构造函数constructor原本应该是指向MyObjconstructor,但MyObj函数的constructor被清空了,那么根据原型链继续向上追溯到Object(),那么我们在Object()MyObj中再加一层会怎么样呢,看代码

image.png

aObj对象是通过MyObj构造出来的,但aObjconstructor却是OtherObj(),因为MyObjconstructor是“空的”,通过原型链向上找到OtherObj(),如果OherObj也没有的话,就又会找到Object,因为这是所有对象的“根”,下面我们尝试另一种写法,结果是一样的

image.png

js的继承就是在这样的基础上设计出来的