JavaScript Tutorial/Object Oriented/Member Function

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

Adding method to a class using prototype

   <source lang="javascript">

<HTML> <HEAD> <TITLE>Instance method demo</TITLE> </HEAD>

  <BODY>

<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 + "
"); document.write("The rectangle instance width is: " + theRectangle.width + "
"); document.write ("The calcArea method returns: " + theRectangle.calcArea()); </SCRIPT>

  </BODY>

</HTML></source>


Add member function

   <source lang="javascript">

<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></source>


Call object member function

   <source lang="javascript">

<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></source>


Create an Object with member method

   <source lang="javascript">

<html> <head> <script language="Javascript" type = "text/javascript">

</script> </head> <body> </body> </html></source>


Custom objects and associative object arrays

   <source lang="javascript">

<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] + "
"); } else { document.write(i + "
"); } } 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></source>


Defining the object methods outside of the factory functions and then pointing to them

   <source lang="javascript">

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();</source>


Instance method

   <source lang="javascript">

<HTML> <HEAD> <TITLE>Instance method demo</TITLE> </HEAD>

  <BODY>

<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>

  </BODY>

</HTML></source>