• JavaScript面向对象编程(1) 基础


     自从有了Ajax这个概念,JavaScript作为Ajax的利器,其作用一路飙升。JavaScript最基本的使用,以及语法、浏览器对象等等东东在这里就不累赘了。把主要篇幅放在如何实现JavaScript的面向对象编程方面。

        1. 用JavaScript实现类
           JavaScritpt没有专门的机制实现类,这里是借助它的函数允许嵌套的机制来实现类的。一个函数可以包含变量,又可以包含其它函数,这样,变量可以作为属性,内部的函数就可以作为成员方法了。因此外层函数本身就可以作为一个类了。如下:

    function myClass()
    {
        
    //此处相当于构造函数
    }
    这里 myClass就是一个类。其实可以把它看成类的构造函数。至于非构造函数的部分,以后会详细描述。

        2. 如何获得一个类的实例
          实现了类就应该可以获得类的实例,JavaScript提供了一个方法可以获得对象实例。即 new操作符。其实JavaScript中,类和函数是同一个概念,当用new操作一个函数时就返回一个对象。如下:
    var obj1 = new myClass();

        3. 对象的成员的引用
           在JavaScript中引用一个类的属性或方法的方法有以下三种。
           1>  点号操作符
                这是一种最普遍的引用方式,就不累赘。即如下形式:
    对象名.属性名;
    对象名.方法名;

          2>  方括号引用
               JavaScript中允许用方括号引用对象的成员。如下:
    对象名["属性名"];
    对象名[
    "方法名"];
                这里方括号内是代表属性或方法名的字符串,不一定是字符串常量。也可以使用变量。这样就可以使用变量传递属性或方法名。为编程带来了方便。在某些情况下,代码中不能确定要调用那个属性或方法时,就可以采用这种方式。否则,如果使用点号操作符,还需要使用条件判断来调用属性或方法。
           另外,使用方括号引用的属性和方法名还可以以数字开头,或者出现空格,而使用点号引用的属性和方法名则遵循标示符的规则。但一般不提倡使用非标示符的命名方法。
     
          3>  使用eval函数
               如果不希望使用变量传递变量或方法名,又不想使用条件判断,那么eval函数是一个好的选择。eval接收一个字符串类型的参数,然后将这个字符串作为代码在上下文中执行,返回执行的结果。这里正是利用了eval的这一功能。如下:
    alert(eval("对象名." + element.value));
            
         4. 对对象属性,方法的添加、修改和删除操作
             JavaScript中,在生成对象之后还可以为对象动态添加、修改和删除属性和方法,这与其它面向对象的语言是不同的。
            1>  添加属性和方法
                  先创建一个对象,空对象创建后没有任何属性和方法,然而我们可以在代码中创建。
    var obj1 = new Object();
    //添加属性
    obj1.ID = 1;
    obj1.Name 
    = "johnson";

    //添加方法
    obj1.showMessage = function()
    {
        alert(
    "ID: " + this.ID + ", Name: " + this.Name);
    }

          2>  修改属性与方法
                与添加属性和方法类似,例如接着上面的例子:
    // 修改属性
    obj1.ID = 2;
    obj1.Name 
    = "Amanda";

    // 修改方法
    obj1.showMessage = function()
    {
        alert(
    "ID: " + this.ID");
    }
        
          3>  删除属性与方法
                直接将要删除的属性或方法赋值为undefined即可:
    obj1.ID = 1;
    obj1.Name 
    = undefined;

    obj1.showMessage 
    = undefined;

         5. 创建无类型对象。
            类似于C#3.0里的Anonymous Types,JavaScript 也可以创建无类型的对象。形式如下:
    var obj1 = {};
    var obj2 = 
    {
        ID: 
    1,
        Name: 
    "Johnson",
        showMessage: 
    function()
        
    {
            alert(
    "ID: " + this.ID + "Name: " + this.Name);
        }

    }
           这里定义了两个无类型的对象,obj1和obj2。其中obj1是一个空对象。obj2包括两个属性ID, Name和一个方法showMessage。每个属性和方法用逗号分割。属性(方法)名和其值之间用分号分割。
           用这种方式创建属性方法时,也可以用字符串定义属性方法的名字。如:
    var obj2 = 
    {
        
    "ID" : 1,
        
    "Name""Johnson"
    }
     
          6. prototype
              每个函数对象都具有一个子对象prototype,因为函数也可以表示类,所以prototype表示一个类的成员的集合。当new 一个对象时,prototype对象的成员都会被实例化成对象的成员。先看一个例子:
    function myClass()
    { }

    myClass.prototype.ID 
    = 1;
    myClass.prototype.Name 
    = "johnson";
    myClass.prototype.showMessage 
    = function()
    {
        alert(
    "ID: " + this.ID + "Name: " + this.Name);
    }


    var obj1 = new myClass();
    obj1.showMessage();
          使用prototype对象创建类有一个好处。如果将所有的成员直接写在类的声明中,如下:
    function myClass()
    {
        
    //添加属性
        this.ID = 1;
        
    this.Name = "johnson";

        
    //添加方法
        this.showMessage = function()
        
    {
            alert(
    "ID: " + this.ID + ", Name: " + this.Name);
        }

    }


    var obj1 = new myClass();
    var obj2 = new myClass();
            在上面的代码中,定义了一个类myClass,在类中直接定义了两个属性和一个方法。然后实例化了两个对象,这里的两个属性和一个方法,每创建一次myClass对象都会被创建一次,浪费了内存空间。而用prototype以后就可以解决这个问题,每new一个函数时,其prototype对象的成员都会自动赋给这个对象,当new多个对象时不会重复创建。
            由于prototype的初始化发生在函数体执行之前,用以下代码可以证明:
    function myClass()
    {
        
    //此处相当于构造函数
        this.ID = 1;
        
    this.Name1 = this.Name;
        
    this.showMessage();
    }

    myClass.prototype.Name 
    = "johnson";
    myClass.prototype.showMessage 
    = function()
    {
        alert(
    "ID: " + this.ID + ", Name: " + this.Name);
    }


    var obj1 = new myClass();
            执行以上代码可以发现当new这个类型的对象时,即弹出了对话框。
            最后只得一提的是,prototype有一个方法,在面向对象的设计中用得到。即:constructor属性,是对构造函数的调用,这里的构造函数即上文提到的类的声明里的代码。如:
    function myClass()
    {
        
    //此处相当于构造函数
        alert("this is in constructor");
    }

    myClass.prototype.constructor();

    var obj1 = new myClass();
       执行以上代码你会发现对话框弹出了两次。由此可见,prototype可专门用于设计类的成员,实际上在JavaScript面向对象的设计中,很多时候都会用到prototype。
  • 相关阅读:
    【实践】腾讯云服务器发布项目
    【实践】jdbc批量插入数据
    【转载】jQuery Validate 菜鸟教程
    【转载】jQuery Validate验证框架 + CKEditor 无法验证问题的解决方法
    【实践】获取CKEditor的html文本、纯文本、被选中的内容及赋值
    CKEDITOR的内容js转码,C#控制器解码接收
    jQuery.qrcode生成二维码
    一个表中的两列与另一个表的一列关联的结果显示
    【转载】海明码求解公式规律(转载自计算机网络高分笔记)
    『实践』百度地图同时显示多个路书
  • 原文地址:https://www.cnblogs.com/aaa6818162/p/1561218.html
Copyright © 2020-2023  润新知