call，apply，bind的区别（专为前端小白讲解，用火影举例，猴子都能懂系列）

JavaScript中call，apply，bind的相同点

1. 都是用来改变函数的this对象的指向的
2. 要修改this的指向对象写在第一个参数
3. 都可以利用参数传参

先看下很简单的代码（用火影的角色哈）

var mingren = {
	name: "XuanWo MingRen",
	height:166,
	Luoxuanwang:function(){
		console.log("身高" + this.height + "的" + this.name + "会使用螺旋丸")
	}
}
var kakaxi = {
	name: "QiMu Kakaxi",
	height:181,
	Xielunyan:function(){
		console.log("写轮眼")
	}
}
mingren.Luoxuanwang()

打印结果：身高166的XuanWo MingRen会使用螺旋丸（没毛病）

如果卡卡西也想使用螺旋丸咋办呢

//用call
mingren.Luoxuanwang.call(kakaxi)
//用apply
mingren.Luoxuanwang.apply(kakaxi)
//用bind第一种方法
mingren.Luoxuanwang.bind(kakaxi)()
//用bind第二种方法
var fn = mingren.Luoxuanwang.bind(kakaxi)
fn()

打印结果：身高181的QiMu Kakaxi会使用螺旋丸

好了，bind相对call，apply的区别出来了

call和apply都是对函数的直接调用，而bind方法返回的仍然是一个函数

来，在看下代码（就可以区别call和apply了）

var mingren = {
	name: "XuanWo MingRen",
	height:166,
	Luoxuanwang:function(gao,shuai){
		console.log(gao + shuai + "身高" + this.height + "的" + this.name + "会使用螺旋丸")
	}
}
var kakaxi = {
	name: "QiMu Kakaxi",
	height:181,
	Xielunyan:function(){
		console.log("写轮眼")
	}
}

接下来会新增两个参数，分别是高（高高的），帅（帅帅的）

//用call
mingren.Luoxuanwang.call(kakaxi,"高高的","帅帅的")
//用apply
mingren.Luoxuanwang.apply(kakaxi,["高高的","帅帅的"])
//用bind第一种方法
mingren.Luoxuanwang.bind(kakaxi,"高高的","帅帅的")()
//用bind第二种方法
mingren.Luoxuanwang.bind(kakaxi)("高高的","帅帅的")

打印结果：高高的帅帅的身高181的QiMu Kakaxi会使用螺旋丸

好了，call和apply的区别出来了

call后面的参数与Luoxuanwang方法中的形参是一一对应的，而apply的第二个参数是一个数组，数组中的元素是和say方法中一一对应的，所以区别可以简单理解，apply是以数组形式传参