Javascript中的自定义类

最新推荐文章于 2024-04-21 14:27:01 发布

云里雾里

最新推荐文章于 2024-04-21 14:27:01 发布

阅读量638

点赞数

分类专栏： javascript 文章标签： javascript function prototype border list url

本文链接：https://blog.youkuaiyun.com/Hugh_Sun/article/details/7732799

版权

javascript 专栏收录该内容

4 篇文章

订阅专栏

类由三部分组成：构造函数、方法定义、属性。

1、定义一个类

在javascript中，创建类的第一步就是要为该类创建一个构造函数，也就是说通过创建一个构造函数来定义一个类。另外，也无须事先定义好类的属性，只需要为属性赋值，javascript将自动创建这些属性。下面的代码就是一个类的定义，我们定义了CustomerBooking类的属性和方法。

function CustomerBooking(bookingId,customerName,film,showDate)
{
	this.customerName=customerName;
	this.bookingId=bookingId;
	this.film=film;
	this.showDate=showDate;
}

在构造函数内，或者在类的方法内，this关键字表示的是当前对象。

Javascript中，的大部分对象都有prototype属性，通过prototype属性可以创建新的属性和方法。语法格式如下：

className.prototype.methodName=function(method parameter list)
{
   //method code
}

利用此可以为属性创建get和set方法，如下面所示：

CustomerBooking.prototype.getCustomerName=function()
{
	return this.customerName; 
}

CustomerBooking.prototype.setCustomerName=function(customerName)
{
	this.customerName=customerName;
}

CustomerBooking.prototype.getBookingId=function()
{
	return this.bookingId;
}

CustomerBooking.prototype.setBookingId=function(bookingId)
{
	this.bookingId=bookingId;
}

CustomerBooking.prototype.getFilm=function()
{
	return this.film;
}

CustomerBooking.prototype.setFilm=function(film)
{
	this.film=film;
}

CustomerBooking.prototype.getShowDate=function()
{
	return this.showDate;
}

CustomerBooking.prototype.setShowDate=function(showDate)
{
	this.showDate=showDate;
}

2、创建和使用类的实例---对象

使用new关键字类创建自定义类的实例。如下：

var firstBooking=new CustomerBooking (342,"Arnold Palmer","Toy Story","15 July 2009 20:15");
document.write(firstBooking.getCustomerName());

3、将数组作为类的一个属性

function cinema()
{
	this.bookings=new Array();
}
cinema.prototype.addBooking=function(bookingId,customerName,film,showDate)
{
	this.bookings[bookingId]=new CustomerBooking(bookingId,customerName,film,showDate);
}

上面的代码定义了cinema类的构造函数，将bookings属性初始化为一个数组对象。然后在addBooking（）方法中，创建了一个CustomerBooking类的实例，并将该实例的引用保存在bookings数组的元素bookings[bookingId]中。

4、实战

1)新建一个如下文件，文件名为ch4_8.htm

<html>
	<body >
		<script language="JavaScript" src="ch4_8.js">
		</script>
	</body>
</html>

其中<script>标记的src属性指出了类定义文件的url，上面的ch4_8.js文件与页面在同一目录。

2）新建一个如下文件，文件名为ch4_8.js

// CustomerBooking class
function CustomerBooking(bookingId,customerName,film,showDate)
{
	this.customerName=customerName;
	this.bookingId=bookingId;
	this.film=film;
	this.showDate=showDate;
}

CustomerBooking.prototype.getCustomerName=function()
{
	return this.customerName; 
}

CustomerBooking.prototype.setCustomerName=function(customerName)
{
	this.customerName=customerName;
}

CustomerBooking.prototype.getBookingId=function()
{
	return this.bookingId;
}

CustomerBooking.prototype.setBookingId=function(bookingId)
{
	this.bookingId=bookingId;
}

CustomerBooking.prototype.getFilm=function()
{
	return this.film;
}

CustomerBooking.prototype.setFilm=function(film)
{
	this.film=film;
}

CustomerBooking.prototype.getShowDate=function()
{
	return this.showDate;
}

CustomerBooking.prototype.setShowDate=function(showDate)
{
	this.showDate=showDate;
}

//cinema class
function cinema()
{
	this.bookings=new Array();
}

cinema.prototype.addBooking=function(bookingId,customerName,film,showDate)
{
	this.bookings[bookingId]=new CustomerBooking(bookingId,customerName,film,showDate);
}

cinema.prototype.getBookingsTable=function()
{
	var booking;
	var bookingsTableHTML="<h2>Summary of bookings</h2><p><table border=1>";
	for(booking in this.bookings)
	{
		bookingsTableHTML+="<tr><td>";
		bookingsTableHTML+=this.bookings[booking].getBookingId();
		bookingsTableHTML+="</td><td>";
		
		bookingsTableHTML+=this.bookings[booking].getCustomerName();
		bookingsTableHTML+="</td><td>";
		
		bookingsTableHTML+=this.bookings[booking].getFilm();
		bookingsTableHTML+="</td><td>";
		
		bookingsTableHTML+=this.bookings[booking].getShowDate();
		bookingsTableHTML+="</td></tr>";
	}
	bookingsTableHTML+="</table>";
	return bookingsTableHTML;
}

var test1=new cinema();
test1.addBooking(342,"Arnold Palmer","Toy Story","15 July 2009 20:15");
test1.addBooking(335,"Louise Anderson","The Shawshank Redemption","27 July 2009 11:25");
test1.addBooking(566,"Catherine Hughes","Never Say Never","27 July 2009 17:55");
test1.addBooking(324,"Beci Smith","shrek","29 July 2009 20:15");
document.write(test1.getBookingsTable());