现在的位置: 首页 > 综合 > 正文

javascript中实现对象继承的五种方式详解

2013年07月09日 ⁄ 综合 ⁄ 共 3846字 ⁄ 字号 评论关闭

javascript中实现对象继承的五种方式(javascript中没有extend关键字实现继承)

第一种方式:对象冒充

      function ClassA(sColor) {

           this.color = sColor;

           this.sayColor = function () {

                 alert(this.color);

           };

     }

     function ClassB(sColorsName) {

          this.newMethod = ClassA;    //
在子对象中定义一个方法

          this.newMethod(sColor);     //传递和父对象相同的参数

          delete this.newMethod;

          this.name = sName;

          this.sayName = function () {

               alert(this.name);

          };

     }

     注意:所有新属性和新方法都必须在删除了新方法的代码行后定义。否则,可能会覆盖超类的相关属性和方法:

第二种方式:call()方法

    call()方法是Function中的方法。因此我们定义的每个函数都拥有这个call()方法。

  
1)与对象冒充机制一起使用:

          function ClassA(sColor) {

              this.color = sColor;

              this.sayColor = function () {

                   alert(this.color);

              };

           }

          function ClassB(sColor, sName) {

                  //this.newMethod = ClassA;

                 //this.newMethod(color);

                 //delete this.newMethod;

                 ClassA.call(this,
sColor);    //等价于上面对象冒充的三条语句

                           //this代表的是ClassB对象. sColor代表的是ClassB的参数。

                 this.name = sName;

                 this.sayName = function () {

                         alert(this.name);

                 };

          }

   (2)单独使用

          function sayColor(sPrefix,sSuffix) {

                  alert(sPrefix +
this.color + sSuffix);

          };

          var obj = new Object();

          obj.color = "blue";

          sayColor.call(obj, "The color is ", "a very nice color indeed.");

                      //第一个参数是 obj,说明应该赋予 sayColor()
函数中的 this 关键字值是 obj

                     //第二、三个参数是字符串与 sayColor()
函数中的参数sPrefixsSuffix匹配

第三种方式:apply()方法

     apply()方法是Function中的方法。因此我们定义的每个函数都拥有这个apply()方法。

   (1)与对象冒充机制一起使用:

         function ClassA(sColor) {

                this.color = sColor;

               this.sayColor = function () {

                       alert(this.color);

               };

        }

        function ClassB(sColor, sName) {

                   //this.newMethod = ClassA;

                  //this.newMethod(color);

                 //delete this.newMethod;

                 ClassA.apply(this, new Array(sColor));  //this代表的是ClassB对象.
sColor
代表的是ClassB的参数。

                 this.name = sName;

                 this.sayName = function () {

                            alert(this.name);

                 };

          }

2)单独使用

         function sayColor(sPrefix,sSuffix) {

                alert(sPrefix +
this.color + sSuffix);

          };

          var obj = new Object();

          obj.color = "blue";

          sayColor.apply(obj, new Array("The color is ", "a very nice color indeed."));

                     //第一个参数是 obj,说明应该赋予 sayColor()
函数中的 this 关键字值是 obj

                    //第二个参数是字符串数组,与 sayColor()
函数中的参数sPrefixsSuffix匹配

第三种方式:原型链方式

       function ClassA() {

        }

        ClassA.prototype.color = "blue";

        ClassA.prototype.sayColor = function () {

                  alert(this.color);

        };

        function ClassB() {

       }

       ClassB.prototype = new ClassA();
 //
ClassBprototype属性设置成 ClassA
的实例。这很有意思,

                                                                   因为想要 ClassA
的所有属性和方法,但又不想逐个将它们

                                                                   ClassB
prototype 属性。

        ClassB.prototype.name = "aaa";

        ClassB.prototype.sayName = function () {

                    alert(this.name);

          };

      注意:使用原型链方式是无法传参数

第四种方式:混合方式(构造函数/原型方式创建对象,call方法/apply方法和原型链共同实现继承)

       function ClassA(sColor) {

              this.color = sColor;

        }

        ClassA.prototype.sayColor = function () {  //保证父对象的方法只生成一次

              alert(this.color);

        };

        function ClassB(sColor, sName) {

             ClassA.call(this, sColor);      //或者使用ClassA.apply(this,new
Array(sColor))

             this.name = sName;

        }

        ClassB.prototype = new ClassA(); 

        ClassB.prototype. sayColor = function () {  //重写父对象的sayColor()方法

               alert(“the color is ”+this.color);

        };

       ClassB.prototype.sayName = function () {  //保证子对象的方法只生成一次

              alert(this.name);

       };

     注意:能够传递参数,解决了原型链方式无法传参数的问题。

以上的标记为红色的是在javascript实际的对象继承上最常用的。

【上篇】
【下篇】

抱歉!评论已关闭.