JavaScript Tutorial/Object Oriented/Member Function

Материал из Web эксперт
Перейти к: навигация, поиск

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>