# JavaScript 中的 call,apply 和 bind 方法

js 中的 call(), apply()和 bind()是 Function.prototype 下的方法，都是用于改变函数运行时上下文，最终的返回值是你调用的方法的返回值，若该方法没有返回值，则返回 undefined。这几个方法很好地体现了 js 函数式语言特性，在 js 中几乎每一次编写函数式语言风格的代码，都离不开 call 和 apply。

# apply

使用 apply， 你可以继承其他对象的方法：

注意这里 apply()的第一个参数可以是 null，在非严格模式下，第一个参数为 null 或者 undefined 时会自动替换为指向全局对象，apply()的第二个参数为数组或类数组。

# call

call()是 apply()的一颗语法糖，作用和 apply()一样，同样可实现继承，唯一的区别就在于 call()接收的是参数列表，而 apply()则接收参数数组。

# bind

bind()的作用与 call()和 apply()一样，都是可以改变函数运行时上下文，区别是 call()和 apply()在调用函数之后会立即执行，而 bind()方法调用并改变函数运行时上下文后，返回一个新的函数，供我们需要时再调用。

# 如何使用

• 如果不需要关心具体有多少参数被传入函数，选用 apply()；
• 如果确定函数可接收多少个参数，并且想一目了然表达形参和实参的对应关系，用 call()；
• 如果我们想要将来再调用方法，不需立即得到函数返回结果，则使用 bind();

# 总结

• call()、apply()和 bind()都是用来改变函数执行时的上下文，可借助它们实现继承；
• call()和 apply()唯一区别是参数不一样，call()是 apply()的语法糖；
• bind()是返回一个新函数，供以后调用，而 apply()和 call()是立即调用。

# 练习

var arr = [1, 2, 3]
var max = Function.prototype.apply.call(Math.max, null, arr)
console.log(max)

答案：3
解析：call 使得原函数转化为 Math.max.apply(undefined,arr) // Math.max 为 call 方法中 this 的指向

var a = Function.prototype.call.apply(
  function(a) {
    return a
  },
  [0, 4, 3]
)
alert(a)

答案：4
解析：(function(a){return a;}).call(0, 4, 3)，此时函数接受一个参数 a ，0 为此时 this 指向，即输出 4

# 手写实现 apply call 和 bind

# call 的实现

首先要满足两点要求

• 不传入第一个参数，那么上下文默认为 window
• 改变了 this 指向，让新的对象可以执行该函数，并能接受参数

Function.prototype.myCall = function(context) {
  if (typeof this !== 'function') {
    throw new TypeError('Error')
  }
  context = context || window
  context.fn = this
  const args = [...arguments].slice(1) // Array.prototype.slice.call(arguments,1)
  const result = context.fn(...args)
  delete context.fn
  return result
}

解析：

• 首先 context 为可选参数，如果不传的话默认上下文为 window
• 接下来给 context 创建一个 fn 属性，并将值设置为需要调用的函数
• 因为 call 可以传入多个参数作为调用函数的参数，所以需要将参数剥离出来
• 然后调用函数并将对象上的函数删除

# apply 的实现

Function.prototype.myApply = function(context) {
  if (typeof this !== 'function') {
    throw new TypeError('Error')
  }
  context = context || window
  context.fn = this
  let result
  if (arguments[1]) {
    result = context.fn(...arguments[1])
  } else {
    result = context.fn()
  }
  delete context.fn
  return result
}

# bind 的实现

Function.prototype.myApply = function(context) {
  if (typeof this !== 'function') {
    throw new TypeError('Error')
  }
  const args = [...arguments].slice(1) // 到这里与call一致
  const _this = this
  return function F() {
    if (this instanceof F) {
      return new _this(...args, ...arguments)
	}
	return _this.apply(context,args.concat(...arguments	))
  }
}