JavasSript中类的实现

JavaScript定义类

 

1. 一、定义类并创建实例

     function MyClass() {

        this.id = 5;

        this.name ='myclass...';

     }

 

这样，我们就定义了一个MyClass类，里面有两个公共属性id 和name。其中this关键字表示当前对象。

注意：列出属性的同时必须对属性进行赋初值，这样JS才会将其解释为对象的属性。

接下来我们可以这样定义类的实例（其中 new不可省略）：

var my =new MyClass();

并以下列形式访问类属性：

my.id

 

1. 二、定义公有属性和私有字段

在function中，用var定义的变量为私有变量，可以理解为类的私有字段。

用this定义的变量为公有属性。

     function MyClass() {

        this.id = 5;

        var name ='myclass...';

     }

     my =new MyClass();

     alert(my.id);

     alert(my.name);

     //结果

     // 5

     // undefined

1. 三、定义公有方法和私有方法

同样的，用var定义的方法为私有方法，用this定义的方法为公有方法。

     function myClass() {

        this.id = 5;

        this.show =function(msg) {

           window.alert(msg);

        }

     }

     my =new myClass();

     my.show('the function alert is called...');

     //结果

     // the function alert is called...

如果将上述代码的 this.alert =function(msg)改成var alert =function(msg)，那么就不能用my.alert来调用这个方法了。私有方法只能供类内部的其他方法调用。

1. 四、构造函数

新建对象（my =new myClass();）和调用函数（myClass()）是相似的，所以我们自然想到为函数添加一些参数，在调用此函数时输入一些参数。新建对象也是一样的。看下面的示例：

     function myClass(id, name) {

        this.id = id;

        this.name = name;

     }

     var my =new myClass(5,'test name ...');

     alert(my.id);

     alert(my.name);

     //结果

     // 5

     // test name ...

这样定义的构造函数有个局限性，实例化对象的时候如果没有传参数，或少传参数，那么没有实参的参数值将会是undefined，比如将上面代码的对象实例化改为：var my = new myClass(5);

输出结果将会变成：

     // 5

     // undefined

1. 五、静态属性和静态方法

静态的属性和方法是在定义了类之后定义的。如下例：

     function myClass() {

        this.id = 5;

     }

     myClass.count = 0;//静态属性

     myClass.staticFun =function() {//静态方法

        alert(++myClass.count);

     }

     var my =new myClass();

     alert(my.id);//用实例访问实例属性

     alert(myClass.count);//用类名访问静态属性

     myClass.staticFun();  //用类名访问静态方法

     //结果

     // 5

     // 0

     // 1

1. 六、类的继承
2. 在JS中实现类的继承，实际上是用到了类的另一种创建方式，先创建基类的一个对象，再为这个对象添加新的属性和方法，然后再返回这个对象。
3. 在这里先不讨论这种创建对象的方法。
           function baseClass() {
               this.id = 5;
           }
           function myClass() {
               var my = new baseClass();
               my.name = 'className';
               my.testFun = function() {
                   alert(my.name); //this.name 也可以
               }
               return my;
           }
           var my = new myClass();
           alert(my.id);
           alert(my.name);
           my.testFun();
           // 结果
           // 5
           // className
           // className