09 (H5*) JS第7天 原型

目录

1：创建对象的3中方式

2：工厂模式创建实例对象

3:  实例对象和构造函数的关系

4：构造函数创建对象带来的问题--原型

5：原型中创建方法

6：构造函数、原型对象、实例对象的关系

7：原型对象的简单写法--必须手动添加构造器

8：实例对象访问属性和方法

1：创建对象的3中方式

 <script>
    //对象:特指的某个事物,具有属性和方法(一组无序的属性的集合)
    //特征---->属性
    //行为---->方法
    //小苏:------>姓名,性别,年龄,吃,睡觉,玩

    //创建对象三种方式:

    //1  字面量的方式
    //2  调用系统的构造函数
    //3  自定义构造函数方式

    // 1:  实例对象
   var per1={
     name:"卡卡西",
     age:20,
     sex:"男",
     eat:function () {
       console.log("吃臭豆腐");
     },
     readBook:function () {
       console.log("亲热天堂");
     }
   };

    // 2:  调用系统的构造函数
    var per2=new Object();
    per2.name="大蛇丸";
    per2.age=30;
    per2.sex="男";
    per2.eat=function () {
      console.log("吃榴莲");
    };
    per2.play=function () {
      console.log("这个小蛇真好玩");
    };

    console.log(per2 instanceof Object);

    // 3:  自定义构造函数
    function Person(name,age,sex) {
      this.name=name;
      this.age=age;
      this.sex=sex;
      this.play=function () {
        console.log("天天打游戏");
      };
    }
    var per=new Person("雏田",18,"女");
    console.log(per instanceof Person);
  </script>

2：工厂模式创建对象

<script>

    function createObject(name,age) {
      var obj=new Object();
      obj.name=name;
      obj.age=age;
      obj.sayHi=function () {
        console.log("您好");
      };
      return obj;
    }
    function Person(name,age) {
      this.name=name;
      this.age=age;
      this.sayHi=function () {
        console.log("您好");
      };
    }
    //创建对象---->实例化一个对象,的同时对属性进行初始化

    /*
    * 共同点:都是函数,都可以创建对象,都可以传入参数
    *
    * 工厂模式:
    * 函数名是小写
    * 有new,
    * 有返回值
    * new之后的对象是当前的对象
    * 直接调用函数就可以创建对象
    *
    * 自定义构造函数:
    * 函数名是大写(首字母)
    * 没有new
    * 没有返回值
    * this是当前的对象
    * 通过new的方式来创建对象
    *
    *
    * */

    var per1=new Person("小红",20);

    var per2=createObject("小明",20);
  </script>

3：实例对象和构造函数的关系

实例对象是通过构造函数创建的

 <script>
    //面向对象的思想是----抽象的过程---->实例化的过程

    //小苏这个人,姓名,年龄,性别, 吃饭,打招呼,睡觉

    //自定义构造函数----->实例化对象
    function Person(name,age,sex) {
      this.name=name;
      this.age=age;
      this.sex=sex;
      this.eat=function () {
        console.log("吃大蒜拌臭豆腐加榴莲酱");
      };
    }
    //构造函数---->创建对象
    var per=new Person("小苏",38,"女");
    per.eat();//吃

    //实例对象是通过构造函数来创建
    //实例对象会指向自己的构造函数(暂时理解,是错误的)
    //把这个对象的结构显示出来
    console.dir(per);
    console.dir(Person);

    //实例对象的构造器(构造函数)
    //实例对象的构造器是指向Person的,结果是true,所以,这个实例对象per就是通过Person来创建的
    console.log(per.constructor==Person);//

    console.log(per.__proto__.constructor==Person);
    console.log(per.__proto__.constructor==Person.prototype.constructor);

    //构造函数
    function Animal(name) {
      this.name=name;
    }
    //实例对象
    var dog=new Animal("大黄");
    console.dir(dog);//实例对象
    console.dir(Animal);//构造函数的名字

    console.log(dog.__proto__.constructor==Person);
    console.log(dog.__proto__.constructor==Animal);

    //判断这个对象是不是这种数据类型
    console.log(dog.constructor==Animal);

    console.log(dog instanceof Person);

    //总结:
    /*
    * 实例对象和构造函数之间的关系:
    * 1. 实例对象是通过构造函数来创建的---创建的过程叫实例化
    * 2.如何判断对象是不是这个数据类型?
    *  1) 通过构造器的方式 实例对象.构造器==构造函数名字
    *  2) 对象 instanceof 构造函数名字
    *  尽可能的使用第二种方式来识别,为什么?原型讲完再说
    *
    *
    *
    * */

  </script>

4：构造函数创建对象的问题

<script>
   function Person(name,age) {
     this.name=name;
     this.age=age;
     this.eat=function () {
       console.log("今天吃红烧土豆");
     }
   }
   var per1=new Person("小白",20);
   var per2=new Person("小黑",30);

   console.dir(per1);
   console.dir(per2);

   per1.eat();
   per2.eat();
   //不是同一个方法
   console.log(per1.eat==per2.eat);

    function myEat() {
    console.log("吃大榴莲");
    }
    var myEat=10;
    function Person(name,age) {
        this.name=name;
        this.age=age;
        this.eat=myEat;
    }
    var per1=new Person("小白",20);
    var per2=new Person("小黑",30);

    console.dir(per1);
    console.dir(per2);
    console.log(per1.eat==per2.eat);
    //通过原型来解决---------数据共享,节省内存空间,作用之一

  </script>

5：原型中创建方法

<script>
    function Person(name,age) {
      this.name=name;
      this.age=age;
    }
    //通过原型来添加方法,解决数据共享,节省内存空间
    Person.prototype.eat=function () {
      console.log("吃凉菜");
    };

    var p1=new Person("小明",20);
    var p2=new Person("小红",30);
    console.log(p1.eat==p2.eat);//true

    console.dir(p1);
    console.dir(p2);

    //实例对象中根本没有eat方法,但是能够使用,这是为什么?
  </script>

6：构造函数、原型对象、实例对象之间的关系

   * 构造函数可以实例化对象

   * 构造函数中有一个属性叫prototype,是构造函数的原型对象

   * 构造函数的原型对象(prototype)中有一个constructor构造器,这个构造器指向的就是自己所在的原型对象所在的构造函数

   * 实例对象的原型对象(__proto__)指向的是该构造函数的原型对象

   * 构造函数的原型对象(prototype)中的方法是可以被实例对象直接访问的

7：原型对象的简单写法--必须手动添加构造器

  <script>
    function Student(name, age, sex) {
      this.name = name;
      this.age = age;
      this.sex = sex;
    }
    //简单的原型写法
    Student.prototype = {
      //手动修改构造器的指向
      constructor:Student,
      height: "188",
      weight: "55kg",
      study: function () {
        console.log("学习好开心啊");
      },
      eat: function () {
        console.log("我要吃好吃的");
      }
    };

    var stu=new Student("段飞",20,"男");
    stu.eat();
    stu.study();
    console.dir(Student);
    console.dir(stu);

  </script>

8：实例对象访问属性和方法

  <script>
    function Person(age,sex) {
      this.age=age;//年龄
      this.sex=sex;
      this.eat=function () {
        console.log("构造函数中的吃");
      };
    }
    Person.prototype.sex="女";
    Person.prototype.eat=function () {
      console.log("原型对象中的吃");
    };

    var per=new Person(20,"男");
    console.log(per.sex);//男
    per.eat();

    // console.log(per.height);//男
    // per.play();

    console.dir(per);

    /*
    * 实例对象使用的属性或者方法,先在实例中查找,找到了则直接使用,找不到则,去实例对象的__proto__指向的原型对象prototype中找,找到了则使用
    *  找不到属性：undefined
    *  找不到方法: 报错 Uncaught TypeError: per.play is not a function
    * */

  </script>