每日挑战，从Javascript面试题目了解一些你可能忽略的概念 - Day16

tags: `ItIron2021` `Javascript`

前言

昨天我们用了最~简单的层面讲解了什麽是this，是的，那只是很基本的解释，足够你应付面试的题目但我还是会建议多下一点功夫了解! 今天我们就针对this来做个简单的应用题目吧!

本日题目与解释

请解释call, bind & apply的差异

防雷防雷，我英要出第三部剧场版罗~!

thinking-day16

还记得我们昨天有谈过有几种常见的情况会改变this的指向吗? 这就是最为常见的一种了，实际上这个问题并不困难，他们三种都是呼叫函数的方法，只是透过这三种方法呼叫函数时你可以改变该函数中this的指向而已。

我们一般会分成两组讨论，call & apply一组，bind自己一组，先看比较简单的吧!

call & apply

call & apply在使用上基本上是完全相同的，唯一的差别在於传入参数的方法不同

call传入参数时需要一个一个传，apply则是以阵列方式传入参数，我们一样看个简单的例子吧!

const obj= {name: 'Danny'}

function greet(a, b) {
  return `${a}, ${this.name}, ${b}`
}

console.log(greet.call(obj,'Hello','How are you?'))
console.log(greet.apply(obj,['Hello','How are you?']))

// 两者输出结果会完全相同

Hello, Danny, How are you?

上方的例子你可以看到，两个方法接收的第一个参数都是你想让呼叫的函数this指向谁，第二个参数之後则是你要传入该函数的参数，apply以阵列的方式接收传入的参数，两者的差别仅此而已!

你可能会觉得call有点眼熟，没错，我们当时在谈论如何检查变数型别的问题时祭出的最後杀招就是呼叫挂在Object下方的toString方法!

Object.prototype.toString.call([]) // '[object Array]'

bind

接着就是边缘人bind，他与前两者不同，并不是直接呼叫函数，而是回传一个绑定好this的函数，以上面的例子来看，用bind改写就会是下方的写法。

const obj= {name: 'Danny'}

function greet(a, b) {
  return `${a}, ${this.name}, ${b}`
}

const bound = greet.bind(obj)

console.log(bound('Hello', 'How are you?'))

// 还是那个输出结果

Hello, Danny, How are you?

需要注意的是，一旦被绑订过的函数(以上方的范例来说就是greet函数)，後续你再做其他的绑定就会完全无效，具体的原因请参考本日的参考文章! 除此之外，这三者的差别是不是很简单就能讲出来呢?