构造函数里的原型对象prototype和对象原型 __proto__ 的简单理解,constructor构造函数的理解。

        上次我们简单的了解关于对象的相关知识,了解到了用构造函数来创建对象,虽然构造函数十分的好用,但是会存在内存浪费的情况让我们来简单的学习一下。

        在创建实例对象后,调用属性,会在内存开辟空间,属性,是简单数据类型,可以直接调用。但是方法是复杂数据类型不一样,在不同的实例对象,调用同一种方法时,内存里其实开辟了两个空间来存放相同的方法。我们看看下面的代码。

      function Xiyouji(name, age, sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
        this.major = function () {
          console.log("打妖怪");
        };
      }
      const swk = new Xiyouji("孙悟空", "男", 19);
      const zbj = new Xiyouji("猪八戒", "男", 18);
      console.log(zbj.major === swk.major); //显示false

        那我们该如何解决这样的问题呢,其实在js中我们每个构造函数里都有prototype属性,指向另一个对象,这个prototype就是一个对象,这个对象的所有属性和方法,都会被构造函数所拥有。

     function Xiyouji(name, age, sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
        this.major = function () {
          console.log("打妖怪");
        };
      }     
     console.dir(Xiyouji);

实现效果

 这样我们就可以把不需要改变的方法来写到prototype属性里,来看代码

      function Xiyouji(name, age, sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
      }
      Xiyouji.prototype.major = function (value) {
        console.log(value);
      };
      const swk = new Xiyouji("孙悟空", "男", 19);
      const zbj = new Xiyouji("猪八戒", "男", 18);
      console.log(zbj.major === swk.major);
        //结果显示为 true

这里又出现了一个问题? 我将major 这个方法定义在构造函数Xiyouji中的prototype里,为什么swk这个实例对象可以接收到呢?

这是因为实例对象中有对象原型__proto__他指向我们构造函数Xiyouji的prototype,他们是相等的。来看代码

      function Xiyouji(name, age, sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
      }
      Xiyouji.prototype.major = function (value) {
        console.log(value);
      };
      const swk = new Xiyouji("孙悟空", "男", 19);
      console.log(swk.__proto__ === Xiyouji.prototype);
        //结果显示true

        在我们的对象原型__proto__和构造函数prototype中都有构造函数constructor 他用来指向构造函数本身。

      function Xiyouji(name, age, sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
      }
      Xiyouji.prototype = {
        constructor: Xiyouji,
        major(value) {
          console.log(value);
        },
        show() {
          console.log("我们来showshowway");
        },
      };
      const swk = new Xiyouji("孙悟空", "男", 19);
      console.log(Xiyouji.prototype);
      console.log(swk.__proto__);

        如果我们修改了原来的对象原型,给原型对象赋值的是一个对象,则需要手动指向constructor构造函数

 感谢看完的小伙伴,努力学习定会学有所成,相信自己最难不过坚持加油持续下去,明天的你会更好。你只管努力,剩下的交给时间。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值