Javascript面向对象与原型

面向对象与原型

• 原型的普通创建方式

function Box(){}        　　　　　　// 构造函数
Box.prototype.name='Tayle';      
Box.prototype.age='25';
Box.prototype.run=function(){
return this.name+this.age+'运行中......'；
};

• 使用字面量的方式创建原型

function Box(){}
Box.prototype={
    name:'tayler',
    age:'25',
    run:function{
    return this.name+this.age+'运行中......';
       }
   }
var box1= new Box();
box1.name='Jack';
alert(box1.name);    //Jack   　　　
delete box1.name;     　　　　　　　　　　　 //删除实例中的属性
delete Box.prototype.name;   　　　　　　  //删除原型中的属性
Box.prototype.name='KKK';　　　　　  　//覆盖原型中的属性
alert(box1.name) ;                            　　　//KKK　　

原型的执行流程：
 1.先浏览构造函数里面属性或者方法，如果有，立即返回；
 2.如果构造函数里面没有，就去它的原型里面找，如果有，就返回。

• 原型重写

function Box () {}
Box.prototype={
  constructor:Box,   //强制指向Box
  name:'Lee',
  age:'22',
  run:function () {
    return this.name+this.age+'运行中.....';
  }
};

//重写原型对象
Box.prototype={
  age:'23'      //重写之后不会保留原来的任何信息了  

}
var box=new Box();
alert(box.name)    //undefined
alert(box.age)　　　　//23
alert(box.run());   //Error:box.run is not a function

• 内置引用类型的原型扩展

//数组排序
var box=[5,2,4,6,8];
alert(box.sort());

alert(Array.prototype.sort);  //f查看sort是否是Array原型对象里的方法 如果是 则返回true  这里返回true
alert(String.prototype.addstring);//这里不是String的方法 返回false 所以我可以自定义一个addstring

//内置引用类型的功能扩展
String.prototype.addstring=function  () {
  return this +',被添加了';
}
alert('Lee'.addstring());

• 原型共享

unction Box () {}
Box.prototype={
  name:'Li',
  age:23,
  family:['哥哥','姐姐','妹妹'],
  run:function(){
    return this.name+this.age+"运行....";
  }
};
var box1= new Box();
//alert(box1.run());
alert(box1.family);
box1.family.push('弟弟');  //追加  
alert(box1.family);   

var box2 = new Box();
alert(box2.family);   //哥哥，姐姐，妹妹，弟弟。  //共享了box1添加后的引用类型的原型

• 混合模式（构造函数+原型模式） //混合模式很好的解决传参和引用共享的，是解决对象比较好的方法

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','22');     
//alert(box1.run());   //LEE22运行中
alert(box1.family);     //哥哥，姐姐，妹妹
box1.family.push('弟弟');   //在family后面追加弟弟
alert(box1.family);     //哥哥，姐姐，妹妹，弟弟
var box2= new Box('kkk','23');
//alert(box2.run());
alert(box2.family);     //引用类型没有使用原型，所以没有共享。

• 动态原型模式

//可以将原型封装到构造函数里
function Box(name,age){
  this.name=name;
  this.age=age;
  this.family=['哥哥','姐姐','妹妹'];
  if(typeof this.run!='function'){        //判断this.run是否存在   因为原型的初始化只要第一次初始化就够了，没必要每次构造的时候都初始化
    alert('原型初始化开始');
     Box.prototype.run=function(){
       return this.name+this.age+'运行中';
     }
    alert('原型初始化结束');
  }
}
var box1=new Box('LEE','22');
alert(box1.run());
var box2= new Box('kkk','23');
alert(box2.run());

• 函数的继承一（通过原型链继承）

function Box(){
  this.name='Lee';
}
function Desk(){
  this.age='20';
} 
function Table(){
  this.level='aaa';
}

 Desk.prototype = new Box()  //Desk继承Box   
 //new Box()Box构造里面的属性和原型里面的都交给Desk Desk得到Box的构造+原型里面的信息
 var desk = new Desk();
 alert(desk.name);  //Lee
 alert(desk.age);  //20

Table.prototype =  new Desk();
var table= new Table(); 
alert(table.name);  //Lee
alert(table.age);    //20
alert(desk instanceof Object)//true 子类型它自己它的超类型

• 函数的继承二（使用对象冒充继承）

function Box(name,age,family){
   this.name=name;
   this.age=age;
   this.family=['哥哥','姐姐','妹妹'];
}
//Box.prototype.family='家庭';  //继承不到
function Desk(name,age){
  Box.call(this,name,age);
}
var desk = new Desk('kkk','23');
alert(desk.name)//kkk
alert(desk.family); //哥哥姐姐妹妹  （对象冒充只能继承构造函数中的信息）
desk.family.push('弟弟');
alert(desk.family) //哥哥姐姐妹妹弟弟

• 函数的继承三（组合继承：对象冒充+原型链，解决原型中方法访问不到的问题）

function Box (name,age,family) {
  this.name=name;
  this.age=age;
  this.family=['哥哥','姐姐','妹妹'];
}
Box.prototype.run=function (){
  return this.name+this.age+'运行中...';
}
function Desk(name,age){
  Box.call(this,name,age);  //对象冒充只能继承构造函数中的信息
}
 var desk = new Desk('Lee','22');
 Desk.prototype =  new Box();  //组合继承：对象冒充+原型链，解决原型中方法访问不到的问题
 alert(desk.run());  //如果是冒充继承 这里本来是访问不到的，现在采用了组合继承 可以输出 Lee22运行中... 

• 函数的继承四（原型式继承）

//临时中转函数
function obj (o) {    //o表示将要传递进入的一个对象
    function F () {}    //F构造是一个临时新建的对象，用来存储传递过来的对象
    F.prototype=o;    //将o对象的实例赋值给F构造的原型
    return new F();   //返回传递过来的对象实例
}
var box={
  name:'jack',
  age:100,
};
var box1= obj (box);
alert(box1.name);

• 函数的继承五（寄生式继承）

//临时中转函数
function obj (o) {    
  function F () {}     
    F.prototype=o;    
    return new F();   
}
//寄生函数
function create (o) {
  var f= obj(o);
  f.run=function(){
    return this.name+'方法';
  }
  return f;
}
var box={
  name:'jack',
  age:100,
  family:['哥哥','姐姐','妹妹']
};
var box1= create(box);
alert(box1.run());

• 函数的继承五（寄生组合继承）

//临时中转函数
function obj (o) {    
  function F () {}     
    F.prototype=o;    
    return new F();   
}
//寄生函数
function create (box,desk) {
  var f= obj(box.prototype);
  f.constructor=desk;   //调整原型构造指针
  desk.prototype=f;
}

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

function Desk(name,age){
  Box.call(this,name,age);   //对象冒充
}
//通过寄生组合继承来实现继承
create(Box,Desk);  //这句话代替了Desk.prototype= new Box();

var desk = new Desk('KKK','25');
alert(desk.run());
alert(desk.constructor);