JavaScript Tutorial/Object Oriented/Constructor
Содержание
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>