javascript学习十一：面向对象之prototype

原型是js中非常特殊一个对象，当一个函数创建之后，会随之就产生一个原型对象。当通过这个函数的构造函数创建了一个具体的对象之后，在这个具体的对象中就会有一个属性指向原型。

原型有四种状态：

    //第一种状态
    function Person(){

    }
    //第二种状态
    Person.prototype.name = "Leon";
    Person.prototype.age = 23;
    Person.prototype.say = function() {
        alert(this.name+","+this.age);
    }
    //第三中状态，创建了一个对象之后会有一个_prop_的属性指向原型
    //在使用时如果在对象内部没有找到属性会去原型中找，_prop_属性是隐藏的
    var p1 = new Person();
    p1.say();//Leon,23
    //以下方法可以检测出p1是否有_prop_指向Person的原型
    alert(Person.prototype.isPrototypeOf(p1));//true

    //第四种状态
    var p2 = new Person();
    //是在自己的空间中定义了一个属性，不会替换原型中的属性
    p2.name = "Ada";
    p2.say();//Ada,23
    p1.say();//Leon,23

原型的检测

    //检测某个对象是否是某个函数的原型
    alert(Person.prototype.isPrototypeOf(p2));//true

    //检测某个对象的constructor
    alert('p1.constructor==Person? '+(p1.constructor==Person));//true
    alert('p2.constructor==Person? '+(p2.constructor==Person));//true

    //检测某个属性是否是自己的属性
    alert(p1.hasOwnProperty("name"));//false，p1自己的空间中没有值
    alert(p2.hasOwnProperty("name"));//true,p2在自己的空间中设置了name属性

    delete p2.name;
    p2.say();//Leon,23
    alert(p2.hasOwnProperty("name"));//由于已经删除了，所以是false

    //检测某个对象在原型或者自己中是否包含有某个属性，通过in检测
    alert('is name in p1: '+("name" in p1));//true
    alert('is name in p2: '+("name" in p2));//true
    alert('is address in p1: '+("address" in p1));//在原型和自己的空间中都没有，false

    alert(hasPrototypeProperty(p1,"name"));//true
    alert(hasPrototypeProperty(p2,"name"));//false
    /** * 可以通过如下方法检测某个属性是否在原型中存在 */
    function hasPrototypeProperty(obj,prop) {
        return ((!obj.hasOwnProperty(prop))&&(prop in obj))
    }

通过json的格式来编写原型

使用上面的方式来编写原型，当属性和方法特别多时，编写起来不是很方便，可以通过json的格式来编写 。

    /** * 以下方式将会重写原型 * 由于原型重写，而且没有通过Person.prototype来指定 * 此时的constructor不会再指向Person而是指向Object * 如果constructor真的比较重要，可以在json中说明原型的指向 */
    Person.prototype = {
        constructor:Person,//手动指定constructor,如果不指定则p1.constructor==Person返回false
        name:"Leon",
        age:23,
        say:function() {
            alert(this.name+","+this.age);
        }
    }
    var p1 = new Person();
    p1.say();
    alert(p1.constructor==Person);//true

基于原型的创建虽然可以有效的完成封装，但是依然有一些问题
1、无法通过构造函数来设置属性值
2、当属性中有引用类型变量时，可能存在变量值重复

    function Person(){

    }
    Person.prototype = {
        constructor:Person,
        name:"Leon",
        age:30,
        friends:["Ada","Chris"],
        say:function() {
            alert(this.name+"["+this.friends+"]");
        }
    }
    var p1 = new Person();
    p1.name = "John";
    p1.say();//john[ada,chris]
    //会在原型中找friends,所以Mike是在原型中增加的
    p1.friends.push("Mike");//为p1增加了一个朋友
    var p2 = new Person();
    //此时原型中就多了一个Mike,这就是原型所带来的第二个问题
    p2.say();//leon ada chris mike

通过组合构造函数和原型来实现对象的创建

为了解决原型所带来的问题，此处需要通过组合构造函数和原型来实现对象的创建。将属性在构造函数中定义，将方法在原型中定义。这种有效集合了两者的优点，是目前最为常用的一种方式。

function Person(name,age,friends){
        //属性在构造函数中定义
        this.name = name;
        this.age = age;
        this.friends = friends;
    }
    Person.prototype = {
        constructor:Person,
        //方法在原型中定义
        say:function() {
            alert(this.name+"["+this.friends+"]");
        }
    }
    //此时所以的属性都是保存在自己的空间中的
    var p1 = new Person("Leon",23,["Ada","Chris"]);
    p1.name = "John";
    p1.friends.push("Mike");//为p1增加了一个朋友
    p1.say();//john [ada chris mike]
    var p2 = new Person("Ada",33,["Leon"]);
    p2.say();// ada [leon]

动态原型的构造方式

为了让定义的方式更加符合java的需求，就把定义方法的原型代码放置到Person这个构造函数中。不能使用重写的方式定义方法。

function Person(name,age,friends){
        //属性在构造函数中定义
        this.name = name;
        this.age = age;
        this.friends = friends;

        //不能使用重写的方式定义
        /*Person.prototype = { constructor:Person, //方法在原型中定义 say:function() { alert(this.name+"["+this.friends+"]"); } }*/
        /** * 判断Person.prototype.say是否存在，如果不存在就表示需要创建 * 当存在之后就不会在创建了 */
        if(!Person.prototype.say) {
            Person.prototype.say = function() {
                alert(this.name+"["+this.friends+"]");
            }   
        }
    }

    //此时所以的属性都是保存在自己的空间中的
    var p1 = new Person("Leon",23,["Ada","Chris"]);
    p1.name = "John";
    p1.friends.push("Mike");//为p1增加了一个朋友
    p1.say();//john [ada chris mike]
    var p2 = new Person("Ada",33,["Leon"]);
    //此时原型中就多了一个Mike,这就是原型所带来的第二个问题
    p2.say();// ada [leon]

扩展已经存在类的原型

    /** * 以下等于为String扩展了一个trim的方法来去除空格 */
    String.prototype.trim = function() {
        //js的正则表达式和java很类似，区别就是js是使用//
        return this.replace(/(^\s+)|(\s+$)/g,"");
    }
    var str = " aaaa ";
    alert("|"+str.trim()+"|");