JavaScript自定义对象和原型

JavaScript自定义对象和原型

原型+构造方法 — >代码重构

原型方式通过prototype属性为对象添加新的属性或方法

object.prototype.name = value;

object表示被扩张对象,包括系统内置对象(如Date等)和自定义对象。

prototype表示对象的原型。

name表示所添加的属性或方法。当添加属性时,value为属性值;当添加方式时,value为函数的引用。

function Person(name, age, sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
        this.study = function () {
        	 console.log("我是自身的一个属性!");
          };
        Person.prototype.dd = "000"
      }
       //给Person的原型对象 添加属性
       // 特征: 相当于一个公共的区域 ,所有的同一个构造函数的实例都可以访问到它的原型对象
    //    在实际开发中,把共有的内容写到原型对象里面
           Person.prototype.study = function () {
             console.log(this.name + "说:我会学习!代码写得很66!");
           };
           Person.prototype.eat = function () {
             console.log(this.name + "说:我能吃东西!");
           };

            var carol = new Person("kd", "18", "女");
             carol.study();
             console.log(carol.dd);
             var cam = new Person("zs", "18", "女");
             cam.study();
// 原型的作用 ?--> 解决重复开辟内存的问题,节省内存空间 优化程序性能
      //原型是什么 ?
      //在js里面,每定义一个函数数据类型,都会天生自带一个原型属性 ,然后指向原型对象
      //
 Object.prototype.carol1 = "新家的属性!";
        var cam = new Person("aa", "18", "女");
      //   cam.study(); //自身属性 1  原型 2
      //   cam.aa = "ww";
      //   console.log(cam.carol);
      // 为什么是自身属性
      // 原型链
      // 在js里面什么都是对象  对象与对象之间是有联系
      // 在js里面继承是通过原型来进行继承
      // cam --> Person  -- > Person的原型对象 --- >Object -->undefined /null

         console.log(Person.prototype);

          function Man(muscle) {
                this.muscle = muscle;
            }
            Man.prototype = new Person("小", "18", "女");
            Man.prototype = Person.prototype;
           var xiaoou = new Man("30斤")
            console.log(xiaoou.name);// 不能 
            xiaoou.study();//能
            console.log(Man.prototype);

           function Person(){}
          var person = new Person();
          console.log(person.__proto__ === Person.prototype);
          console.log(Person.prototype.constructor === Person);

图解:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2EmBZZml-1595062116144)(C:\Users\dell\Desktop\我的前端博客\images2\1.jpg)]

原型链
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hwmYPldw-1595062116151)(C:\Users\dell\Desktop\我的前端博客\images2\2.jpg)]

[外链图片转存中...(img-hwmYPldw-1595062116151)]

猜你喜欢

转载自blog.csdn.net/weixin_44691513/article/details/107431477