Quartz 🪬

call Method in JS

3 min read

Phương thức call tương tự với bind Method in JS, nó có mặt ở tất cả các hàm. Khi chúng ta gọi hàm bằng toán tử (), JS Engine sẽ gọi đến phương thức call để thực thi hàm.

Call a Function

Phương thức call có tác dụng dùng để gọi một hàm:

function startCoding() {
  console.log("Hello World")
}
 
startCoding() // Hello World
startCoding.call() // Hello World

Binding ‘this’ Keyword

Phương thức này cũng ràng buộc từ khóa this, tương tự như phương thức bind, trước quá trình gọi hàm:

const charmander = {
  name: "Charmander",
 
  getName() {
    console.log(this.name)
  },
}
 
const bulbasaur = {
  name: "Bulbasaur",
}
 
charmander.getName() // 'Charmander'
charmander.getName.call() // empty
charmander.getName.call(charmander) // 'Charmander'
charmander.getName.call(bulbasaur) // 'Bulbasaur'

Điểm khác biệt giữa bind và call là call sẽ thực thi hàm sau khi từ khóa this được bind.

Function Borrowing

Kỹ thuật trong đoạn code trên có tên gọi là mượn hàm (function borrowing). Ta có thể ứng dụng kỹ thuật này để dùng các phương thức không sẵn có.

Ví dụ, một NodeList sẽ không có các phương thức như là map, reduce hay filter như mảng thông thường, ta có thể mượn từ lớp Array để sử dụng.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
const listItems = document.querySelectorAll("li")
 
const itemContents = Array.prototype.map.call(listItems, (listItem) => {
  return listItem.innerText
})
 
console.log(itemContents) // ['Item 1', 'Item 2', 'Item 3', 'Item 4']

Chúng ta có thể sử dụng toán tử rest (Rest Operator) để biến một object không phải mảng sang mảng, rồi từ đó gọi các phương thức mong muốn. Phương thức Array.from(object) cũng cho kết quả tương tự.

In Strict Mode

Ở trong strict mode, nếu từ khóa this được bind thông qua phương thức call, nó vẫn có thể sử dụng được, thay vì có giá trị là undefined.

Inheritance

Phương thức call có thể dùng để triển khai tính kế thừa (Inheritance) trong Object Oriented Programming.

Cụ thể, phương thức call giúp chúng ta gọi phương thức của lớp cơ sở, với this trỏ đến lớp dẫn xuất.

function Animal(name, weight) {
  this.name = name
  this.weight = weight
}
 
function Horse(name, weight, legs) {
  Animal.call(this, name, weight)
  this.legs = legs
}
 
const pony = new Horse("Little Pony", 40, 4)
 
console.log(pony) // Horse {name: 'Little Pony', weight: 40, legs: 4}

Summary

Cú pháp tổng quát: call(thisArg, args...)

  • Thực hiện bind từ khóa this với đối tượng thisArg truyền vào.
  • Có thực hiện gọi hàm.
  • Nếu có các tham số truyền vào args, các tham số này sẽ được truyền vào hàm gốc.