JavaScript Tutorial/Object Oriented/Constructor

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

Class factory example

<html>
<head>
<title>Factory Example</title>
</head>
<body>
<script type="text/javascript">
function createCar(sColor, iDoors, iMpg) {
    var oTempCar = new Object;
    oTempCar.color = sColor;
    oTempCar.doors = iDoors;
    oTempCar.mpg = iMpg;
    oTempCar.showColor = function () {
        alert(this.color)
    };
    return oTempCar;
}
var oCar1 = createCar("red", 4, 23);
var oCar2 = createCar("blue", 3, 25);
oCar1.showColor();
oCar2.showColor();

</script>
</body>
</html>


Constructor Example

<html>
<head>
<title>Constructor Example</title>
</head>
<body>
<script type="text/javascript">
function Car(sColor, iDoors, iMpg) {
    this.color = sColor;
    this.doors = iDoors;
    this.mpg = iMpg;
    this.showColor = function () {
        alert(this.color)
    };
}
var oCar1 = new Car("red", 4, 23);
var oCar2 = new Car("blue", 3, 25);
oCar1.showColor();
oCar2.showColor();

</script>
</body>
</html>


Constructor Paradigm

A class name is the name of the constructor.

A constructor "acts as" a factory function.

No object is created inside the constructor.

this keyword is used in constructor.

When a constructor is called with the new operator, an object is created before the first line of the constructor.

Constructors create a separate copy for each object.



function Car(sColor, iDoors) {
    this.color = sColor;
    this.doors = iDoors;
    this.showColor = function () {
        alert(this.color)
    };
}
var my1 = new Car("red", 4);
var my2 = new Car("blue",3);


Constructor prototype

<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
function Car(sColor, iDoors, iMpg) {
    this.color = sColor;
    this.doors = iDoors;
    this.mpg = iMpg;
    this.owners = new Array("A", "B");
}
Car.prototype.showColor = function () {
    alert(this.color);
};
var oCar1 = new Car("red", 4, 23);
var oCar2 = new Car("blue", 3, 25);
oCar1.owners.push("C");
document.write(oCar1.owners);
document.write(oCar2.owners);
</script>
</body>
</html>


Object constructor

<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;
}
var newCust = new EmployeeObj("FirstName, LastName", "city, state", "555-555-5555", "fl@website.ru");
alert("Hello " + newCust.name);
//-->
</script>
</head>
<body>
</body>
</html>


Use Form input data to construct an object

<html>
<head>
<script language="Javascript" type = "text/javascript">
<!--
function EmployeeObj() {
    this.name = "";
    this.address = "";
    this.telephone = "";
    this.emailaddress = "";
}
var newEmployee = new EmployeeObj();
function createEmployee() {
    newEmployee.name = Employeeform.name.value;
    newEmployee.address = Employeeform.address.value;
    newEmployee.telephone = Employeeform.phone.value;
    newEmployee.emailaddress = Employeeform.email.value;
    alert("Hello " + newEmployee.name);
}
//-->
</script>
</head>
<body>
<form name="Employeeform">
  <u><b>Employee Information</b></u></p>
  <P><b>Name:</b>
  <input type="text" name="name" size="20"></p>
  <P><b>Address: </b><input type="text" name="address" size="55"></p>
  <P><b>Telephone:</b> <input type="text" name="phone" size="20"></p>
  <P><b>Email:</b>
  <input type="text" name="email" size="20"></p>
  <P><input type="submit" value="Submit" OnClick="createEmployee()"></p>
</form>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_Tutorial/Object_Oriented/Constructor&oldid=8463»