Easier Way to Understand apply and call in JS

The first time I know apply was when I met this code:

Math.max.apply(null, [1, 2, 3, 4])

As the mdn shows, the syntax is:

function.apply( thisArg , [argsArray] )

Actually, in case above, thisArg has no influence which means code below also works:

Math.max.apply(undefined, [1, 2, 3, 4])
Math.max.apply(Math, [1, 2, 3, 4])

The only effect of apply in the code above is that it can pass the values in array to the function max. So, code above equal

Math.max(1, 2, 3, 4)

Why would I mention this? Because we don’t need this anymore because we already have ... which works like:

Math.max(...[1, 2, 3, 4])

The reason that we still need apply and call is the thisArg. They can help us call some powerful methods.

thisArg in apply and call

I guess you might have seen this code:

Array.prototype.slice.call({ length: 2 })
function fn() {
  console.log(Array.prototype.slice.call(arguments))
}
fn(1, 2, 3, 4) //[1,2,3,4]

Today, we don’t need this either because of Array.from. But I still want to talk about it for explanation. In the case above, call was used because we want to do something like:

let obj = { length: 2 }
obj.slice() //Uncaught TypeError: obj.slice is not a function

It would cause error because slice was defined in Array.prototype. Only Array instance can call that method. But actually in the implementation of slice, it doesn’t need to be called by Array instance and there is a lot of methods like this. So, in this case, call or apply would let non Array instance call these methods which means

Array.prototype.slice.call({ length: 2 })
//works like something like this
let obj = { length: 2 }
obj.slice = Array.prototype.slice
obj.slice()

And to help it easier to understand , you can remember it like:

method.call(thisArg, ...args)
//works like in most cases
thisArg.method = method
// or this way, if thisArg is a primitive value
Object.getPrototypeOf(thisArg).method = method
thisArg.method(...args)
//for apply
method.apply(thisArg, args)
//works like in most cases
thisArg.method = method
// or this way
Object.getPrototypeOf(thisArg).method = method
thisArg.method(...args)

Wasn’t that easy ?

So, let get back to Math.max.apply({}, [1, 2, 3, 4]). You can remember it like:

let thisArg = {}
thisArg.max = Math.max
thisArg.max(...[1, 2, 3, 4])

And more cases:

Object.prototype.toString.call([]) //"[object Array]"
//works like this
let thisArg = []
thisArg.toString = Object.prototype.toString
thisArg.toString() //"[object Array]"
//while
[].toString()//""

Or

;[' sd ', 1, 3].map(Function.prototype.call, String.prototype.trim) //['sd','1','3']
//works like
;[' sd ', 1, 3].map(function(...args) {
  return String.prototype.trim.call(...args)
})
//works like
;[' sd ', 1, 3].map(function(...args) {
  let thisArg = args[0]
  thisArg.trim = String.prototype.trim
  // way above wouldn't work because thisArg is a Primitive value, so we use way below instead.
  Object.getPrototypeOf(thisArg).trim = String.prototype.trim
  return thisArg.trim(...args.slice(1))
})

More in apply

As apply can accept an array-like object. So, what would happen if coding like:

Array.apply(null, { length: 2 })

Actually, it equals

Array.apply(null, [undefined, undefined])

So, you can understand it like:

let thisArg = {} //set null would get error in code below, also thisArg in above case is not important
thisArg.Array = Array
thisArg.Array(undefined, undefined)

Function.prototype.call.apply

You might have seen code using Function.prototype.call.apply which seems a little weird. However, it still make sense, especially in ES5. For example,

var arrayLike = { 0: 0, length: 1 }
Function.prototype.call.apply([].push, [arrayLike, 1])
console.log(arrayLike) //{0: 0, 1: 1, length: 2}

which works like

let arrayLike = { 0: 0, length: 1 }
let thisArg = [].push
thisArg.call(arrayLike, 1)
console.log(arrayLike) //{0: 0, 1: 1, length: 2}

also equal

let arrayLike = { 0: 0, length: 1 }
[].push.call(arrayLike,1)
console.log(arrayLike) //{0: 0, 1: 1, length: 2}

which works like

let arrayLike = { 0: 0, length: 1 }
let thisArg = arrayLike
thisArg.push = [].push
thisArg.push(1)
console.log(arrayLike) //{0: 0, 1: 1, length: 2}

Hope it's easier to understand `apply` and `call`.

[**Original Post**](https://github.com/xianshenglu/blog/issues/50)