zoukankan      html  css  js  c++  java
  • JavasSript中类的实现(1)

    JavaScript本身并不是设计成面向对象的,所以没有class之类的关键字用来定义类,但JavaScript本身相当灵活,可以利用function关键字来定义类并创建对象。JavaScript定义类是有多种方式的,这里只详细介绍最常用的一种。

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

         function MyClass() {

            this.id = 5;

            this.name = 'myclass...';

         }

    这样,我们就定义了一个MyClass类,里面有两个公共属性 id name。其中this关键字表示当前对象,类似于C#等强类型语言。

    注意:列出属性的同时必须对属性进行赋初值,这样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.alert = function(msg) {

               window.alert(msg);

            }

         }

     

         my = new myClass();

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

         //结果

         // the function alert is called...

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

    定义公有方法(实例方法)还有另一种形式,就是利用 prototype 属性,
    其实prototype 属性还可以用来扩展内置类的实例方法的,比如去掉字符串两边空格的 trim 方法:String.prototype.trim = function() { return ... }

         function myClass() {
             this.id = 5;
         }
         myClass.prototype.alert = function(msg) {
             window.alert(msg);
         }
         var my = new myClass();
         my.alert('the function alert is called...');

    将和上面显示同样的结果。

    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

    为了让属性具有默认值,比如 int 默认是 0 ,可以采用以下方法,虽然比较麻烦。

         function myClass(id, name) {

            this.id = 0;    //整型默认为0

            this.name = ''; //字符串默认为空字符串

            if (id != null) { //id=undefined id==null 依然为true

               this.id = id;

            }

            if (name != null) {

               this.name = name;

            }

         }

     

         var my = new myClass();

         alert(my.id);

         alert(my.name);

         //结果

         // 0

         // (空字符串)

    这样的情况下,延伸出另一个问题,就是你无法在构造函数中初始化 id null

    总之,一切看个人需要,灵活应用便是。

    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
        复制代码
  • 相关阅读:
    A debugger is already attached
    鼠标指向GridView某列显示DIV浮动列表
    天气插件的替换
    ZPL打印中文信息
    「PowerBI」使用TabularEditor进行PowerBIDeskTop模型开发最佳实践
    「PowerBI」丢弃SSDT选择TabularEditor成为你的首选建模开发工具(下)
    「PowerBI」丢弃SSDT选择TabularEditor成为你的首选建模开发工具(中)
    「PowerBI」丢弃SSDT选择TabularEditor成为你的首选建模开发工具(上)
    「Azure」数据分析师有理由爱Azure之十-使用PowerShell自动化AzureAS
    「Azure」数据分析师有理由爱Azure之九-填坑-PowerBI Pro连接Azure AS模型
  • 原文地址:https://www.cnblogs.com/zhengrunqiang/p/2696114.html
Copyright © 2011-2022 走看看