JavaScript原型

创建对象的三种方式

• 字面量的方式
• 调用系统的构造函数
• 自定义构造函数方式

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

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

//自定义构造函数
        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);

自定义构造函数创建对象做的事情

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

      /*
      * 1.开辟空间存储对象
      * 2.把this设置为当前的对象
      * 3.设置属性和方法的值
      * 4.把this对象返回
      * */

使用工厂模式创建对象

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

构造函数和实例对象之间的关系

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

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

        //自定义构造函数----->实例化对象
        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 构造函数名字
        *  尽可能的使用第二种方式来识别,为什么?原型讲完再说
        *
        *
        *
        * */

构造函数创建对象带来的问题

        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);
        //通过原型来解决---------数据共享,节省内存空间,作用之一
        //
        //    per1.eat();
        //    per2.eat();
        //    //不是同一个方法
        //    console.log(per1.eat==per2.eat);
        //
        //    for(var i=0;i<100;i++){
        //      var per=new Person("嘎嘎",20);
        //      per.eat();
        //    }

原型添加方法解决数据共享问题

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

原型

    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.dir(p1);
    console.dir(p2);
    console.dir(Person);
    p1.__proto__.eat();

    console.log(p1.__proto__==Person.prototype);

原型对象中有proto这个属性，叫原型，也是一个对象，这个属性是给浏览器使用的，不是标准的属性
构造函数中的prototype这个属性，叫原型，也是一个对象，这个对象是给开发者使用，是标准属性
实例对象的proto和构造函数中的prototype相等 -->true
实例对象是通过构造函数来创建的，构造函数中有原型对象prototype

总结

    //构造函数

    function Person(sex,age) {
      this.sex=sex;
      this.age=age;
    }
    //通过原型添加方法
    Person.prototype.sayHi=function () {
      console.log("打招呼,您好");
    };
    var per=new Person("男",20);
    console.log(per.__proto__.constructor==Person.prototype.constructor);//实例对象
    console.dir(Person);//构造函数的名字

    var per2=new Person("女",30);
    console.log(per.sayHi==per2.sayHi);

实例对象中有两个属性（这两个属性是通过构造函数来获取的）

实例对象中有proto属性，叫原型，也是对象，不是标准属性，浏览器使用
构造函数中有prototype属性，也叫原型，也是对象吗，是标准属性，开发者使用

* 原型---->__proto__或者是prototype,都是原型对象,
* 原型的作用:共享数据,节省内存空间

相关附加
JavaScript原型
JavaScript中原型的简单语法
JavaScript原型链
JavaScript中的继承