JavaScript 中 apply、call、bind 区别与用法

apply() 方法调用一个具有给定this值的函数，以及作为一个数组（或类似数组对象）提供的参数。
call() 和 apply() 方法类似，区别就是 call() 方法接受的是参数列表，而 apply() 方法接受的是一个参数数组。

常用用法：

数组之间的追加；
获取数组中的最大值和最小值，利用他们扩充作用域拥有 Math 的 min 和 max 方法；由于没有什么对象调用这个方法，所以第一个参数可以写作 null 或者本身；

1
2
3

var  numbers = [10, 18 , 12 , -15 ]; 
var  maxInNumbers = Math.max.apply(Math, numbers);   //18
var  maxInNumbers = Math.max.call(Math,10, 18 , 12 , -15); //18

验证是否是数组（需要 toString() 没被重写过）；

1
2
3

function isArray(obj){
    return Object.prototype.toString.call(obj) === '[object Array]' ;
}

让类数组拥有数组的方法

1
2
3

//比如 arguments 对象获取文档节点，并没有数组的那些方法：
Array.prototype.slice.apply(argument); 
[].slice.apply(arguments);

bind() 方法创建一个新的函数，在调用时设置this关键字为提供的值。并在调用新函数时，将给定参数列表作为原函数的参数序列的前若干项。如果多次调用bind，那么多出来的次数都是无效的。

var fn = {
    _int :2,
    fun :function(){
        document.getElementById('box').onclick = (function(){
            console.log(this._int);
        }).bind(this);
        // 这个this是fn，所以可以正确的访问_int,使用bind,会在点击之后打印2；
        // 但是如果使用call或者apply，那么在刷新网页时会打印2；
    }
}
fn.fun();

对于实现以下几个函数，可以从几个方面思考:
1.不传入第一个参数，那么默认为 window
2.改变了 this 指向，让新的对象可以执行该函数。那么思路是否可以变成给新的对象添加一个函数，然后在执行完以后删除？

如何实现一个 bind 函数

Function.prototype.myBind = function (context) {
  if (typeof this !== 'function') {
    throw new TypeError('Error')
  }
  var _this = this
  var args = [...arguments].slice(1)
  // 返回一个函数
  return function F() {
    // 因为返回了一个函数，我们可以 new F()，所以需要判断
    if (this instanceof F) {
      return new _this(...args, ...arguments)
    }
    return _this.apply(context, args.concat(...arguments))
  }
}

如何实现一个 call 函数

Function.prototype.myCall = function (context) {
  var context = context || window
  // 给 context 添加一个属性
  // getValue.call(a, 'name', '24') => a.fn = getValue
  context.fn = this
  // 将 context 后面的参数取出来
  var args = [...arguments].slice(1)
  // getValue.call(a, 'name', '24') => a.fn('name', '24')
  var result = context.fn(...args)
  // 删除 fn
  delete context.fn
  return result
}

如何实现一个 apply 函数

Function.prototype.myApply = function (context) {
  var context = context || window
  context.fn = this
  var result
  // 需要判断是否存储第二个参数
  // 如果存在，就将第二个参数展开
  if (arguments[1]) {
    result = context.fn(...arguments[1])
  } else {
    result = context.fn()
  }
  delete context.fn
  return result
}

总结：
都是用来改变函数的 this 对象的指向的；
第一个参数都是 this 要指向的对象；
都可以利用后续参数传参；
apply、call 是立即调用，bind 返回对应函数稍后调用；

Reference：
https://zhuanlan.zhihu.com/p/51259309