Bind vs Apply vs Call

February 07, 2022

  • javascript

若有任何問題或有錯誤都可以至我的 Blog 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.

Call

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

fn.call(thisArg, arg1, arg2..., argN);
  • thisArg - Optional

    The value to use as this when calling func.

  • arg1, arg2…, argN - Optional

    Arguments for the function.

Example

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",
}

person.fullName.call(person1, "Oslo", "Norway")

Apply

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.

Syntax

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.

Example

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(add.call(null, 1, 2, 3)) // 6
console.log(add.apply(null, [1, 2, 3])) // 6

Bind

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.

Syntax

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.

Example

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

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

const boundGetX = unboundGetX.bind(module)
console.log(boundGetX())

Bonus: Execute custom bind polyfill example

let obj = {
  name: "John",
}

let myFunc = function () {
  console.log(this.name) // 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
住在台北,會點前端,會點後端,熱愛分享新知及愛喝奶茶的全端打雜工程師。