Đối tượng(Object) trong Javascript

Bài hôm nay mình sẽ đi giới thiệu về đối tượng (Objects) trong Javascript

Mục Lục:

1. Đối tượng(Object), Thuộc tính(Properties), Phương thức(Methods)

Đối tượng(Object)

Hiểu môn na đối tượng trong lập trình dùng để biểu diễn một đối tượng trong thế giới thực.

Ví dụ: con chó, con gà, con trâu, xe, sinh viên, học sinh, ...

Mỗi đối tượng được đặc trưng bởi các thuộc tính(Properties), hành vi(Phương thức - Methods) riêng của nó.

Thuộc tính(Properties)

Thuộc tính chính là thông số kỹ thuật của đối tượng. Một đối tượng có thể có nhiều thuộc tính.

Ví dụ:

Đối tượng Thuộc tính
Khách hàng Họ tên
Địa chỉ
Số CMND
Số điện thoại
Số tài khoản

Trong cùng một loại đối tượng, thuộc tính của các cá thể khác nhau có thể nhận giá trị khác nhau.

Ví dụ:

Đối tượng Thuộc tính Giá trị thuộc tính
Khách hàng Họ tên Nguyễn Văn A, Nguyễn Văn B, ...
Địa chỉ Quảng Nam, Quảng Bình, Đà Nẵng, ...
Số CMND 2057371222, 2057578999, ...
Số điện thoại 012231745698, 01223457891, ...
Số tài khoản 21562121552122, 4545464232120002, ....

Phương thức(Methods)

Phương thức chính là những hành động có thể được thực hiện bởi đối tượng. Một đối tượng có thể có nhiều phương thức.

Ví dụ

Đối tượng Phương thức
Khách hàng Rút tiền()
Nạp tiền()
Chuyển khoản()

2. Đối tượng(Object), Thuộc tính(Properties), Phương thức(Methods) trong Javascript

Đối tượng(Object)

Trong JavaScript, đối tượng là một loại biến đặc biệt có thể lưu trữ nhiều giá trị (mỗi giá trị sẽ tương ứng với một thuộc tính)

Ví dụ:

Đối tượng khachhang dưới đây có 5 thuộc tính

  • Thuộc tính hoten với giá trị là Lê Đức Trung
  • Thuộc tính diachi với giá trị là Đà Nẵng
  • Thuộc tính cmnd với giá trị là 205737509
  • Thuộc tính dienthoai với giá trị là 01223175918
  • Thuộc tính stk với giá trị là Nguyễn 12205343015560
        var khachhang = {hoten:"Lê Đức Trung", diachi:"Đà Nẵng", cmnd:"205737509", dienthoai:"01223175918" , stk:"12205343015560"};
    
Xem ví dụ »

Thuộc tính(Properties)

Thuộc tính là các giá trị kết hợp với một đối tượng JavaScript.

Một đối tượng JavaScript là một tập hợp các thuộc tính không có thứ bậc.

Thuộc tính thường có thể được thay đổi, thêm vào và xóa, nhưng một số chỉ được đọc.

Ví dụ:

Tên thuộc tính Giá trị thuộc tính
hoten Lê Đức Trung
diachi Đà Nẵng
cmnd 205737509
dienthoai 01223175918
stk 12205343015560

Phương thức(Methods)

Các phương pháp JavaScript là các hành động có thể được thực hiện trên các đối tượng.

Ví dụ:

Đối tượng khachhang dưới đây có 2 thuộc tính và 1 phương thức

  • Thuộc tính firstName với giá trị là Lê
  • Thuộc tính lastName với giá trị là Trung
  • Phương thức fullName là một hàm dùng để trả về giá trị chuỗi firstName + lastName
        var khachhang = {
            firstName:"Lê ",
            lastName:"Trung",
            fullName:function(){
                return (this.firstName + this.lastName);
            }
        };
    
Xem ví dụ »

3. Cách khai báo một đối tượng(Object) trong Javascript

Với JavaScript, bạn có thể định nghĩa và tạo các đối tượng của riêng mình.

Với JavaScript, bạn có thể định nghĩa và tạo các đối tượng của riêng mình.

  • Xác định và tạo ra một đối tượng đơn, sử dụng một đối tượng literal.
  • Xác định và tạo ra một đối tượng duy nhất, với từ khóa mới.
  • Xác định một đối tượng constructor, và sau đó tạo ra các đối tượng của các loại constructed.

Sử dụng một Object Literal

Đây là cách dễ dàng nhất để tạo một đối tượng JavaScript.

Sử dụng một đối tượng chữ, bạn vừa xác định và tạo ra một đối tượng trong một câu lệnh.

Một đối tượng literal là một danh sách tên: cặp giá trị (như tuổi: 50) bên trong dấu ngoặc nhọn {}.

Ví dụ: tạo một đối tượng khachhang mới với bốn thuộc tính:

        var khachhang = {firstName:"Lê", lastName:"Trung", age:25, eyeColor:"black"};
    
Xem ví dụ »

Sử dụng từ khoá new

Ví dụ: tạo một đối tượng khachhang mới với bốn thuộc tính:

        var khachhang = new Object();
            khachhang.firstName = "Lê";
            khachhang.lastName = "Trung";
            khachhang.age = 25;
            khachhang.eyeColor = "black";
    
Xem ví dụ »

Sử dụng một đối tượng Constructor

Đôi khi chúng ta muốn có một "loại đối tượng" có thể được sử dụng để tạo ra nhiều đối tượng của một loại.

Ví dụ:

        function khachhang(first, last, age, eye) {
            this.firstName = first;
            this.lastName = last;
            this.age = age;
            this.eyeColor = eye;
        }
        var khachhang1 = new khachhang("John", "Doe", 25, "blue");
        var khachhang2 = new khachhang("Sally", "Rally", 26, "green");
    
Xem ví dụ »

Cách khai báo thuộc tính (Property) của đối tượng

Để khai báo thuộc tính của đối tượng, ta sử dụng cú pháp tên thuộc tính : giá trị thuộc tính

Ví dụ: tạo một đối tượng khachhang mới với ba thuộc tính:

        var khachhang = {
            firstName:"Lê ",
            lastName:"Trung",
            age:25
        };
    

Cách khai báo phương thức (Method) của đối tượng

Để khai báo phương thức của đối tượng, ta sử dụng cú pháp tên phương thức : function(){Các câu lệnh JavaScript}

Đối tượng khachhang dưới đây có:

  • Hai thuộc tính là: firstName, lastName
  • Hai phương thức là: show_firstName, show_lastName
        var khachhang = {
            firstName:"Lê",
            lastName:"Trung",
            show_firstName:function(){
                return ("Họ của anh ấy là: " + this.firstName);
            },
            show_lastName:function(){
                return ("Tên của anh ấy là: " + this.lastName);
            }
        };
    

4. Cách truy cập giá trị của đối tượng(Object) trong Javascript

Cách truy cập giá trị thuộc tính của đối tượng

Cú pháp để truy cập vào thuộc tính của một đối tượng:

        objectName.property          // khachhang.age
        or
        objectName["property"]       // khachhang["age"]
        or
        objectName[expression]       // x = "age"; khachhang[x]
    

Ví dụ: Truy cập giá trị của thuộc tính firstNamelastName của đối tượng khachhang

        var khachhang = {firstName:"Lê", lastName:"Trung"};
        document.getElementById("firstName").innerHTML = khachhang.firstName;
        document.getElementById("lastName").innerHTML = khachhang["lastName"];
    
Xem ví dụ »

Cách thực thi phương thức của đối tượng

Để thực thi phương thức của đối tượng, ta sử dụng cú pháp tên đối tượng.tên phương thức()

Ví dụ: Thực thi phương thức show_info của đối tượng khachhang

        var khachhang = {
            firstName:"Lê",
            lastName:"Trung",
            age: 25,
            phone: 012223175989,
            show_info:function(){
                return ("Khách hàng: " + this.firstName + " " + this.lastName + ". Tuổi: " + this.age + ". Số điện thoại: " + this.phone);
            }
        };

        document.getElementById("info").innerHTML = khachhang.show_info();
    
Xem ví dụ »