Vay mượn Phương thức trong JavaScript

Trong bài học JavaScript này, bạn sẽ học cách vay mượn phương thức từ các đối tượng hiện có trong JavaScript.

1. Vay mượn phương thức từ đối tượng

Trong JavaScript, bạn có thể mượn các phương thức từ các đối tượng khác để xây dựng một số chức năng mà không cần kế thừa tất cả các thuộc tính và phương thức của chúng.

JavaScript cung cấp hai phương thức cho tất cả các đối tượng hàm, call() và apply(), cho phép một hàm được gọi như thể nó là một phương thức của một đối tượng khác.

Đây là một ví dụ:

// Đối tượng A
var sinhVienA = {
    ten: "A",
    chao: function(xinChao) {
        console.log(xinChao + " " + this.ten);
    }
}

sinhVienA.chao("Xin chào"); // Kết quả: Xin chào A

// Đối tượng B
var sinhVienB = {
    ten: "B"
}

// Đối tượng B không có phương thức chao
// Nhưng có thể mượn từ đối tượng A

sinhVienA.chao.call(sinhVienB, "Hế lô"); // Kết quả: Hế lô B

Đơn giản thôi phải không? :D

2. Sự khác biệt giữa call() và apply()

Cú pháp của phương thức apply() gần giống với call(), điểm khác biệt duy nhất là, phương thức call() nhận danh sách các đối số như call(thisObj, arg1, arg2, ...).

Trong khi phương thức apply() nhận một mảng đối số như apply(thisObj, [argsArray]).

Lưu ý: Sử dụng dấu ngoặc vuông ([]) ở đây biểu thị một mảng các tham số, ở dòng cuối cùng của ví dụ sau:

// Đối tượng A
var sinhVienA = {
    ten: "A",
    chao: function(xinChao) {
        console.log(xinChao + " " + this.ten);
    }
}

sinhVienA.chao("Xin chào"); // Kết quả: Xin chào A

// Đối tượng B
var sinhVienB = {
    ten: "B"
}

// Đối tượng B không có phương thức chao
// Nhưng có thể mượn từ đối tượng A

sinhVienA.chao.apply(sinhVienB, ["Hế lô"]); // Kết quả: Hế lô B

3. Sử dụng phương thức tích hợp sẵn

Phương thức apply() cũng cho phép bạn sử dụng các phương thức tích hợp sẵn để thực hiện một số tác vụ một cách nhanh chóng và dễ dàng hơn.

Một ví dụ như vậy là sử dụng phương thức Math.max() / Math.min() để tìm ra giá trị lớn nhất hoặc nhỏ nhất trong một mảng, nếu không sẽ yêu cầu lặp lại các giá trị của mảng.

Như bạn đã biết từ các chương trước, mảng JavaScript không có phương thức max(), nhưng trong đối tượng Math thì có, vì vậy chúng ta có thể áp dụng phương thức Math.max(), như sau:

var mangSo = [2, 5, 6, 4, 3, 7];

// Sử dụng Math.max.apply()
var max = Math.max.apply(null, mangSo);
console.log(max); // Kết quả: 7

Lưu ý: Đối số đầu tiên cho cả call() và apply() là đối tượng mà hàm sẽ được gọi. Sử dụng null làm đối số đầu tiên giống như việc gọi hàm mà không cung cấp bất kỳ đối tượng nào cho con trỏ this bên trong hàm.

Hoặc bạn có thể sử dụng cách khác.

Toán tử Spread trong ES6 cung cấp một cách ngắn hơn để lấy giá trị lớn nhất hoặc nhỏ nhất từ ​​một mảng mà không cần sử dụng phương thức apply().

Đây là một ví dụ:

var mangSo = [2, 5, 6, 4, 3, 7];

// Sử dụng kết hợp toán tử Spread
var max = Math.max.apply(...mangSo);
console.log(max); // Kết quả: 7

Tuy nhiên, cả toán tử spread (...) và apply() sẽ không thành công hoặc trả về kết quả không chính xác nếu mảng có quá nhiều phần tử (ví dụ: hàng chục nghìn).

Trong trường hợp đó, bạn có thể sử dụng phương thức Array.reduce() để tìm giá trị lớn nhất hoặc nhỏ nhất trong một mảng số, bằng cách so sánh từng giá trị, như sau:

var mangSo = [2, 5, 6, 4, 3, 7];

// Sử dụng phương thức reduce
var max = mangSo.reduce(function(a, b) {
    return Math.max(a, b);
});
console.log(max); // Kết quả: 7

Như vậy, trong bài này bạn đã học được cách vay mượn phương thức JavaScript từ đối tượng khác cũng như cách sử dụng các phương thức được tích hợp sẵn để tối ưu hóa công việc của mình.

Nếu bạn yêu thích lập trình, đặc biệt là lập trình web thì hãy chọn HỌC LẬP TRÌNH WEB (Full Stack) để học đầy đủ bộ công nghệ lập trình web hiện đại nhất.