javascript 类

准备工作：

（一）js函数

Js函数基本的定义语法为：

function 函数名(arg1,arg2,……)

{}

和通常意义上的函数（方法）相似。可以有返回值。

例如：

<script>

function noReturnValue()
{    

} 

function hasReturnValue()
{
    return 'ok';
} 

function doClick()
{
    alert(noReturnValue());
    alert(hasReturnValue());
}

</script>

 

函数noReturnValue没有返回值，所以打印结果为：undefined

hasReturnValue返回ok字串。

（二）Function对象

ECMAScript有一类对象为：Function对象。它表示定义的任何函数（function）

var function_name = new Function(arg1, arg2, ..., argN, function_body)

 

示例：

function doClick2()
{
      var fun = new 
      Function("a1", "alert(a1);");

      fun('ok');
}

通过Function定义的函数对象，最后一个参数为函数体，前边的参数。两部分都以字符串类型存在。通过字符串的定义方式来定义较困难，但它指示函数是一种引用类型，函数是Function类型的一个实例，而函数名而是一个指向函数的变量。

（三）函数类型

可以通过typeof来得到js对象的类型。

示例一（类型）：

function doClick3()
{
    var fun = new Function("a1", "alert(a1);");
    alert("Object："+typeof (Object) + "\r\n"
    + "Date：" + typeof (Date) + "\r\n"
    + "Array：" + typeof (Array) + "\r\n"
    + "Function：" + typeof (Function) + "\r\n"
    + "new Function()：" + typeof (new Function()) + "\r\n"
    + "function：" + typeof (fun) + "\r\n"
 

    + "new Date()：" + typeof (new Date()) + "\r\n"
    + "new Array()：" + typeof (new Array()) + "\r\n"
    + "new Object()：" + typeof (new Object()) + "\r\n"
    );
}

  

对于对象来说它们的类型做为一种函数存在；创建完的对象除Function外，做为对象类型（object）存在。

 

示例二（构造方法）：

function doClick4()
{
    var fun = new Function("a1", "alert(a1);");
    alert(fun.constructor); 

    var obj = new Array();
    alert(obj.constructor); 

    var i = 0;
    alert(i.constructor);
 

    var num = new Number();
    alert(num.constructor);
}

 

打印的内容除第一个外都是以function 函数名(){}。那么这些对象都是通过function定义的函数对象。函数对象可以构造对象。

 

而函数对象的构造方法为：

function Function(){

[native code]

}

 

示例三（函数对象构造对象）：

function doClick5()
{
    var no = new Number();
    alert("对象类型：" + typeof (no) + "\r\n构造方法：" + no.constructor); 

    alert("对象类型：" + typeof (hasReturnValue) + "\r\n构造方法：" + hasReturnValue.constructor);
    
    var conobj = hasReturnValue();
    alert("对象类型：" + typeof (conobj) + "\r\n构造方法：" + conobj.constructor); 

    var fun = new Function("a1", "");
    var mess1 = new fun('ok');
    alert(typeof (fun));
    alert(typeof (mess1));
    alert(mess1.constructor);
}

 

No是一个对象；hasReturnValue是一个函数对象；fun是一个函数对象。函数对象可以构造对象，所以可以有：

var conobj = hasReturnValue();

var mess1 = new fun('ok');

 

类定义

在java、c#中，类可以存放数据，其中最基本的类型有属性、方法、域。在js中创建（js）类有相似的功能，它的类强调的是一种复合类型。它允许通过变量名进行读取（例如js函数名可做为变量名使用）。而进行访问时，通过键对值方式进行。在C#中，访问属性其实也是这样的，例如，Customer类有公有的Name属性性，其中Name属性有读写两个属性器。假设Name属性为静态属性，则可以通过Customer.Name来访问，赋值或得到值。从大的方面讲，是一种以KV对方式进行访问。

（一）   以大括号方式定义

例如：

var customer = {};
var product = 
{
    name:'mp3',
    price:0
};

function doClick()
{
    alert(typeof (customer));
    alert(typeof (product));
    alert(typeof (Date));
}

定义了两个js类：customer和product。通过测试它们的类型（typeof），它们做为一种object类型存在。那么它们不可以通过new方式创建（函数对象可以创建对象，例如Date）。

 

（二）函数对象

示例一（类型）：

函数对象可以创建对象，那么可以通过function来模拟类类型。

function user()
{
    this.username = '';
    userage = 0;
} 

function doClick2()
{
    alert(typeof (user));
    var user1 = new user();

    user1.username = "宋江";
    alert(user1.username);
}

 

这里定义了一个user类（函数）

在doClick事件（函数）中，可以得到user的类型为function，它可以用于创建对象，并可以访问。在user类中，有两个属性（也可以看做是域），其中username通过this关键字定义，userage是直接定义。创建完user对象后，即user1，可以访问username和userage

var user1 = new user();

user1.username = "宋江";

alert(user1.username);

 

示例二（为类添加函数）：

function user()
{
    this.username = '';
    userage = 0;
    this.showMessage = function()
    {
        alert('user类的函数');
    }
}

function doClick3()
{
    var user1 = new user();
    user1.showMessage();
}

对于类中的函数来说，有私有和公有访问性。通过var定义的为私有函数，通过this定义的为公有函数。

示例三（属性定义与函数定义）：

在通过function定义类类型时，其中的属性（区别类中的函数）可以通过三种修饰符进行，如下：

function clsProperty()
{
    p1 = 1;
    var p2 = 2;
    this.p3 = 3;
}

function doClick4()
{
    var cls = new clsProperty(); 

    alert(cls.p1);
    alert(cls.p2);
    alert(cls.p3); 

    cls.p1 = 1;
    cls.p2 = 2;
    cls.p3 = 3; 

    alert(cls.p1);
    alert(cls.p2);
    alert(cls.p3); 

    clsProperty.p1 = 1;
    clsProperty.p2 = 2;
    clsProperty.p3 = 3;    

    alert(clsProperty.p1);
    alert(clsProperty.p2);
    alert(clsProperty.p3);
}

 

三种修饰中在添加this关键字时，具有良好的访问支持，但无修饰或var修饰时，不可以进行操作。Var是用于定义局部变量的关键字。在定义属性时，可以把它理解为私有访问修饰符，而this则可以理解为公有访问修饰符。

function clsProperty1()
{
    p1 = function() { alert('p1'); };
    var p2 = function() { alert('p2'); };
    this.p3 = function() { alert('p3'); };
}

function doClick5()
{
    var cls = new clsProperty1(); 

    cls.p1();
    cls.p2();
    cls.p3(); 

    clsProperty1.p1();
    clsProperty1.p2();
    clsProperty1.p3();
}

 

P1为无修饰符，p2为var修改符，p3为this修饰符。在doClick5中，cls.p3()和clsProperty1.p2()可以访问。所以，对于js类中的函数来讲：

Var修饰符类似C#中的静态方法（函数）修饰符；this类似实例方法（函数）修饰符。

所以对于js类中的属性来讲，也可以把var和this修饰符做为相似的比较：

Var修饰符用于私有属性修饰符；this类似公有属性修饰符。

 

 

（三）js类中的静态实现

function user()
{
}

user.age = 30;
user.showAge = function() { alert(user.age); } 

function doClick()
{
    user.showAge();
    user.age = 20;
    user.showAge();
}

通过在类外进行设置，可以用于静态访问。

 

（四）js类中的实例实现

在上一篇中，通过this关键字实现实例属性和实例方法（函数）。还有一种通过prototype关键字实现。

function user()
{
}

user.age = 30;
user.showAge = function() { alert(user.age); }
 

user.prototype.showMessage = function()
{
    alert('实例方法');
}

function doClick1()
{
    var user1 = new user();
    user1.showMessage();    
}

 

（五）构造方法

以上的例子中，创建类，构造方法都是无参数的。

function user()
{

}

下边是个带参数的：

function product(id, name, price)
{
    this.id = id;
    this.name = name;
    this.price = price;
}

在调用进，分为两种情况：

情况一：正好符合参数个数，正常调用；情况二：少参数，则从左到右匹配，没有匹配的为未定义；情况三：多参数，按正常匹配。

function product(id, name, price)
{
    this.id = id;
    this.name = name;
    this.price = price;
    this.getString = function()
    {
        return("id:"+this.id+" name:"+this.name+" price:"+this.price);
    }
}


function doClick2()
{
    var pro1 = new product(1,'mp3',100);
    alert(pro1.getString()); 

    var pro2 = new product();
    alert(pro2.getString()); 

    var pro3 = new product(1);
    alert(pro3.getString()); 

    var pro4 = new product(1, 'mp3');
    alert(pro4.getString());
}