Cách sử dụng đối tượng (Object) trong JavaScript

1) Đối tượng (trong đời sống thực) là gì !?

– Trong đời sống thực, đối tượng là một vật hữu hình, ví dụ như:

• Sinh Viên
• Xe máy
• Điện thoại
• Laptop
• ….

– Khi đề cập đến đối tượng Sinh Viên thì ta thường quan tâm đến những thông tin như: họ tên, năm sinh, giới tính, mã số, quê quán, …. và đối với những Sinh Viên khác nhau thì các thông tin sẽ có giá trị khác nhau, ví dụ:

Họ tên	Lữ Phụng Tiên	Điêu Thuyền	Quan Vân Trường
Năm sinh	1993	1995	1989
Giới tính	Nam	Nữ	Nam
Mã số	001	002	003
Quê quán	Cần Thơ	Vĩnh Long	Sóc Trăng

– Ngoài ra, đối tượng Sinh Viên còn có thể thực hiện những hành động như: học bài, đi ngủ, xem phim, tập thể dục, …. và đối với những Sinh Viên khác nhau thì những hành động này sẽ được thực hiện vào những thời điểm khác nhau.

2) Đối tượng (trong JavaScript) là gì !?

– Trong JavaScript, đối tượng là một loại biến đặc biệt, nó có thể lưu trữ nhiều giá trị đồng thời.

var SinhVien = {name:"Nhân", year:1993}

– Giá trị được lưu trong tên không chỉ đơn thuần là chuỗi, số, …. mà nó còn có thể là một hàm.

– Những cái tên lưu trữ các giá trị đơn thuần như chuỗi, số, …. thì được gọi là thuộc tính

– Những cái tên lưu trữ giá trị là một hàm thì được gọi là phương thức

– Ví dụ: Câu lệnh bên dưới dùng để tạo một đối tượng có tên là SinhVien, đối tượng SinhVien có hai thuộc tính và một phương thức:

• Thuộc tính name có giá trị là chuỗi Nhân
• Thuộc tính year có giá trị là số 1993
• Phương thức intro có giá trị là hàm function(){alert(“Tên: ” + this.name)}

– Tổng kết: Tương tự như đối tượng trong đời sống thực, đối tượng trong JavaScript cũng dùng để lưu trữ về một thứ gì đó cụ thể,
nó có các thông tin và hành động giống như đối tượng trong đời trong thực. Tuy nhiên, trong JavaScript thì các thông tin được gọi là thuộc tính,
còn các hành động thì được gọi là phương thức.

3) Cách khai báo (khởi tạo) một đối tượng trong JavaScript

– Một đối tượng có thể có “không hoặc nhiều thuộc tính” và “không hoặc nhiều phương thức”.

– Để khai báo một đối tượng, ta sử dụng cú pháp như sau:

var tên đối tượng = {

          tên thuộc tính thứ nhất:giá trị,

          tên thuộc tính thứ hai:giá trị,

          tên thuộc tính thứ ba:giá trị,

          tên phương thức thứ nhất:function(){
              //Danh sách các câu lệnh của phương thức này
          },

          tên phương thức thứ hai:function(){
              //Danh sách các câu lệnh của phương thức này
          },

          tên phương thức thứ ba:function(){
              //Danh sách các câu lệnh của phương thức này
          }

}

– Lưu ý:

• Quy tắc đặt tên đối tượng, tên thuộc tính, tên phương thức giống với quy tắc đặt tên biến.
• Giá trị của thuộc tính có thể là: chuỗi, số, biến, ….

<script>
    var SinhVien = {
        name:"Nguyễn Thành Nhân",
        year:1993,
        city:thanhpho,
        intro:function(){
            document.write("- Tôi tên: " + this.name + "<br>"); 
            document.write("- Sinh năm: " + this.year + "<br>"); 
            document.write("- Sống tại: " + this.city);
        }
    }
</script>

4) Cách truy cập vào “thuộc tính” của đối tượng

– Việc truy cập vào thuộc tính của đối tượng sẽ trả về giá trị của thuộc tính đó.

– Để truy cập vào thuộc tính của đối tượng, ta sử dụng cú pháp như sau:

tên đối tượng.tên thuộc tính

<script>
    var SinhVien = {
        name:"Nguyễn Thành Nhân",
        year:1993
    }
    document.write("Họ tên của sinh viên là: " + SinhVien.name);
</script>

5) Cách truy cập vào “phương thức” của đối tượng

– Việc truy cập vào phương thức của đối tượng sẽ giúp các câu lệnh trong phương thức được thực thi.

– Để truy cập vào phương thức của đối tượng, ta sử dụng cú pháp như sau:

tên đối tượng.tên phương thức()

<script>
    var SinhVien = {
        name:"Nguyễn Thành Nhân",
        year:1993,
        intro:function(){
            document.write("- Tôi tên: " + this.name + "<br>"); 
            document.write("- Sinh năm: " + this.year + "<br>");
        }
    }
    SinhVien.intro();
</script>

– Lưu ý: Nếu các câu lệnh trong phương thức trả về một giá trị thì ta có thể truy cập vào phương thức đó để sử dụng nó như một giá trị.

<script>
    var SinhVien = {
        name:"Nguyễn Thành Nhân",
        year:1993,
        intro:function(){
            return "Cần Thơ";
        }
    }
    var hello = "Tôi sống tại " + SinhVien.intro();
</script>