原型

原型和原型链

    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //构造函数
       function Person(name,age){
           this.name=name;
           this.age=age;
       }
       //通过原型来添加方法，解决数据共享，节省内存空间
       Person.prototype.sayHi=function(){
           console.log("您好!");
       };

       var p1=new Person("小明",20); //实例对象
       var p2=new Person("小红",19); //实例对象
       console.log(p1.sayHi==p2.sayHi);

       //console.dir()可以显示一个对象的所有属性和方法
       console.dir(p1);
       console.dir(p2);
       console.dir(Person);

输出结果：

从输出结果可以看出：

1、写在构造函数中的属性

实例对象中有两个属性，name和age，是通过构造函数来获取的。

构造函数中并没有name和age这两个属性。

2、原型：__proto__或者prototype，都是原型对象。

实例对象中有个属性，__proto__，也是对象，叫原型，但不是标准的属性，是浏览器使用的，在IE8中不支持。

构造函数中有一个属性，prototype，也是对象，叫原型，是标准属性，程序员使用的。

3、原型的作用：共享数据，节省内存空间，因此，不需要共享的数据就写在构造函数里，需要共享的数据就写在原型中。

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

1、构造函数可以实例化对象。

2、构造函数中有一个属性叫prototype，是构造函数的原型对象。

3、构造函数的原型对象（prototype）中有一个constructor构造器，这个构造器指向的就是自己所在的原型对象所在的构造函数。

4、实例对象的原型对象（__proto__）指向的是该构造函数的原型对象（prototype）。

5、构造函数的原型对象（prototype）中的方法是可以被实例对象直接访问的。

6、实例对象的原型对象（__proto__）和构造函数的原型对象（prototype）指向是相同的

即：console.log(实例对象.__proto__ ==  构造函数.prototype); 输出结果为：true。

7、实例对象中的__proto__，是原型，但不是标准的属性，是浏览器使用的，在IE8中不支持。

8、构造函数中的prototype，是原型，是标准属性，程序员使用的。

9、原型链：是一种关系，实例对象和原型对象之间的关系，这种关系是通过原型（__proto__）来联系的。

常规原型对象添加方法的写法

    //构造函数
    function Student(name,age,sex,score){
        this.name=name;
        this.age=age;
        this.sex=sex;
        this.score=score;
    }
    //原型对象
    Student.prototype.height = "180cm";
    Student.prototype.weight = "50kg";
    Student.prototype.study = function(){
        console.log("学无止境");
    };
    Student.prototype.play = function(){
        console.log("打乒乓球");
    };
    Student.prototype.eat = function(){
        console.log("天天在食堂吃饭");
    };
    //实例化对象，并初始化
    var student = new Student("小明",22,"男","100分");
    console.dir(student);
    console.dir(Student);

简单的原型写法：

这种写法需要手动添加构造器的指向，否则，实例对象和构造函数中都没有constructor属性

    //构造函数
    function Student(name,age,sex,score){
        this.name=name;
        this.age=age;
        this.sex=sex;
        this.score=score;
    }
    //简单的原型写法
    Student.prototype = {
        //需要手动修改构造器的指向
        constructor:Student,
        height : "180cm",
        weight : "50kg",
        study : function(){
            console.log("学无止境");
        },
        play : function(){
            console.log("打乒乓球");
        },
        eat : function(){
            console.log("天天在食堂吃饭");
        }
    };
    //实例化对象，并初始化
    var student = new Student("小明",22,"男","100分");
    student.study();
    console.dir(student);
    console.dir(Student);

原型中的方法可以相互访问调用

    //构造函数
    function Student(name,age,sex){
        this.name=name;
        this.age=age;
        this.sex=sex;
    }
    //原型对象添加方法
    Student.prototype.study = function(){
        console.log("学无止境");
        this.play();
    };
    Student.prototype.play = function(){
        console.log("打乒乓球");
        this.eat();
    };
    Student.prototype.eat = function(){
        console.log("天天在食堂吃饭");
    };
    //实例化对象，并初始化
    var student = new Student("小明",22,"男");
    student.study();

输出结果：

实例对象中使用的属性和方法，先在实例对象中查找，找到了就直接使用，找不到的话，就去实例对象的__proto__属性指向的原型对象prototype中查找，找到了就使用，找不到则报错。

    //构造函数
    function Student(name,age,sex,score){
        this.name=name;
        this.age=age;
        this.sex=sex;
        this.score=score;
    }
    //原型对象
    Student.prototype.weight = "50kg";
    Student.prototype.sex= "女";
    Student.prototype.study = function(){
        console.log("学无止境");
    };

    //实例化对象，并初始化
    var student = new Student("小明",22,"男","100分");
    console.log(student.sex);
    console.log(student.weight);

为内置对象的原型对象添加方法

例如：为String的原型对象添加一个倒序字符串的方法

    String.prototype.myReverse = function(){
        var string=[];
        for(var i=this.length-1; i>=0; i--){
            string[string.length] = this[i];
        }
        return string.join("");
    };

    var str="abcdefg";
    var s1=str.myReverse();
    console.log(s1);

例如：为Array的原型对象添加一个从小到大排序的方法

    //从小到大排序
    Array.prototype.mySort = function(){
        for(var i=0;i<this.length-1;i++){
            for(var j=0;j<this.length-1-i;j++)
                if(this[j]>this[j+1]){
                    var temp=this[j];
                    this[j]=this[j+1];
                    this[j+1]=temp;
                }
        }
    };
     var arr=[12,5,8,3,9,10,16,11,22,17];
     arr.mySort();
     console.log(arr);
    var arr1=["Tom","Jack","An"];
    arr1.mySort();
    console.log(arr1);

输出结果：