18/08/2018, 11:06

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ê ...

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ụ:

cách sử dụng đối tượng object trong javascript cách sử dụng đối tượng object trong javascript cách sử dụng đối tượng object trong javascript
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.

Vậy tóm lại:

- Trong đời sống thực, đối tượng là một vật hữu hình.

- Một đối tượng sẽ có các thông tinhành động

  • Các cá thể đối tượng khác nhau, thông tin sẽ có giá trị khác nhau.
  • Các cá thể đối tượng khác nhau sẽ thực hiện những hành động vào 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.

- Mỗi giá trị của đối tượng được viết theo dạng cặp tên:giá trị

- Ví dụ, câu lệnh bên dưới dùng để tạo một đối tượng có tên là SinhVien và nó lưu trữ hai cái tên:

  • name (có giá trị là chuỗi Nhân)
  • year (có giá trị là số 1993)
var SinhVien = {name:"Nhân", year:1993}

- Vì vậy, nếu nói chính xác hơn thì:

"Đối tượng là một loại biến đặc biệt, nó lưu trữ nhiều cái tên và mỗi cái tên sẽ có một giá trị"

- 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)}
var SinhVien = {name:"Nhân", year:1993, intro: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""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, ....
Ví dụ

- Đoạn mã bên dưới dùng để tạo một đối tượng có tên là SinhVien.

- Đối tượng SinhVien có ba thuộc tính và một phương thức:

  • Thuộc tính name có giá trị là chuỗi Nguyễn Thành Nhân
  • Thuộc tính year có giá trị là số 1993
  • Thuộc tính city có giá trị bằng với giá trị của biến thanhpho
  • Phương thức intro có chức năng hiển thị các thông tin trê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>
Xem ví dụ

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
Ví dụ

Để lấy họ tên của sinh viên thì ta dùng cú pháp SinhVien.name

<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>
Xem ví dụ

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()
Ví dụ

Để thực thi các câu lệnh trong phương thức intro thì ta dùng cú pháp SinhVien.intro()

<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>
Xem ví dụ

- 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ị.

Ví dụ
<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>
Xem ví dụ
0