如何在javascript中实现类方法?

时间:2013-09-15 20:17:32

标签: inheritance scope javascript

我正在学习一个图书馆,看到一个例子,我不明白它是如何完成的? 在类的函数中,“this”变量包含该类的所有方法。 外面只提供公共方法。

受保护的方法更有趣。它们仅在继承的类中可用。 它是如何工作的?

请参阅以下文档中的示例:

/**
  * A-class
  */
var ClassA = AWeb.class({
   public : {
      /**
        * A-class constructor
        */
      constructor : function() {
         /* Private variable */
         this.variable1 = "A";
         this.calls = 0;
      },

      /**
        * Function returns information about the object
        */
      getInfo : function() {
         this.incCalls();

         return "variable1=" + this.variable1 + ", calls=" + this.calls;
      }
   },
   protected : {
      /**
        * Protected function
        */
      changeVariable1 : function( value ) {
         this.variable1 = value;
      }
   },
   private : {
      /**
        * Private function
        */
      incCalls : function() {
         this.calls++;
      }
   }
});
/**
  * C-class
  */
var ClassC = AWeb.class({
   extends : ClassA,
   public : {
      /**
        * B-class constructor
        */
      constructor : function() {
         this.super();
         this.changeVariable1( "C" );
      },

      /**
        * Function returns extended information about the object
        */
      getLongInfo : function() {
         return this.incCalls !== undefined ? "incCalls visible" : "incCalls undefined";
      }
   }
});
/**
  * Main project function
  */
function main() {
   var a = new ClassA(),
       c = new ClassC();

   alert(
      "a instanceof ClassA: " + (a instanceof ClassA) + "\n" +
      "a instanceof ClassC: " + (a instanceof ClassC) + "\n" +

      "a.getInfo " + (a.getInfo ? "exists" : "undefined") + "\n" +
      "a.getLongInfo " + (a.getLongInfo ? "exists" : "undefined") + "\n" +
      "a.changeVariable1 " + (a.changeVariable1 ? "exists" : "undefined") + "\n" +
      "a.getInfo()=" + a.getInfo() + "\n\n" +

      "c instanceof ClassA: " + (c instanceof ClassA) + "\n" +
      "c instanceof ClassC: " + (c instanceof ClassC) + "\n" +

      "c.getInfo " + (c.getInfo ? "exists" : "undefined") + "\n" +
      "c.getLongInfo " + (c.getLongInfo ? "exists" : "undefined") + "\n" +
      "c.changeVariable1 " + (c.changeVariable1 ? "exists" : "undefined") + "\n" +

      "c.getInfo()=" + c.getInfo() + "\n" +
      "c.getLongInfo()=" + c.getLongInfo()
   );
}

如果有帮助:http://a-web.me/tutorial_javascript.html

1 个答案:

答案 0 :(得分:0)

抱歉这个不准确的问题。我知道javascript中的继承原则。 我感兴趣的是在指定的库中实现继承。它有效,我测试了它。

库是免费的,但它有一个封闭的代码,无法读取它。 它适用于所有浏览器。

我将指定的代码包装到html页面中,请查看。

<!DOCTYPE HTML>

<html>
<head>
    <title>Sample project</title>
    <!-- Styles -->
    <link rel="stylesheet" type="text/css" href="http://a-web.me/styles/default/a-web.css" >
    <!-- Scripts -->
    <script type="text/javascript" src="http://a-web.me/scripts/a-web.js"></script>
</head>
<body>
    <script type="text/javascript">
        /**
          * A-class
          */
        var ClassA = AWeb.class({
           public : {
              /**
                * A-class constructor
                */
              constructor : function() {
                 /* Private variable */
                 this.variable1 = "A";
                 this.calls = 0;
              },

              /**
                * Function returns information about the object
                */
              getInfo : function() {
                 this.incCalls();

                 return "variable1=" + this.variable1 + ", calls=" + this.calls;
              }
           },
           protected : {
              /**
                * Protected function
                */
              changeVariable1 : function( value ) {
                 this.variable1 = value;
              }
           },
           private : {
              /**
                * Private function
                */
              incCalls : function() {
                 this.calls++;
              }
           }
        });
        /**
          * C-class
          */
        var ClassC = AWeb.class({
           extends : ClassA,
           public : {
              /**
                * B-class constructor
                */
              constructor : function() {
                 this.super();
                 this.changeVariable1( "C" );
              },

              /**
                * Function returns extended information about the object
                */
              getLongInfo : function() {
                 return this.incCalls !== undefined ? "incCalls visible" : "incCalls undefined";
              }
           }
        });
        /**
          * Main project function
          */
        function main() {
           var a = new ClassA(),
               c = new ClassC();

           alert(
              "a instanceof ClassA: " + (a instanceof ClassA) + "\n" +
              "a instanceof ClassC: " + (a instanceof ClassC) + "\n" +

              "a.getInfo " + (a.getInfo ? "exists" : "undefined") + "\n" +
              "a.getLongInfo " + (a.getLongInfo ? "exists" : "undefined") + "\n" +
              "a.changeVariable1 " + (a.changeVariable1 ? "exists" : "undefined") + "\n" +
              "a.getInfo()=" + a.getInfo() + "\n\n" +

              "c instanceof ClassA: " + (c instanceof ClassA) + "\n" +
              "c instanceof ClassC: " + (c instanceof ClassC) + "\n" +

              "c.getInfo " + (c.getInfo ? "exists" : "undefined") + "\n" +
              "c.getLongInfo " + (c.getLongInfo ? "exists" : "undefined") + "\n" +
              "c.changeVariable1 " + (c.changeVariable1 ? "exists" : "undefined") + "\n" +

              "c.getInfo()=" + c.getInfo() + "\n" +
              "c.getLongInfo()=" + c.getLongInfo()
           );
        }
    </script>
</body>
</html>
相关问题