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 方法