Phương thức của object trong JavaScript

Nguyên nhân:

• getBrand chỉ lưu tham chiếu đến hàm, không lưu thông tin về Object car.
• Khi gọi getBrand(), this không còn trỏ đến car, mà trỏ đến window (global object).

Cách khắc phục: Dùng bind() để cố định this.

let getBrand = car.showBrand.bind(car);
getBrand(); // Output: Toyota

Lỗi 2: this bị thay đổi trong callback function

let person = {
    name: "Alice",
    greet() {
        setTimeout(function () {
            console.log(this.name);
        }, 1000);
    }
};

person.greet(); // Output: undefined

Cách khắc phục: Dùng arrow function để giữ nguyên giá trị của this.

let person = {
    name: "Alice",
    greet() {
        setTimeout(() => {
            console.log(this.name);
        }, 1000);
    }
};

person.greet(); // Output: Alice

Lỗi 3: this bị thay đổi khi sử dụng phương thức trong một sự kiện

let button = document.querySelector("button");

let user = {
    name: "Charlie",
    showName() {
        button.addEventListener("click", function () {
            console.log(this.name); // undefined
        });
    }
};

user.showName();

Nguyên nhân:

• Trong trình xử lý sự kiện (event handler), this trỏ đến phần tử HTML (button), không phải user.

Cách khắc phục: Dùng arrow function hoặc bind().

let user = {
    name: "Charlie",
    showName() {
        button.addEventListener("click", () => {
            console.log(this.name);
        });
    }
};

user.showName(); // Output: Charlie

Arrow function không có this riêng, nên nó giữ this từ phạm vi cha (user).

Kiến thức quan trọng về this trong phương thức Object

Quy tắc chung của this trong Object:

Các phương thức hữu ích trong Object JavaScript

JavaScript cung cấp nhiều phương thức hữu ích để thao tác với Object. Dưới đây là một số phương thức quan trọng giúp bạn sao chép, truy xuất và kiểm tra thuộc tính của Object một cách hiệu quả.

Object.assign() – Sao chép thuộc tính từ Object này sang Object khác

Phương thức Object.assign(target, ...sources) dùng để sao chép các thuộc tính của một hoặc nhiều Object nguồn vào Object đích.

Cú pháp:

Object.assign(target, source1, source2, ...);

• target: Object đích (có thể là Object rỗng {} hoặc một Object có sẵn).
• source1, source2, ...: Các Object nguồn có thuộc tính cần sao chép.

let obj1 = { a: 1, b: 2 };
let obj2 = { b: 3, c: 4 };

let mergedObj = Object.assign({}, obj1, obj2);
console.log(mergedObj); // Output: { a: 1, b: 3, c: 4 }

Lưu ý:

• Thuộc tính trùng nhau sẽ bị ghi đè bởi Object sau cùng (b: 2 bị ghi đè bởi b: 3).
• Object.assign() chỉ thực hiện sao chép nông (shallow copy), nghĩa là nếu một thuộc tính chứa Object con, nó vẫn tham chiếu đến Object cũ.

Sao chép nông và vấn đề tham chiếu:

let obj1 = { a: 1, b: { x: 10 } };
let obj2 = Object.assign({}, obj1);

obj2.b.x = 99;
console.log(obj1.b.x); // Output: 99 (vì tham chiếu đến cùng một Object con)

Giải pháp: Dùng structuredClone() hoặc thư viện Lodash.cloneDeep() để sao chép sâu.

Object.keys() – Lấy danh sách các key của Object

Phương thức Object.keys(obj) trả về một mảng chứa tất cả các key (tên thuộc tính) của Object.

Object.keys(object);

Ví dụ:

let person = { name: "Alice", age: 25, city: "Hanoi" };

console.log(Object.keys(person)); 
// Output: ["name", "age", "city"]

Ứng dụng:

• Dùng để lặp qua Object bằng forEach() hoặc map().
• Kiểm tra xem Object có rỗng không bằng Object.keys(obj).length === 0.

Kiểm tra Object có rỗng không

let obj = {};
console.log(Object.keys(obj).length === 0); // Output: true

Object.values() – Lấy danh sách các value của Object

Phương thức Object.values(obj) trả về một mảng chứa các giá trị của thuộc tính trong Object.

Cú pháp:

Object.values(object);

Ví dụ:

let person = { name: "Alice", age: 25, city: "Hanoi" };

console.log(Object.values(person)); 
// Output: ["Alice", 25, "Hanoi"]

Ứng dụng:

• Duyệt qua các giá trị của Object mà không cần biết key.
• Tổng hợp dữ liệu từ Object.

Object.entries() – Chuyển Object thành mảng các cặp [key, value]

Phương thức Object.entries(obj) trả về một mảng chứa các cặp [key, value], mỗi phần tử là một mảng con có 2 phần tử: key và value.

Object.entries(object);

Ví dụ:

let person = { name: "Alice", age: 25, city: "Hanoi" };

console.log(Object.entries(person)); 
// Output: [["name", "Alice"], ["age", 25], ["city", "Hanoi"]]

Ứng dụng:

Dùng forEach() để lặp qua các cặp [key, value].

Object.entries(person).forEach(([key, value]) => {
    console.log(`${key}: ${value}`);
});
// Output:
// name: Alice
// age: 25
// city: Hanoi

• Chuyển đổi Object thành Map (new Map(Object.entries(obj))).

Object.hasOwnProperty() – Kiểm tra Object có thuộc tính cụ thể không

Phương thức Object.hasOwnProperty(prop) kiểm tra xem một Object có chứa một thuộc tính cụ thể hay không.

object.hasOwnProperty(property);

Ví dụ:

let person = { name: "Alice", age: 25 };

console.log(person.hasOwnProperty("name"));  // Output: true
console.log(person.hasOwnProperty("city"));  // Output: false

Ứng dụng:

• Kiểm tra một thuộc tính có tồn tại trong Object hay không trước khi truy xuất nó.
• Tránh lỗi khi truy xuất thuộc tính không tồn tại.

Lưu ý:

• hasOwnProperty() chỉ kiểm tra các thuộc tính riêng của Object, không kiểm tra thuộc tính kế thừa từ prototype.

Phương thức Getter và Setter trong Object JavaScript

JavaScript cung cấp getter và setter để giúp truy xuất và cập nhật dữ liệu trong Object một cách linh hoạt và bảo mật hơn.

Định nghĩa Getter và Setter trong Object

• Getter (get): Là một phương thức trong Object dùng để lấy giá trị của thuộc tính, nhưng hoạt động như một thuộc tính thông thường khi truy xuất.
• Setter (set): Là một phương thức trong Object dùng để cập nhật giá trị của thuộc tính, có thể bao gồm các quy tắc kiểm tra dữ liệu đầu vào.

Tóm gọn:

• Getter giúp lấy giá trị mà không cần gọi như hàm.
• Setter giúp thay đổi giá trị và có thể kèm theo kiểm tra hợp lệ.

Cách sử dụng get để truy xuất dữ liệu từ Object

Cú pháp của get:

let object = {
    get propertyName() {
        return value;
    }
};

• Khi gọi object.propertyName, phương thức get sẽ được thực thi như một thuộc tính.

Ví dụ:

let person = {
    firstName: "Alice",
    lastName: "Nguyen",
    
    get fullName() {
        return `${this.firstName} ${this.lastName}`;
    }
};

console.log(person.fullName); 
// Output: Alice Nguyen

Điểm nổi bật:

• Không cần gọi fullName() như một hàm.
• get giúp tạo thuộc tính động mà không cần lưu sẵn giá trị.

Cách sử dụng set để thay đổi dữ liệu trong Object

Cú pháp của set:

let object = {
    set propertyName(value) {
        // Xử lý khi gán giá trị
    }
};

• Khi gán object.propertyName = newValue, phương thức set sẽ được kích hoạt.

let person = {
    firstName: "Alice",
    lastName: "Nguyen",
    
    set fullName(name) {
        let parts = name.split(" ");
        this.firstName = parts[0];
        this.lastName = parts[1];
    }
};

person.fullName = "Bob Tran";
console.log(person.firstName); // Output: Bob
console.log(person.lastName);  // Output: Tran

Lợi ích của set:

• Có thể thực hiện xử lý dữ liệu trước khi gán (ví dụ: tách họ và tên).
• Giúp bảo vệ dữ liệu bằng cách kiểm tra giá trị đầu vào.

Ví dụ minh họa Getter và Setter

Ví dụ 1: Kiểm tra dữ liệu đầu vào với set

let user = {
    _age: 0, // Thuộc tính ẩn (quy ước bắt đầu bằng "_")
    
    get age() {
        return this._age;
    },
    
    set age(value) {
        if (value < 0) {
            console.log("Tuổi không hợp lệ!");
        } else {
            this._age = value;
        }
    }
};

user.age = 25;  
console.log(user.age); // Output: 25

user.age = -5;  // Output: Tuổi không hợp lệ!

Điểm nổi bật:

• Thuộc tính _age chỉ có thể được thay đổi qua set age().
• Ngăn chặn gán giá trị không hợp lệ (tuổi không thể âm).

Ví dụ 2: Tự động tính toán giá trị với get

let rectangle = {
    width: 10,
    height: 5,

    get area() {
        return this.width * this.height;
    }
};

console.log(rectangle.area); // Output: 50

Ứng dụng thực tế:

• Dùng get để tính toán giá trị động mà không cần tạo biến trung gian.

Ví dụ 3: Kết hợp get và set trong Class

Getter và Setter cũng hoạt động trong Class.

class Product {
    constructor(name, price) {
        this.name = name;
        this._price = price; // Biến private
    }

    get price() {
        return `${this._price} USD`;
    }

    set price(value) {
        if (value < 0) {
            console.log("Giá sản phẩm không hợp lệ!");
        } else {
            this._price = value;
        }
    }
}

let laptop = new Product("MacBook", 1500);
console.log(laptop.price); // Output: 1500 USD

laptop.price = -100;  // Output: Giá sản phẩm không hợp lệ!
laptop.price = 1200;
console.log(laptop.price); // Output: 1200 USD

Kết quả 1:

Ứng dụng thực tế:

• get price() đảm bảo giá được hiển thị kèm đơn vị tiền tệ.
• set price(value) giúp kiểm tra giá không âm.

Kết bài

Phương thức trong Object là một phần quan trọng của JavaScript, giúp tổ chức và thao tác dữ liệu hiệu quả. Việc hiểu rõ cách khai báo, gọi phương thức cũng như cách xử lý các vấn đề liên quan đến this, lỗi thường gặp sẽ giúp lập trình viên viết mã nguồn sạch, dễ bảo trì và tối ưu hơn.

Ngoài ra, phương thức còn đóng vai trò quan trọng trong lập trình hướng đối tượng (OOP), giúp xây dựng các mô hình dữ liệu linh hoạt, dễ mở rộng. Nắm vững kiến thức về phương thức Object sẽ giúp bạn làm chủ JavaScript, từ xử lý dữ liệu đơn giản đến phát triển các ứng dụng phức tạp.