Giới Thiệu Về call() và apply() trong JavaScript

Trong JavaScript call() và apply() là hai method có thể được sử dụng với bất cứ hàm nào. Nói cách khác khi bạn khai báo một hàm thì hai method này sẽ tự được thêm vào.

function.call()

Hãy xem một ví dụ sử dụng call() sau:

var intro = function() {
    console.log("Tên tôi là " + this.name);
};

var john = {name: "John"};
var peter = {name: "Peter"};

intro.call(john); // Tên tôi là John
intro.call(peter); // Tên tôi là Peter

Trong hàm intro() ở trên chúng ta sử dụng thuộc tính name từ biến this. Giá trị của biến this phụ thuộc vào đối tượng được truyền vào khi gọi method call().

Điều gì xảy ra khi bạn gọi hàm intro() như một hàm bình thường:

intro();

Lúc này this sẽ có giá trị là Window và vì chúng ta chưa khai báo biến Windowname hay đơn giản name nên this.name lúc này có giá trị là undefined. Bạn có thể thay đổi intro một chút để thấy rõ điều này:

var intro = function() {
    console.log(this);
    console.log(this.name);
};

intro();
// Sẽ hiển thị kết quả như hai dòng dưới đây:
// Window {stop: function, open: function, alert: function, confirm: function, prompt: function…}
// undefined

Bây giờ:

Window.name = "Test"; // Hoặc tương tự: var name = "Test";
var intro = function() {
    console.log(this);
    console.log(this.name);
};

intro();
// Sẽ hiển thị kết quả như hai dòng dưới đây:
// Window {stop: function, open: function, alert: function, confirm: function, prompt: function…}
// Test

Ngoài ra bạn có thể truyền vào đối cho call():

var intro = function(prefix) {
    console.log(prefix + this.name);
};

var john = {name: "John"};
intro.call(john, "Hello, my name is ");

function.apply()

Method apply cũng có thể được sử dụng tương tự như call():

var intro = function() {
    console.log("Tên tôi là " + this.name);
};

var john = {name: "John"};
var peter = {name: "Peter"};

intro.apply(john); // Tên tôi là John

Khi sử dụng đối số cho apply() chúng ta sẽ truyền vào theo dạng array:

var update = function(age, gender) {
    this.age = age;
    this.gender = gender;
};

var john = {name: "John", age: 20};

update.apply (john, [22, "male"]);

Lúc này sau khi gọi apply ở trên thì biến john sẽ có giá trị:

{name: "John", age: 22, gender: "male"}

Method apply() còn có thể cho phép chúng ta gọi hàm JavaScript một cách linh động. Hãy xem một ví dụ sau sử dụng method apply() để có thể gọi hàm với tên hàm được truyền vào một cách linh động:

var intro = function(prefix) {
    console.log(prefix + this.name);
};
var update = function(age, gender) {
    this.age = age;
    this.gender = gender;
};

var dynamicCall = function (methodName, object, arguments) {
    methodName.apply(object, arguments);
}

var john = {name: "John"};

dynamicCall("intro", john, ["Xin chào, tên tôi là "]);
dynamicCall("update", john, [20, "male"]);

Ở trên trong hàm dynamicCall chúng ta gọi apply() dựa trên giá trị truyền vào cho tham số đầu tiên methodName và method này sẽ gọi ứng dụng (apply) với giá trị truyền vào cho tham số object. Cuối cùng bạn chú ý giá trị đối số truyền vào cho arguments có thể là một array với giá trị linh độn phụ thộc vào methodName và objectt truyền vào.