JavaScript中call(),apply()和bind()的用法和区别

先说结论

call、apply 和 bind 的作用都是改变函数的 this 的指向

其中 call 和 apply 的区别在于它们传参的方式不同

call可以传多个形参，而apply只能传一个数组形参

而bind和call、apply的区别在于bind不会立即调用，而是返回一个函数对象

先搞两个对象

首先创造一个对象Alice，

这个对象有Name属性，

和一个 输出今日消费金额的函数outConsume(morning,afternoon,evening)

const Alice={
	Name:"Alice",
	outConsume:function(morning,afternoon,evening){
		console.log(this.Name+"今日消费了"+(morning+afternoon+evening)+"元");
	}
}

再创造一个对象Bob，

这个对象只包含一个Name属性，

为了防止代码冗余，我决定不写 输出今日消费金额的函数，

const Bob={
	Name:"Bob"
}

call

但是我希望Bob能够实现 输出今日消费金额的功能

于是我使用call（）函数改变Alice的 输出今日消费金额的函数的this指向。

Alice.outConsume(10,15,10);
Alice.outConsume.call(Bob,7,8,10);

我们发现call是改变了输出今日消费金额的函数的this指向

apply

apply的功能是和call一样的，不一样的地方在于，apply函数只有两个参数，

第一个是输出今日消费金额的函数的this将要指向的对象，这点与call相同

另一个参数是一个参数数组，也就是call函数从第二个开始的所有参数都被放在一个数组中，这个数组就是apply的第二个参数。

Alice.outConsume(10,15,10);
Alice.outConsume.call(Bob,7,8,10);
Alice.outConsume.apply(Bob,[7,8,10]);

我们可以发现，call和apply函数除了参数的表示，没有什么不同

apply的好处就在于，当我们面对未知个数的参数时，

一样可以很好的调用输出今日消费金额的函数

bind

bind函数只有一个对象参数，表示输出今日消费金额的函数的this新指向的对象，

而且bind函数具有一个返回值，而且返回值是输出今日消费金额函数的函数对象，

并且这个被返回的函数的this指向的是调用bind时传入的对象参数。

Alice.outConsume(10,15,10);

Alice.outConsume.call(Bob,7,8,10);

Alice.outConsume.apply(Bob,[7,8,10]);

const testBind=Alice.outConsume.bind(Bob);

testBind(7,8,10);

我们可以发现，bind和call，apply函数功能没有什么不同

bind的好处就在于，我们将输出今日消费金额的函数封装在一个指定this的变量内，

我们需要调用它的时候可以随时通过变量调用，更加便捷。