javascript-面向对象和原型(3).

进阶的面向对象和原型--常见技巧

原型模式创建对象也有自己的缺点,它省略了构造函数传参初始化这一过程,带来的缺点就是初始化的值都是一致的.而原型最大的缺点就是它最大的优点,那就是共享.
原型中所有属性是被很多实例共享的,共享对于函数非常适合,对于包含基本值得属性也还可以 .但如果属性包含引用类型,就存在一定的问题

 function Box(){};
 
 Box.prototype ={
     constructor:Box,
     name:'Lee',
     age:100,
     family:['哥哥','姐姐','妹妹'],
     run:function()
     {
         return this.name + this.age+'运行中...';
     }
 };
 
 var box1 = new Box();
 alert(box1.family);                       //'哥哥','姐姐','妹妹'
 box1.family.push('弟弟');               //在第一个实例修改后引用类型，保持了共享
 
 alert(box1.family);                    //'哥哥','姐姐','妹妹','弟弟'
 
 //再次实例化 Box 我希望得到的是 ['哥哥','姐姐','妹妹'] 但是因为 共享 所以得到了['哥哥','姐姐','妹妹','弟弟']
 var box2 = new Box();                    //共享了box1添加后的引用类型的原型
 alert(box2.family);                    //'哥哥','姐姐','妹妹','弟弟'

★为了解决这个问题，可以采用 组合构造函数+原型模式

function Box(name ,age)
 {
     this.name =name ;
     this.age =age;
     this.family =['哥哥','姐姐','妹妹'];
 }

Box.prototype ={
    constructor:Box,
    run:function(){
        return this.name + this.age+'运行中...';
    }
    
} 

var box1 =new Box('Lee',100);
alert(box1.family);                                //'哥哥','姐姐','妹妹'
box1.family.push('弟弟'); 
alert(box1.family);                                //'哥哥','姐姐','妹妹','弟弟'

var box2 =new Box('jack',200);
alert(box2.family);                                //'哥哥','姐姐','妹妹'
//引用类型没有使用原型，所有没有共享

★原型模式，不管你是否调用了原型中的共享方法，它都会初始化原型中的方法，并且在声明一个对象时，
构造函数+原型部分让人感觉怪异，最好就是把构造函数和原型封装到一起。为了解决这个问题，我们可以使用动态原型模式

//可以将原型封装到构造函数里 
function Box(name ,age)
 {
     this.name =name ;
     this.age =age;
     this.family =['哥哥','姐姐','妹妹'];
     
     //原型的初始化，只要第一次初始化，就可以了，没必要每次构造函数实例化的时候都初始化
     if(typeof this.run != 'function')                        //判断方法是否存在
     {
         Box.prototype.run =function()
         {
            return this.name + this.age+'运行中...';
         }
     }
     
 }

    var box1 =new Box('Lee',100);
    alert(box1.run());
    
    var box2 =new Box('jack',200);
    alert(box2.run());

★★扩展：寄生构造函数=工厂模式+构造函数

function Box(name , age)
    {
        var obj =new Object();
        obj.name =name;
        obj.age=age;
        obj.run=function()
        {
            return this.name + this.age+'运行中...';
        }
        return obj;
    }

    var box1 = new Box('Lee',100);
    alert(box1.run());
    
    var box2 = new Box('jack',200);
    alert(box2.run());

★★扩展：稳妥构造函数[没看出稳妥构造函数和工厂方式的区别 除了函数名首字母大写]

function Box(name , age)
    {
        var obj =new Object();
        obj.name =name;
        obj.age=age;
        obj.run=function()
        {
            return this.name + this.age+'运行中...';
        }
        return obj;
    }

    var box1 =Box('Lee',100);
    alert(box1.run());
    
    var box2 =Box('jack',200);
    alert(box2.run());