JavaScript的继承的封装介绍

复制代码 代码如下:

  /**

  * 当调用此函数时,只有第一次参数传入,第二个不存在的情况下,就创建类

  * 当调用此函数时,传入了两个参数,第一个参数为基类,第二个参数则在基类的基础上添加内容

  */

  function extend(obj,prop){

  function F(){

  }

  //如果第一个参数为object类型(即json对象)的话,则将json的key value赋值给F函数的原型 F.prototype.key = value

  if (typeof(obj) == "object") {

  for(var name in obj){

  F.prototype[name] = obj[name];

  }

  } else {//如果第一个参数为function类型的话,则将次函数的原型赋值给F函数,prop肯定是传值的(json对象),所以将prop赋值给F函数的原型

  F.prototype = obj.prototype;

  for(var name in prop){

  F.prototype[name] = prop[name];

  }

  }

  return F;

  }

  //因为这里只有一个参数,所以此时会将json对象的key,value赋值给extend函数中的F函数的原型,然后用person变量接收F函数,此时person也成为了一个函数,此函数也拥有了F函数的原型 name和sex

  var person = extend({

  name:"xxc",

  sex:"man"

  });

  //将person函数传入,进入extend函数后,首先将person的原型赋值给F函数,然后将第二个参数hope:"more money"赋值给F函数,此时F函数的原型有三个东西name,sex,hope

  //最后将F函数返回,导致person的原型也和F函数一样,有name,sex,hope

  var person = extend(person,{

  hope:"more money"

  });

  alert(person.prototype.name);//xxc

  alert(person.prototype.sex);//man

  alert(person.prototype.hope);//more money

  

复制代码 代码如下:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

  <html>

  <head>

  <title>function.html</title>

  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

  <meta http-equiv="description" content="this is my page">

  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <script src="../jquery/jquery-1.10.2.min.js"></script>

  <script src="extends2.js"></script>

  <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>

  </body>

  </html>