Bind vs Apply vs Call

February 07, 2022

  • javascript
有任何問題,我能幫上忙的話都能到 github 發 issue 問我。

When to use

  1. Use .bind when you want that function to later be called with a certain context, useful in events.
  2. Use .call or .apply when you want to invoke the function immediately, and modify the context.


The call() method calls a function with a given this value and arguments provided individually.

Important: When to use call -> Have to correctly assign this situation.

Syntax, arg1, arg2..., argN);
  • thisArg - Optional

    The value to use as this when calling func.

  • arg1, arg2…, argN - Optional

    Arguments for the function.


const person = {
  fullName: function (city, country) {
    return `${this.firstName} ${this.lastName} ${city} ${country}`

const person1 = {
  firstName: "John",
  lastName: "Doe",

const person2 = {
  firstName: "Mary",
  lastName: "Doe",
}, "Oslo", "Norway")


The apply() method calls a function with a given this value, and arguments provided as an array or an array-like object.

Important: When to use apply instead of using call -> you have dynamic args.


fn.apply(thisArg, [argsArray])
  • thisArg - Required

    The value to use as this when calling func.

  • argsArray - Optional

    Must be an array-like object. Arguments for the function.


const numbers = [5, 6, 2, 3, 7]

const max = Math.max.apply(null, numbers)
const min = Math.min.apply(null, numbers)

console.log(max) // 7
console.log(min) // 2

Different with call

const arr = [1, 2, 3]

function add() {
  // arguments -> represents the function args.
  return Array.from(arguments).reduce((acc, val) => {
    return acc + val

console.log(, 1, 2, 3)) // 6
console.log(add.apply(null, [1, 2, 3])) // 6


The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new functions is called.

Important: When to use bind -> Have to correctly assign this situation and use it later.

The bind() function creates a new bound function, which is an exotic function object (a term from ECMAScript 2015) that wraps the original function object. Calling the bound function generally results in the execution of its wrapped function.


fn.bind(thisArgs, arg1, arg2..., argN);
  • thisArg

    The value to use as this when calling func.

  • arg1, arg2, …argN - Optional

    Arguments to prepend to arguments provided to the bound function when invoking func.


const module = {
  x: 42,
  getX: function () {
    return this.x

const unboundGetX = module.getX
console.log(unboundGetX) // undefined

const boundGetX = unboundGetX.bind(module)

Bonus: Execute custom bind polyfill example

let obj = {
  name: "John",

let myFunc = function () {
  console.log( // 3. calling obj's name

Function.prototype.customBind = function (obj) {
  let _this = this
  return function () {
    _this.apply(obj) // 2. apply obj to current function

let newFunc = myFunc.customBind(obj) // 1. bind obj to function prototype
newFunc() // 'John'

Mayvis Chen
你好,我是 Mayvis Chen