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

探究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);

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

	function Star(name, age) {
            this.name = name;
            this.age = age;
        }
       Star.prototype.sing = function(){
        	 console.log('我会唱歌');
        }
        Star.prototype.jump = function(){
        	 console.log('我会跳');
        }
        Star.prototype.dance = function(){
        	 console.log('我会跳舞');
        }
        
        var zs = new Star('张山', 10);
         //打印一下
        console.log(Star.prototype.constructor);
        console.log(zs.__proto__.constructor);

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

这里只是几个方法而已喔,那有时候方法特别多了,那代码就特别多了
那我的代码特别多,所以我们就可以这样写,以对象的形式来存
就像这样

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

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

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

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

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

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

function Star(name, age) {
            this.name = name;
            this.age = age;
        }
      Star.prototype = {
      在这里手动添加一个constructor属性
      并且指向我们的构造函数Star.
      		constructor: Star,
            dance: function() {
                console.log('我会跳舞');
            },
            jump: function() {
                console.log('我会跳');
            },
            sing: function(){
        	 console.log('我会唱歌');
        	}
        }
        var zs = new Star('张山', 10); 

我再打印一下来验证

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

可以看到他们又指回了我的构造函数Star.

总结:

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

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

来源：CSDN

作者：呆呆爱代码

链接：https://blog.csdn.net/weixin_45658984/article/details/104697595