js中的对象原型__proto__和constructor 属性

什么是实例对象原型?

实例对象原型:实例对象有一个属性 __ proto__ 指向构造函数的 prototype 原型对象。

  • 实例对象原型__proto__和构造函数的prototype是等价的。
  • 方法的查找规则:首先先看对象身上是否有方法,如果有就执行这个对象上的方法,如果么没有这个方法,因为有__proto__ 的存在,就去构造函数原型对象prototype身上去查找方法。
         function Star(name,sex){
    
    
            this.name=name;
            this.sex=sex;
            // this.sing=function(){
    
    
            //     console.log("我在唱歌");
            // }
        }
        Star.prototype.sing=function(){
    
    
            console.log("我在唱歌");
        }
        var ldh=new Star("小熊","男");
        var z=new Star("小明","男");
        console.log(ldh);
       console.log(ldh.__proto__===  Star.prototype);

在这里插入图片描述
你可以发现实例对象里面的原型里面也有对象原型__proto__

对象原型和原型对象的比较也是true
在这里插入图片描述
constructor 属性

  • 对象原型(_proto)和构造函数(prototype)原型对象里面都有一个属性constructor属性,constructor我们称为构造函数,因为它指回构造函数本身。
  • constructor主要用于记录该对象引用于哪个构造函数,它可以让原型对象重新指向原来的构造函数。
   function Star(name,sex){
    
    
            this.name=name;
            this.sex=sex;
            // this.sing=function(){
    
    
            //     console.log("我在唱歌");
            // }
        }
        Star.prototype.sing=function(){
    
    
            console.log("我在唱歌");
        }
        var ldh=new Star("小熊","男");
        var z=new Star("小明","男");
        console.log(ldh.__proto__.constructor);
        console.log(Star.prototype.constructor);

       console.log(ldh.__proto__.constructor ===  Star.prototype.constructor);

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210304155106334.png

你可以看到返回的还是那指定的构造函数

那如果有多个原型对象方法呢?我们可以这样写

   function Star(name,sex){
    
    
            this.name=name;
            this.sex=sex;
            // this.sing=function(){
    
    
            //     console.log("我在唱歌");
            // }
        }
        Star.prototype={
    
    
            sing:function(){
    
    
             console.log("我在唱歌");
            },
            study:function(){
    
    
                console.log("我在学习");
            }
        }
        var ldh=new Star("小熊","男");
        var z=new Star("小明","男");
        console.log(ldh.__proto__);
        console.log(Star.prototype);

在这里插入图片描述
但这有一个问题constructor 属性去哪里呢?
constructor 属性被覆盖掉了Star.prototype={}等于一个对象的话把它覆盖掉了

那如何解决呢?
我们需要手动的利用constructor这个属性指回原来的构造函数

   Star.prototype={
    
    
            constructor:Star,//指向原来的构造函数
            sing:function(){
    
    
             console.log("我在唱歌");
            },
            study:function(){
    
    
                console.log("我在学习");
            }
        }

在这里插入图片描述
constructor属性就出来了

最后来总结一下:

  • 实例对象原型( proto)和构造函数原型对象(prototype)里面都有一个属性 constructor 属性 ,constructor 我们称为构造函数,因为它指回构造函数本身。
  • 一般情况下,对象的方法都在构造函数的原型对象中设置。如果有多个对象的方法,我们可以给原型对象采取对象形式赋值,但是这样就会覆盖构造函数原型对象原来的内容,这样修改后的原型对象 constructor 就不再指向当前构造函数了。此时,我们可以在修改后的原型对象中,添加一个 constructor 指向原来的构造函数。

猜你喜欢

转载自blog.csdn.net/qq_41309350/article/details/114369253