1. Apply trong JavaScript là gì?

Apply là một phương thức trong Js và nó cũng tương tự như phương thức call . Các bạn có thể xem lại bài Call trong JavaScript để biết rõ hơn nhé.

Với phương thức apply ta có thể viết một phương thức có thể được sử dụng trên các đối tượng khác nhau.

Ví dụ

Phương thức fullName của person được áp dụng trên person1 :

<script>
const person = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}

const person1 = {
  firstName:"Thành",
  lastName: "Nguyễn"
}

document.write(person.fullName.apply(person1)); 
</script>

Phương thức Function.prototype.apply() cho phép bạn gọi một hàm với giá trị this đã cho và các đối số được cung cấp dưới dạng một mảng.

Cú pháp

fn.apply(thisArg, [args]);

Trong đó, phương thức apply() chấp nhận hai đối số:

thisArg là giá trị của giá trị this được cung cấp cho lệnh gọi hàm fn .
Đối số args là một mảng xác định các đối số của hàm fn. Kể từ ES5, đối số args có thể là một đối tượng giống mảng hoặc đối tượng mảng.

2. Sự khác nhau giữa Call và Apply trong JavaScript

Phương thức call() sẽ nhận các đối số riêng lẻ. Còn với apply() sẽ nhận đối số dưới dạng một mảng. Phương thức apply() rất tiện dụng nếu bạn muốn sử dụng một mảng thay vì một danh sách đối số.
Ví dụ:

obj.mMethod.apply(obj1, {'length': 2, '0': "xxx", '1': "yyy"}) // Hello xxx yyy

3. Phương thức Apply với các đối số

Phương thức apply() chấp nhận các đối số trong một mảng.

Ví dụ:

<script>
const person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}

const person1 = {
  firstName:"Thành",
  lastName: "Nguyễn"
}

document.write(person.fullName.apply(person1, ["Ba Vì", "Hà Nội"])); 
</script>

So với call() khi các đối số riêng lẻ được truyền vào

<script>
const person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}

const person1 = {
  firstName:"Thành",
  lastName: "Nguyễn"
}

const person2 = {
  firstName:"Nam",
  lastName: "Chu"
}

document.write(person.fullName.call(person1, "Ba Vì", "Hà Nội")); 
</script>

4. Phương thức apply mô phỏng tìm số lớn nhất trên mảng

Ta có thể tìm số lớn nhất (trong danh sách các số) bằng phương pháp Math.max() :

<script>
document.write(Math.max(1,2,3));
</script>

Vì các mảng Js không có phương thức max() nên bạn có thể áp dụng phương thức Math.max() để thay thế.

<script>
document.write(Math.max.apply(null, [1,2,3])); 
</script>

Đối số đầu tiên (null) không quan trọng. Nó không được sử dụng trong ví dụ này. Những ví dụ này sẽ cho cùng một kết quả:

<script>
document.write(Math.max.apply(Math, [1,2,3])); 
</script>

<script>
document.write(Math.max.apply(" ", [1,2,3])); 
</script>

<script>
document.write(Math.max.apply(0, [1,2,3])); 
</script>

5. Sử dụng phương thức apply() để mượn hàm

Phương thức apply() cho phép một đối tượng mượn phương thức của một đối tượng khác mà không cần sao chép code. Giả sử rằng bạn có đối tượng lapTop sau:

const lapTop = {
    name: "Macbook",
    isOn: false,
    turnOn() {
        this.isOn = true;
        return `${this.name} đang mở`;
    },
    turnOff() {
        this.isOn = false;
        return `${this.name} đang tắt`;
    }
};

Và đối tượng mobile như sau:

const mobile = {
    name: "iPhone",
    isOn: false
};

Đối tượng mobile không có phương thức turnOn() và turnOff() . Nhưng bây giờ, với phương thức apply() bạn cũng có thể mượn được hai phương thức trên của đối tượng lapTop , ví dụ:

let ketQua = lapTop.turnOn.apply(mobile);

document.write(ketQua);

Như bạn thấy, ta có thể mượn được phương thức turnOn() của đối tượng lapTop mà không cần sao chép code. Tương tự, gọi phương thức turnOff() trên đối tượng mobile :

let ketQua = lapTop.turnOff.apply(mobile);