Javascript - Đối tượng JS

Khái niệm về đôi tượng

 Như các bạn đã biết, lập trình với các object thực sự tiện lợi, thứ nhất chúng có thể tương tác như các đối tượng trong thực tế, tiếp đến là khả năng tái sử dụng và bảo trì code dễ dàng hơn rất nhiều so với cách lập trình chỉ sử dụng các hàm (tất nhiên là chúng ta có thể sử dụng kết hợp cả hai phương pháp bởi hầu hết các đoạn mã viết bằng JavaScript thường không lớn). Một đặc điểm đặc trưng khi làm việc với các object là chúng ta làm việc với các thuộc tính và các phương thức của chúng, vì vậy nếu như chúng ta có một đối tượng là quả táo chẳng hạn thì thuộc tính có thể là màu sắc, giống táo, kích thước, và phương thức của quả táo có thể là "chín" và "rụng". Khi chín thuộc tính màu sắc và khối lượng có thể bị thay đổi, cũng như khi rụng quả táo có thể bị phân hủy. Như vậy việc lập trình với các đối tượng sẽ trở nên thật sự thú vị, giống như công việc mà chúa trời đã tạo ra mọi vật trên thế giới này vậy!

 Không giống như hầu hết các ngôn ngữ hướng đối tượng khác, trên thực tế javaScript không thực sự có khái niệm lớp, trong hầu hết các ngôn ngữ lập trình bạn phải xây dựng lớp sau đó mới khai báo đối tượng để sử dụng. Trong javaScript đối tượng được tạo trực tiếp và có thể tạo bằng nhiều cách , đối tượng cũng có thể kế thừa từ đối tượng khác.

Để tạo đối tượng bạn có ba cách cơ bản để tạo đối tượng như sau:

  1. Sử dụng  object literal
  2. Sử dụng Đối Tượng Object 
  3. Sử dụng phương thức khởi tạo (dùng từ khóa new)

1. Sử Dụng Object Literal

Object literal là cách tạo đối tượng sử dụng danh sách các cặp tên khoá và giá trị khoá (key và key-value) được đặt trong cặp dấu ngoặc { }.

Cú pháp:

object={property1:value1,property2:value2.....propertyN:valueN}

Giữa thuộc tính và giá trị có dấu ":"

Ví dụ:

<script>  
emp={id:102,name:"Shyam Kumar",salary:40000}  
document.write(emp.id+" "+emp.name+" "+emp.salary);  
</script>  

Xem ví dụ

2. Sử dụng Đối Tượng Object

Bạn có thể sử dụng từ khoá new để tạo đối tượng mới từ đối tượng Object được cung cấp sẵn trong JavaScript.

Cú pháp:

var objectname=new Object(); 

Ví dụ:

<script>  
var emp=new Object();  
emp.id=101;  
emp.name="Ravi Malik";  
emp.salary=50000;  
document.write(emp.id+" "+emp.name+" "+emp.salary);  
</script>  

Xem ví dụ

Đối tượng Object là đối tượng cha mà tất cả các đối tượng khác trong JavaScript đều kế thừa từ đối tượng Object này.

3. Sử Dụng Hàm Constructor

Sử dụng hàm constructor để tạo đối tượng là một cách phổ biến trong JavaScript. Với cách làm này tương tự như cách sử dụng đối tượng Object tuy nhiên chúng ta sẽ định nghĩa một hàm constructor để thay cho đối tượng Object.

Ví dụ:

<script>  
function Emp(id,name,salary){  
this.id=id;  
this.name=name;  
this.salary=salary;  
}  
e=new Emp(103,"BillGate",30000);  
  
document.write(e.id+" "+e.name+" "+e.salary);  
</script>  

Xem ví dụ

Ở trên sử dụng hàm constructor Emp chúng ta có thể tạo ra đối tượng e với các thuộc tính là id, name và salary.

4. Thuộc Tính

Thuộc tính được dùng để lưu trữ các thông tin (dữ liệu) về đối tượng. Thuộc tính giống như biến nhưng nó được giới hạn trong phạm vi của một đối tượng nhất định.

Ví dụ :

<script>
var peter = {
    name: "Peter",
    age: 24,
};
docuemnt.write("Tên: "+peter.name+ " Tuổi:"+peter.age);
</script>

Xem ví dụ

Ở ví dụ trên chúng ta có đối tượng person có các thuộc tính là name và age.

Trong JavaScript để truy cập giá trị của thuộc tính chúng ta sử dụng dấu ".".

5. Khai báo phương thức trong đối tượng Javascript

Chúng ta có thể khai báo phương trong đối tượng JS. Nhưng, trước khi khai báo phương thức, chúng ta cần thêm thuộc tính của hàm cùng tên với phương thức

Ví dụ:

<script>  
function Emp(id,name,salary){  
this.id=id;  
this.name=name;  
this.salary=salary;  
  
this.changeSalary=changeSalary; // Tên hàm cùng tên thuộc tính của phương thức  
function changeSalary(otherSalary){  
this.salary=otherSalary;  
}  
}  
e=new Emp(103,"Steve Job",30000);  
document.write(e.id+" "+e.name+" "+e.salary);  
e.changeSalary(45000);  
document.write("<br>"+e.id+" "+e.name+" "+e.salary);  
</script>  

Xem ví dụ