JS中prototype关键字的功能介绍及使用示例

  prototype 关键字可以为 JS原有对象 或者 自己创建的类 中添加方法或者属性。

  也可以实现继承。

  例子:

  

复制代码 代码如下:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <title>JS中 prototype 关键字的使用</title>

  </head>

  <script>

  <!-- demo1 JS中原有对象中 添加方法 -->

  Number.prototype.add = function (num){

  return this+num;

  }

  function but1_click(){

  alert((3).add(8));

  }

  <!-- demo2 JS中新建对象中, 添加属性 ,方法 -->

  function Car(cColor,cWeight){

  this.cColor = cColor;

  this.cWeight = cWeight;

  }

  Car.prototype.drivers = new Array('zhangsan','lisi');

  Car.prototype.work = function (cLong){

  alert("我跑了"+cLong+"公里");

  }

  function but2_click(){

  var c = new Car("red","5");

  c.drivers.push('zhaoliu');

  alert(c.drivers);

  c.work(1);

  }

  <!-- demo3 JS中新建对象中, 添加属性 ,方法 紧凑的写法 -->

  function Rectangle(rWeight,rHeight){

  this.rWeight = rWeight;

  this.rHeight = rHeight;

  if( typeof this._init == 'undefined'){

  Rectangle.prototype.test = function (){

  alert("test");

  }

  }

  this._init = true;

  }

  function but3_click(){

  var t = new Rectangle(6,8);

  t.test();

  }

  <!-- demo4 prototype 继承 -->

  function objectA(){

  this.methodA = function (){

  alert("我是A方法");

  }

  }

  function objectB(){

  this.methodB = function (){

  alert("我是B方法");

  }

  }

  objectB.prototype = new objectA();

  function but4_click(){

  var t = new objectB();

  t.methodB();

  t.methodA();

  }

  </script>

  <body>

  <h2> prototype 关键字的使用 </h2>

  <hr />

  <input id="but1" type="button" value="demo1" onclick="but1_click()" />

  <input id="but2" type="button" value="demo2" onclick="but2_click()" />

  <input id="but3" type="button" value="demo3" onclick="but3_click()" />

  <input id="but4" type="button" value="demo4" onclick="but4_click()" />

  </body>

  </html>