理解call，apply，bind区别和使用场景

Posted 2021-09-28 前端茅台

共同点

三个方法都是用来重新定义this指向的，第一个参数都是this要指向的对象

不同点

a、call函数可以有多个参数
b、apply函数的第二个参数是数组，数组的每一项都是目标函数的参数
c、bind函数返回的是一个函数，使用时需要调用触发
d、bind函数的底层是call实现的

使用方法

call的用法：
例如判断数据类型，一般用Object.prototype.toString结合call方法来进行判断：

var obj = {}
console.log(Object.prototype.toString.call(obj) === "[object Object]");

为什么需要使用call函数来判断？而不是直接使用obj.toString()呢？
因为obj对象可能重写toString方法

apply的用法：
栗子1: 例如我们在使用Math函数获取最大最小值时可以这样使用Math.max(5,6,7,8,9),这样能获取到最大值9，但是如何去求一个数组中的最大值呢？

//这样使用是行不通的
var arr = [5,6,7,8,9]
Math.max(arr)
//只能这样使用
Math.max.apply(null, arr)

栗子2: 两个数组 var arr1 = [1,2,3]; var arr2 = [2,3,4],如何优雅的将arr2中的值追加到arr1中去呢？
这里可以使用apply函数，可以这样写：
Array.prototype.push.apply(arr1, arr2)

bind用法：

this.num = 9; 
var mymodule = {
  num: 81,
  getNum: function() { return this.num; }
};

mymodule.getNum(); // 打印出来是 81

var getNum = mymodule.getNum;

getNum() // 这里打印出来是9，因为this指向window

var bindNumber = mymodule.getNum.bind(mymodule)
bindNumber() // 这里打印出来的是81，利用bind将this指向了mymodule对象