Hướng đối tượng JavaHướng dẫn Script(OOJS) với Ví dụ
James Hartman
Khái niệm OOPS trong JavaKịch bản?
Nhiều khi, các biến hoặc mảng không đủ để mô phỏng các tình huống thực tế. JavaScript cho phép bạn tạo ra các đối tượng hoạt động như các đối tượng trong đời thực. Một học sinh hoặc một ngôi nhà có thể là một đối tượng có nhiều đặc điểm riêng biệt. Bạn có thể tạo các thuộc tính và phương thức cho các đối tượng của mình để lập trình dễ dàng hơn. Nếu đối tượng của bạn là học sinh, nó sẽ có các thuộc tính như tên, họ, id, v.v. và các phương thức như calculateRank, changeAddress, v.v. Nếu đối tượng của bạn là một ngôi nhà, nó sẽ có các thuộc tính như số phòng, màu sơn, vị trí, v.v. và các phương thức như calculateArea, changeOwner, v.v.
Cách tạo một đối tượng
Bạn có thể tạo một đối tượng như thế này:
var objName = new Object();
objName.property1 = value1;
objName.property2 = value2;
objName.method1 = function()
{
line of code
}
OR
var objName= {property1:value1, property2:value2, method1: function()
{ lines of code} };
Truy cập các thuộc tính và phương thức của đối tượng
Bạn có thể truy cập các thuộc tính của một đối tượng như thế này:
objectname.propertyname;
Bạn có thể truy cập các phương thức của một đối tượng như thế này:
objectname.methodname();
Hãy tự mình thử ví dụ này:
<html>
<head>
<title>Objects!!!</title>
<script type="text/javascript">
var student = new Object();
student.fName = "John";
student.lName = "Smith";
student.id = 5;
student.markE = 76;
student.markM = 99;
student.markS = 87;
student.calculateAverage = function()
{
return (student.markE + student.markM + student.markS)/3;
};
student.displayDetails = function()
{
document.write("Student Id: " + student.id + "<br />");
document.write("Name: " + student.fName + " " + student.lName + "<br />");
var avg = student.calculateAverage();
document.write("Average Marks: " + avg);
};
student.displayDetails();
</script>
</head>
<body>
</body>
</html>
Trình tạo OOPS
Nhưng việc tạo các đối tượng kiểu này không hữu ích lắm vì ở đây, bạn sẽ phải tạo các đối tượng khác nhau cho các học sinh khác nhau. Ở đây có hàm tạo đối tượng thành hình ảnh. Hàm tạo đối tượng giúp bạn tạo một loại đối tượng có thể được sử dụng lại để đáp ứng nhu cầu của từng cá thể.
Hãy tự mình thử ví dụ này:
<html>
<head>
<script type="text/javascript">
function Student(first, last, id, english, maths, science)
{
this.fName = first;
this.lName = last;
this.id = id;
this.markE = english;
this.markM = maths;
this.markS = science;
this.calculateAverage = function()
{
return (this.markE + this.markM + this.markS)/3;
}
this.displayDetails = function()
{
document.write("Student Id: " + this.id + "<br />");
document.write("Name: " + this.fName + " " + this.lName + "<br />");
var avg = this.calculateAverage();
document.write("Average Marks: " + avg + "<br /><br />");
}
}
var st1 = new Student("John", "Smith", 15, 85, 79, 90);
var st2 = new Student("Hannah", "Turner", 23, 75, 80, 82);
var st3 = new Student("Kevin", "White", 4, 93, 89, 90);
var st4 = new Student("Rose", "Taylor", 11, 55, 63, 45);
st1.displayDetails();
st2.displayDetails();
st3.displayDetails();
st4.displayDetails();
</script>
</head>
<body>
</body>
</html>
Lặp qua các thuộc tính của một đối tượng
Cú pháp:
for (variablename in objectname)
{
lines of code to be executed
}
Cho/trong một vòng lặp thường được sử dụng để lặp qua các thuộc tính của một đối tượng. Bạn có thể đặt bất kỳ tên nào cho biến, nhưng tên của đối tượng phải giống với tên của một đối tượng đã tồn tại mà bạn cần lặp qua.
Hãy tự mình thử ví dụ này:
<html>
<head>
<script type="text/javascript">
var employee={first:"John", last:"Doe", department:"Accounts"};
var details = "";
document.write("<b>Using for/in loops </b><br />");
for (var x in employee)
{
details = x + ": " + employee[x];
document.write(details + "<br />");
}
</script>
</head>
<body>
</body>
</html>
