Sự khác biệt giữa call(), apply() và bind() là gì?

Cả ba đều đặt this một cách tường minh, khác nhau ở cách truyền tham số và thời điểm gọi.

javascript

function greet(greeting, mark) {
  return `${greeting}, ${this.name}${mark}`
}
const user = { name: 'Định' }

greet.call(user, 'Chào', '!')      // gọi NGAY, tham số rời
greet.apply(user, ['Chào', '!'])   // gọi NGAY, tham số dạng MẢNG
const hi = greet.bind(user, 'Chào') // TRẢ HÀM MỚI, this cố định
hi('!')                             // 'Chào, Định!'

	Gọi ngay	Tham số	Trả về
`call`	có	rời từng cái	kết quả hàm
`apply`	có	một mảng	kết quả hàm
`bind`	không	rời (partial được)	hàm mới

Mẹo nhớ: apply = array.

Dùng ở đâu trong thực tế:

javascript

// bind: truyền method làm callback mà không mất this
btn.addEventListener('click', obj.handle.bind(obj))

// call: mượn method của kiểu khác
Array.prototype.slice.call(arguments)
Object.prototype.toString.call([])   // '[object Array]' — cách kiểm tra kiểu chuẩn xác

// apply: truyền mảng vào hàm nhận nhiều tham số (nay dùng spread gọn hơn)
Math.max.apply(null, nums)
Math.max(...nums)                    // cách hiện đại

Lưu ý: bind chỉ có tác dụng một lần — hàm đã bind rồi thì bind tiếp không đổi được this nữa.

Và bind không dùng được với arrow function, vì arrow không có this riêng.

Xem toàn bộ JavaScript cùng filter theo level & chủ đề con.

Mở danh sách JavaScript

Cả ba đều đặt this một cách tường minh, khác nhau ở cách truyền tham số và thời điểm gọi.

javascript

function greet(greeting, mark) {
  return `${greeting}, ${this.name}${mark}`
}
const user = { name: 'Định' }

greet.call(user, 'Chào', '!')      // gọi NGAY, tham số rời
greet.apply(user, ['Chào', '!'])   // gọi NGAY, tham số dạng MẢNG
const hi = greet.bind(user, 'Chào') // TRẢ HÀM MỚI, this cố định
hi('!')                             // 'Chào, Định!'

	Gọi ngay	Tham số	Trả về
`call`	có	rời từng cái	kết quả hàm
`apply`	có	một mảng	kết quả hàm
`bind`	không	rời (partial được)	hàm mới

Mẹo nhớ: apply = array.

Dùng ở đâu trong thực tế:

javascript

// bind: truyền method làm callback mà không mất this
btn.addEventListener('click', obj.handle.bind(obj))

// call: mượn method của kiểu khác
Array.prototype.slice.call(arguments)
Object.prototype.toString.call([])   // '[object Array]' — cách kiểm tra kiểu chuẩn xác

// apply: truyền mảng vào hàm nhận nhiều tham số (nay dùng spread gọn hơn)
Math.max.apply(null, nums)
Math.max(...nums)                    // cách hiện đại

Lưu ý: bind chỉ có tác dụng một lần — hàm đã bind rồi thì bind tiếp không đổi được this nữa.

Và bind không dùng được với arrow function, vì arrow không có this riêng.