对js构造函数,原型对象和原型的理解(3)

朱雀 2023-07-11 15:26 127阅读 0赞

## 探究constructor ##

不知道大家发现了没有啊  
**在我们的对象原型\_\_proto\_\_和构造函数的原型对象prototype身上都有一个constructor属性**  
**这个constructor它指回的是我们构造函数的本身**

不知道大家有没有想过啊,如果我只有一个方法,那我就直接放到构造函数的原型对象身上了是吧,那我这样写,当然我zs的这个实例可以访问到sing方法了.

function Star(name, age) { 
                this.name = name;
                this.age = age;
            }
           Star.prototype.sing = function(){ 
            	 console.log('我会唱歌');
            }
            var zs = new Star('张山', 10);

那如果我有多个需要共享的方法,我那是不是得这样写了

输出结果,可以看到,**constructor这个属性指回了我们构造函数的本身**

![在这里插入图片描述][20200306161215590.png]  
这里只是几个方法而已喔,那有时候方法特别多了,那代码就特别多了  
那我的代码特别多,所以我们就可以这样写,以对象的形式来存  
就像这样

那么问题来了.我这样写我再输出一下

console.log(Star.prototype.constructor); 
       console.log(zs.__proto__.constructor);

![在这里插入图片描述][20200306161536993.png]  
Oh NO!!--------------------------  
**我把原型对象给了一个赋值操作之后,constructor不再指回自己本身了**  
为什么呢?  
这里啊从字面意思就可以发现啦,**当我用点的形式,也就相当于我往原型对象prototype上添加一个属性,而这个属性就是一个方法,那我原有的在原型对象身上的一些属性和方法都还在啊.**

但是呢 **赋值操作就不一样了,也就是说我把原型对象prototype赋值了,那我本来在原型对象prototype身上的那些属性和方法就被覆盖掉了,那我再打印constructor这个属性,肯定是不见了的,那没有了constructor,就指回不了我的构造函数了啊,那我就不知道这些对象实例是通过哪个构造函数创建出来的了**

所以我们就需要手动的利用constructor这个属性指回原来的构造函数  
那该怎么做呢  
**就是在原型对象prototype上手动添加一个constructor属性  
并且指向我们的构造函数Star.**

我再打印一下来验证

console.log(Star.prototype.constructor); 
       console.log(zs.__proto__.constructor);

![在这里插入图片描述][20200306164014228.png]  
可以看到他们又指回了我的构造函数Star.

# 总结: #

### 如果我们修改了原来的原型对象prototype,给原型对象赋值的是一个对象,那么我们就必须手动利用constructor指回原来的构造函数,这样我们就知道这些对象实例是哪个构造函数创建出来的了 ###

说了这么多大家都明白的差不多了吧  
后面我会继续写构造函数,实例,原型对象三者之间的关系  
还有原型链.  
敬请期待吧

[20200306161215590.png]: https://img-blog.csdnimg.cn/20200306161215590.png
[20200306161536993.png]: https://img-blog.csdnimg.cn/20200306161536993.png
[20200306164014228.png]: https://img-blog.csdnimg.cn/20200306164014228.png