最易懂的js原型之解析

一 .什么叫原型

javaScript所有的函数都有一个prototype属性，这个属性引用了一个对象，即原型对象，也简称原型

二 .为什么要引入原型

首先回顾一下创建对象的几种方法
（1） 字面量的创建法

       var box=new  Object();
           box.name="张三";
           box.sex="女";
           box.say=function(){
              console.log("你是"+this.name+"性别"+this.sex)
           }
           box.say();

   上边方法创建了一个字面量的对象，但如果要创建多个类似的对象就会产生大量冗余重复的代码


           比如

var box2=new  Object();
           box2.name="张三";
           box2.sex="女";
           box2.say=function(){
              console.log("你是"+this.name+"性别"+this.sex)
           }
           box2.say();
................................................................................无数个box被创建.........................

（2）工厂模式创建对象

    function creatElement(name,sex){
               var  obj=new Object();

                   obj.name=name;
                   obj.sex=sex;
                   obj.say=function(){
                     console.log("你是"+this.name+"性别"+this.sex)

                   }

                return obj;//不要忘记返回值
          }         
      var box1= creatElement("张***","男");
       var box2= creatElement("单***","女");
       看吧上边的方法是不是解决了重复实例化的问题，但是有一点他们从属关系不明确，即无法确定他们是哪个对象的实例
       console.log(typeof box1)//Object 


好吧为了解决上述问题 我们又引入了构造函数创建对象的方法

(3)构造函数的方法

     // 先说说构造函数和工厂方法的不一样的地方吧
     //(1)构造函数没有显示的创建对象(new Object())
     //(2)直接将属性和方法赋值给this对象
     //(3)没有返回值
     //再说说构造函数的一些规范
     //(4)函数名和实例化的构造函数名要大写
     //(5)通过构造函数创建对象必须加new()；
     //(6)代表当前作用域的对像的引用
     //构造函数和普通函数的调用方式不同
     //最后一起见证构造函数的 function CreatObject(name,sex){
     this.name=name;
     this.sex=sex;
     var  money;
     this.say=function(){
     console.log("你是"+this.name+"性别"+this.sex)       
     }
     this.setMOney=function(Money){
           money=Money;

     }
     this.getMOney=function(Money){
           return money;

     }   
   }``

好啦，构造函数很好的解决了上面的问题那么接下来的问题是为什么引入原型了（是不是绕的有点远啦····~~~~~~~~~)

 原型对象最大的优点就是能够实现------共享

   对于一个Person类而言 我们都会吃饭 睡觉  放屁 ...
     然而 在我们创建人的时候我们还要重复的给他们添加这些大家都默认的属性（这样是不是感觉多此一举啦。。。。。。。。)
     于是我们把这些大家都共有的属性放在一个 Person的原型对象里面
   这样我们再创建人的时候就可以不用管这些共有的属性，再给他们添加他们独特的属性 比如 会唱歌，会跆拳道，会那个打篮球，会谈恋爱等等。。。。。。。。。。。当我们发现随着人类的发展一些属性又都被人类学会啦，就形成了一种先天的基因那么我们就可以再把这些属性添加到原型里啦。。。。。。。

三 创建构造函数 原型

    //构造函数
    function Person(name,age){
        this.name = name;
        this.age = age;
        this.showAge = function(){
            console.log(this.name+"的年龄是:"+this.age);
        }
    }


    //构造函数的原型对象
    console.log(Person.prototype); // Person {}
    console.log(Person.prototype.__proto__);// Object {}
    console.log(Person.prototype.__proto__.__proto__);// null

    //实例对象
    var p1 = new Person("乔峰",35);
    console.log(p1.__proto__);// Person {}

    //true,全等:指代的是同一个原型对象,即在内存代表同一个对象
    console.log(Person.prototype === p1.__proto__);



    /*
    //实例对象的__proto__ 属性设置原型对象,如果不进行对象的原型对象设置,返回Object对象
    var p1 = new Object();
    p1.__proto__ = Person.prototype;
    p1.name = "乔峰";
    //console.log(p1);//Person { name="乔峰"}



    //构造器
    console.log(Person.prototype.constructor);
    console.log(p1.__proto__.constructor);
    console.log(Person);

    //判断实例对象是否属于某个构造函数(类)
    console.log(p1.__proto__.constructor === Person);
    */

四 .原型的相关方法

function Person(name){
            this.name = name;
        }

        Person.prototype.age = 40;

        var p = new Person("张三");


        /*
         * 总结:
         *  1.p.hasOwnProperty("name") 语法:对象.方法("属性名") 查找对象自身是否存在该属性,不能查找到原型对象
         *  2. "name" in p 语法:"属性名" in 对象  查找对象自身已经原型对象中是否存在该属性

        console.log(p.hasOwnProperty("name"));//true
        console.log("name" in p);//true

        console.log(p.hasOwnProperty("age"));//false
        console.log("age" in p);//true
         */
        /*
        //查找对象的原型对象
        console.log(Object.getPrototypeOf(p));
        console.log(p.__proto__);
        */
        /*
        //Object.create(p) 以p对象为原型,新建一个对象
        var p2 = Object.create(p);
        console.log(p2);
        console.log(p.name);

        //判断p是否p2的原型对象
        console.log(p.isPrototypeOf(p2));
        */

原型学到这里就可以入门啦 。。。。。。。。。。。。。。。。。

“`