JavaScript中继承的一些示例方法与属性参考

prototype 属性的作用:

  利用prototype 属性提供对象的类的一组基本功能。对象的新实例“继承”赋予该对象原型的操作。

  prototype 属性的功能:

  所有JavaScript 内部对象都有只读的prototype 属性。可以为内部对象的原型添加功能,但该对象不能被赋予不同的原型。

  然而,用户定义的对象可以被赋给新的原型。

  constructor 属性的作用:

  constructor 表示创建对象的函数。

  constructor 属性的功能:

  constructor 属性是所有具有 prototype 的对象的成员。它们包括除 Global 和 Math 对象以外的所有 JavaScript 内部对象。

  constructor 属性保存了对构造特定对象实例的函数的引用。

  A 利用prototype 添加对象的属性 [ 方式一]

  示例:

  

复制代码 代码如下:

  <script type="text/javascript">

  //方式一

  var myObj = function(){

  this.study = "JavaScript";

  }

  myObj.prototype.hobby = function()

  {

  this.hobby = "See girl";

  }

  var newObj = new myObj();

  for ( var attr in newObj )

  {

  document.write( attr +"<br/>" );

  }

  </script>

  B 利用prototype 添加对象的属性 [ 方式二]

  示例:

  

复制代码 代码如下:

  <script type="text/javascript">

  //方式二

  var superObj = { name:"xugang" };

  var subObj = { age:20 };

  function extend(superObj,subObj){

  //获得父对象的原型对象

  subObj.getSuper = superObj.prototype;

  //将父对象的属性给子对象

  for(var i in superObj){

  subObj[i] = superObj[i];

  }

  }

  extend(superObj,subObj);

  for ( var s in subObj )

  {

  document.write( s +"<br/>" ); //遍历子对象的属性

  }

  </script>

  C 利用prototype 继承父类的原型属性

  示例:

  

复制代码 代码如下:

  <script>

  function Person(_name){

  this.name = _name;

  }

  //创建对象(用于更改 prototype 原型对象)

  function addSex(_sex){

  this.sex = _sex;

  }

  //更改原型对象

  Person.prototype = new addSex('男');

  var p = new Person('xugang');

  alert("p 的原型为:" + p.constructor);

  //打印所有属性

  for(var i in p){

  //alert(p[i]);

  }

  // ================= 继承 =================

  //创建子对象 Student

  function Student(_study){

  this.study = _study;

  }

  // 通过 prototype 让 Student 继承 Person

  Student.prototype = new Person('刘德华');

  var stu1 = new Student('JS');

  alert("stu1 的原型为:" + stu1.constructor);

  for(var i in stu1){

  alert(stu1[i]);

  }

  </script>

  因为Student 对象的原型更改为Person 对象,而Person 对象的原型更改为addSex ,所以,Student 对象的原型为addSex 。

  注意:一个对象的原型是在 new 对象的那一刻确定的,如果在 new 对象以后更改无效!

  D 如何设置对象的原型对象和构造函数

  示例:

  

复制代码 代码如下:

  <script type="text/javascript">

  function B(){

  this.name = "刘德华";

  return "B方法";

  }

  function C(){

  this.age = 42;

  return "C方法";

  }

  B.prototype = new C();

  var b = new B();

  b.constructor = B; //重写b的构造方法为B本身

  document.write("b 的构造方法:");

  document.write(b.constructor() + "<br/>");

  document.write("b 的原型对象的构造方法:");

  document.write(b.constructor.prototype.constructor() + "<br/>");

  for ( var m in b )

  {

  document.write("属性:" + m );

  document.write(" 值:" + b[m] +"<br/>");

  }

  </script>

  结果如下:

  b 的构造方法:B方法

  b 的原型对象的构造方法:C方法

  属性:age 值:42

  属性:name 值:刘德华

  E 对象中用来保存原型的 __proto__ 变量

  示例:

  

复制代码 代码如下:

  <script type="text/javascript">

  function myObject(){}

  var my = new myObject();

  //任何对象都会有一个隐藏的 __proto__ 变量用来保存原型

  document.write(my.__proto__ + "<br/>");

  //在 Internet Explorer 下显示为:undefined

  //在 Mozilla Firefox 下显示为:[object Object]

  function Person(){

  this.name = "刘德华";

  return "Person 方法";

  }

  /*

  定义方法后,在内存中相当于:

  Person.prototype = { constructor:Person }

  */

  //改变 Person 对象的原型对象

  function Super_Person(){

  this.hobby = "唱歌";

  return "Super_Person 方法";

  }

  Person.prototype = new Super_Person();

  var newObj = new Person();

  /* 使用 new 创建对象过程:

  var o = {};

  Person.prototype.constructor.call(o);

  o = {__proto__:Person.prototype,name = "刘德华"};

  return o;

  */

  document.write(newObj.constructor.prototype.constructor() + "<br/>");

  //打印newObj原型对象(在 IE 下无效!)

  document.write(newObj.__proto__.constructor() + "<br/>");

  </script>

  在 Firefox 中的结果如下:

  [object Object]

  Super_Person 方法

  Super_Person 方法