详解JavaScript中的类和对象

r囧r小猫 2022-05-26 09:50 409阅读 0赞

JavaScript中有一些预定义的类，如Object、Array、String和Number等。类在JavaScript中使用起来非常灵活，创建类的对象时，要使用new关键字，如下面的代码创建：

//样young的博客，未经博主允许不得转载:https://blog.csdn.net/jisuanjiguoba/article/details/80139351
    var arrayValues = new Array();//定义数组变量
    arrayValues[0] = "a1";
    arrayValues[1] = "a2";
    arrayValues[2] = "a3";

当类的构造方法没有参数时，可以将括号省略：var arrayValues = new Array。

那么如何在JavaScript中自定义类呢？可以说在JavaScript中自定义类非常灵活，可以通过以下三种方式自定义JavaScript类：

**1.工厂方式（动态添加类成员）**

由于JavaScript对象的属性可以动态加入，因此可以用如下代码创建一个对象并调用其中的teach方法：

//样young的博客，未经博主允许不得转载:https://blog.csdn.net/jisuanjiguoba/article/details/80139351
    var nTeacher= new Object;      // 创建一个对象变量
    nTeacher.id = '001';	       //  定义id属性
    nTeacher.xm = '李芳芳';         //  定义xm属性
    nTeacher.age = 28;              //  定义age属性
    nTeacher.teach = function()
    {
        alert(this.xm + "样young的博客");
    };
    nTeacher.teach();             // 调用teach方法

为了使创建对象更加方便，可以建立对象工厂函数来建立Teacher对象，代码如下：

function createTeacher(id, xm, age){
          var nTeacher= new Object;      // 创建一个对象变量
          nTeacher.id = id;	       //  定义id属性
          nTeacher.xm = xm;         //  定义xm属性
          nTeacher.age = age;              //  定义age属性
          nTeacher.teach = function()
          {
               alert(this.xm + "样young的博客");
          };
          return nTeacher;             // 返回nTeacher对象
    }

下面通过createTeacher函数创建两个对象，分别调用这两个对象的teach方法：

var nTeacher1 = createTeacher('002', '赵晓芳', 32);
    var nTeacher2 = createTeacher('003', '孙芳芳', 33);
    nTeacher1.teach();    //调用nTeacher1对象的teach方法
    nTeacher2.teach();   //调用nTeacher2对象的teach方法

上面的代码在每次建立Teacher对象时都会重新创建teach方法。实际上，可以使多个对象共享同一个teach函数：

//样young的博客，未经博主允许不得转载:https://blog.csdn.net/jisuanjiguoba/article/details/80139351
    function teach()
    {
        alert(this.xm + "样young的博客");
    };
    function createTeacher(id, xm, age){
          var nTeacher= new Object;      // 创建一个对象变量
          nTeacher.id = id;	       //  定义id属性
          nTeacher.xm = xm;         //  定义xm属性
          nTeacher.age = age;              //  定义age属性
          nTeacher.teach = teach;   // 将全局的teach方法赋给Teacher对象的teach方法
          return nTeacher;             // 返回nTeacher对象
    }

**2.构造函数方式**

构造函数方式创建对象和工厂方式比较类似，如下所示：

//样young的博客，未经博主允许不得转载:https://blog.csdn.net/jisuanjiguoba/article/details/80139351
    function teach()
    {
        alert(this.xm + "样young的博客");
    };
    function Teacher(id, xm, age){
          this.id = id;	       //  定义id属性
          this.xm = xm;         //  定义xm属性
          this.age = age;              //  定义age属性
          this.teach = teach;   // 将全局的teach方法赋给Teacher对象的teach方法
    }
    var nTeacher1=new Teacher('002', '赵晓芳', 32);
    var nTeacher2 = new Teacher('003', '孙芳芳', 33);
    nTeacher1.teach();    //调用nTeacher1对象的teach方法
    nTeacher2.teach();   //调用nTeacher2对象的teach方法

从上面的代码也可以看出，**构造函数方式和工厂方式的最大区别就是不在Teacher函数的内部建立对象，而是直接使用this来代表当前的对象实例**。

**3.原型方式**

该方式使用对象的prototype属性，可以把prototype属性看作是创建新对象所依赖的原型。通过使用空构造函数创建一个空类，然后使用prototype属性为该类添加成员（属性和方法），如下所示：

//样young的博客，未经博主允许不得转载:https://blog.csdn.net/jisuanjiguoba/article/details/80139351
    function Teacher(){       //建立一个空的构造函数
    }
    Teacher.prototype.id = '002';    // 使用prototype为Teacher类添加属性
    Teacher.prototype.xm = '赵晓芳';
    Teacher.prototype.age = 32;
    Teacher.prototype.teach = function() {    // 使用prototype为Teacher类添加方法
        alert(this.xm + '样young的博客');
    };
    var nTeacher1  = new Teacher(); 
    nTeacher1.teach();

从上面的代码也可以看出，使用原型方式的另一个好处是可以为已经存在的类添加新的成员（属性或方法），如下为String类添加一个获得字节长度的lenMethod方法：

String.prototype.lenMethod = function(){
          return this.replace(/[^\x0-\xf]/g, "##").length;   //将中文替换成##
    }
    var st = "字母abc";
    alert(st.lenMethod());   //显示7，如果直接使用length则会输出5