JavaScript Tutorial/Object Oriented/Member Function
Версия от 18:52, 25 мая 2010; (обсуждение)
Содержание
Adding method to a class using prototype
<HTML>
<HEAD>
<TITLE>Instance method demo</TITLE>
</HEAD>
<BODY>
<H1>
<SCRIPT>
// constructor function
function Rectangle(height, width){
this.height = height;
this.width = width;
}
function getArea () {
return this.height * this.width;
}
// turn the function into an object method
Rectangle.prototype.calcArea = getArea;
var theRectangle = new Rectangle (3, 5);
theRectangle.width = 10;
document.write("The rectangle instance height is: " + theRectangle.height + "<br>");
document.write("The rectangle instance width is: " + theRectangle.width + "<br>");
document.write ("The calcArea method returns: " + theRectangle.calcArea());
</SCRIPT>
</H1>
</BODY>
</HTML>
Add member function
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
function myObj() {
alert("hi");
}
myObj.alternate = function() {
alert("hola");
};
myObj();
myObj.alternate();
</script>
</body>
</html>
Call object member function
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
function createCar(color, doors, mpg) {
var tempcar = new Object;
tempcar.color = color;
tempcar.doors = doors;
tempcar.mpg = mpg;
tempcar.showColor = function () {
alert(this.color)
};
return tempcar;
}
var car1 = createCar("red", 4, 23);
var car2 = createCar("blue", 3, 25);
car1.showColor();
car2.showColor();
</script>
</body>
</html>
Create an Object with member method
<html>
<head>
<script language="Javascript" type = "text/javascript">
<!--
function employeeObj (name, address, phone, email) {
this.name = name;
this.address = address;
this.telephone = phone;
this.emailaddress = email;
this.printEmployee = printEmployee;
}
function printEmployee() {
document.write("employee Name: " + this.name + "<br>\n");
document.write("Address: " + this.address + "<br>\n");
document.write("Telephone Number: " + this.telephone + "<br>\n");
document.write("Email Address: " + this.emailaddress);
}
var newEmployee = new employeeObj("AAA", "City, State", "555-555-5555", "aaa@website.ru");
newEmployee.printEmployee();
//-->
</script>
</head>
<body>
</body>
</html>
Custom objects and associative object arrays
<HTML>
<HEAD>
<TITLE>Custom objects and associative object arrays</TITLE>
<SCRIPT>
function showProperties (theObject){
for (i in theObject) {
if (theObject[i] != null) {
document.write(i + " : " + theObject[i] + "<br>");
}
else {
document.write(i + "<br>");
}
}
return;
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
// constructor function
function Rectangle(height, width){
this.height = height;
this.width = width;
}
function calc_Area () {
return this.height * this.width;
}
// turn the function into an object method
Rectangle.prototype.calcArea = calc_Area;
var theRectangle = new Rectangle (3, 5);
theRectangle.width = 10;
showProperties (theRectangle);
</SCRIPT>
</BODY>
</HTML>
Defining the object methods outside of the factory functions and then pointing to them
function showColor() {
alert(this.color);
}
function createObject(sColor, iDoors) {
var bufObject = new Object;
bufObject.color = sColor;
bufObject.doors = iDoors;
bufObject.showColor = showColor;
return bufObject;
}
var myHourse1 = createObject("red", 4);
var myHourse2 = createObject("blue",3);
myHourse1.showColor();
myHourse2.showColor();
Instance method
<HTML>
<HEAD>
<TITLE>Instance method demo</TITLE>
</HEAD>
<BODY>
<H1>
<SCRIPT>
function Rectangle(height, width){
this.height = height;
this.width = width;
}
function calc_Area () {
return this.height * this.width;
}
function to_String() {
return this.height + " by " +this.width;
}
Rectangle.prototype.calcArea = calc_Area;
Rectangle.prototype.toString = to_String;
var theRectangle = new Rectangle (2, 42);
document.write(theRectangle);
</SCRIPT>
</H1>
</BODY>
</HTML>