详解JavaScript中的类和对象

      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来代表当前的对象实例

扫描二维码关注公众号,回复: 186226 查看本文章

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

猜你喜欢

转载自blog.csdn.net/jisuanjiguoba/article/details/80139351