js继承的实现代码

  base.js --继承的实现==========================

  【注】:继承后,如果父类是一个类,则会继承其属性,方法(包括用prototype声明的),静态方法,否则只有属性和方法。

  

复制代码 代码如下:

  Object.prototype.extendf= function (a,b){

  if(!a||!b) return;

  var fa = typeof a=="function";

  var fb = typeof b=="function";

  var cha = function(a,b){

  for(var c in b){

  if(a[c]==undefined)//子类重写

  a[c]=b[c];

  }

  return a;//返回继承后的对象

  }

  if(fa&&fb){

  b.apply(this,a.arguments);

  cha(a,b);

  this["base"] =new b;//通过base访问父类

  return cha(this,b.prototype);

  }

  else if(!fa&&fb){

  cha(a,new b);

  a["base"]= new b;

  return cha(a,b);

  }else if(fa&&!fb){

  cha(a,b);

  this["base"]=b;

  return cha(this,b);

  }else if(!fa&&!fb){

  a["base"]=b;

  return cha(a,b);

  }

  }

  测试页:用法

  

复制代码 代码如下:

  <html>

  <head>

  <script type="text/javascript" src="base.js"></script>

  <script type="text/javascript">

  var car2 = {

  name:"轿车【父类】",

  price:"几万【父类】",

  start : function(){

  alert(this.name+" 已启动2!【父类】");

  },

  run : function(){

  alert(this.name+" 在行驶当中2。。。【父类】");

  },

  stop: function(){

  alert(this.name+" 已停止2!【父类】");

  },

  remark: function(){return "【父类】2我是一辆 "+this.name+";价值 "+this.price;}

  // this.remark = "我是一辆 "+this.name+";价值 "+this.price;

  }

  //car2.prototype.extra = function(ext){

  // return this.name+" 的关税2是:"+ext;

  //}

  car2.protect = "【父类】2保护的";

  car2.noExtra = function(){

  return car.protect+" 不交关税2【父类】";

  }

  var car = function(name,price){

  this.name=name||"轿车 [父类]";

  this.price=price||"几万[父类]";

  this.start = function(){

  alert(this.name+" 已启动![父类]");

  };

  this.run = function(){

  alert(this.name+" 在行驶当中。。。[父类]");

  };

  this.stop= function(){

  alert(this.name+" 已停止![父类]");

  };

  this.remark = function(){return "[父类]我是一辆 "+this.name+";价值 "+this.price;};

  // this.remark = "我是一辆 "+this.name+";价值 "+this.price; //注意,这样做 name 和price 将得不到传参,故注释

  }

  car.prototype.extra = function(ext){

  return this.name+" 的关税是[父类]:"+ext;

  }

  car.protect = "[父类]保护的";

  car.noExtra = function(){

  return car.protect+" 不交关税[父类]";

  }

  var BMW = function(){

  this.extendf(BMW,car);

  this.name = "BMW【子类】";

  this.start=function(){

  alert(this.name+"专属 启动装置!");

  };

  return ("this.name1="+this.name);

  }

  var BMW2 = function(){

  this.extendf(BMW2,car2);

  this.name = "宝马终极2号【子类】";

  this.start=function(){

  alert(this.name+" 专属 启动装置2号未来!");

  };

  return ("this.name1="+this.name);

  }

  var bensi = {

  name:"bensi",

  price:"130万",

  start:function(){

  alert(this.name+" 华丽启动!");

  },

  stop:function(){

  alert(this.name+" 专用刹车停止!");

  }

  }

  bensi.noExtra=function(){

  return "谁敢收税?";

  }

  var autuo = {

  name:"autuo【子类】",

  price:"1万",

  stop:function(){

  alert(this.name+" 奥拓失灵了!");

  }

  }

  function ChangAn(){

  this.extendf(ChangAn,car);

  // this.name = "CHANGAN【子类】";

  this.run=function(){

  alert(this.name+" 走的有点慢。。。");

  }

  }

  var ftest = function(){

  var tb = new BMW("宝马","70万");

  testRun(tb);

  alert(BMW.noExtra());

  }

  var ftest2 = function(){

  var tb = bensi//("奔驰","120万");

  tb.extendf(bensi,car);

  testRun(bensi);

  alert(bensi.noExtra());

  }

  var ftest3 = function(){

  var tb = new ChangAn("长安[传参]","5万");

  testRun(tb);

  alert(ChangAn.noExtra());

  }

  var ftest4 = function(){

  var tb = autuo

  tb.extendf(autuo,car2);

  testRun(tb);

  alert(autuo.noExtra());

  }

  var ftest5 = function(){

  var tb = autuo

  tb.extendf(autuo,bensi);

  alert(tb.name);

  tb.start();

  tb.stop();

  alert(autuo.noExtra());

  }

  var ftest6 = function(){

  var tb = new BMW2("宝马2号","65万");

  var scar = document.getElementById("showcar");

  scar.innerHTML = tb.remark();

  alert(tb.name);

  tb.start();

  tb.stop();

  alert(BMW2.noExtra());

  }

  //测试输出

  function testRun(tb){

  var scar = document.getElementById("showcar");

  if(!scar) return false;

  scar.innerHTML = tb.remark();

  tb.base.start();

  tb.start();

  tb.base.run();

  tb.run();

  tb.base.stop();

  tb.stop();

  alert(tb.extra("1万"));//父类为Object时这个会出错,因为父类本身就没有

  }

  </script>

  </head>

  <body>

  js测试:

  <input type = "button" value = "宝马" onclick = "ftest()" >

  <input type = "button" value = "奔驰" onclick = "ftest2()" >

  <input type = "button" value = "长安" onclick = "ftest3()" >

  <input type = "button" value = "奥拓" onclick = "ftest4()" >

  <input type = "button" value = "奔驰类的奥拓" onclick = "ftest5()" >

  <input type = "button" value = "宝马2号" onclick = "ftest6()" >

  <div id = "showcar"></div>

  </body>

  </html>

  ps:没有注意到性能问题,往大家改善

  想只用一个参数,不知道大家有没有办法?

  嵌套类 没试过。