清晰明了的解析call, apply, bind的区别

相同点

都可以用来改变this指向, 传参数, 也可以只传参数,不改变this指向, 第一项(this)为null代替就行

不同点

call()

语法: all(this, a1, a2, a3, …)
定义: 第一项为this || null, 后面一项一项传参数

apply()

语法: apply(this, [a1, a2, a3, …])
定义: 第一项为this || null, 后面以数组方式传参数

bind()

语法: bind(this, a1, a2, a3, …)()
定义: 第一项为this || null, 一项一项传参数,但是它必须是一个函数执行才会有返回值

call和bind类似,只是bind是函数执行

例子

let name = 'cab';
let age = 18;
let obj = {
	name : 'me',
	age: 12
}
let person = {
	name: 'objName',
	age: 28,
	go: function(name, age){
		this.name = name || this.name;
		this.age = age || this.age++;
		let  des = 'my name is ' + this.name +  ', my age is ' + this.age;
		console.log(des);
	}
}
console.log(person.go())   // my name is objName, my age is 29
// 改变this指向, go函数中不传参数,此时go中this为obj, 值不存在,调用的是obj的值
person.go.call(obj) // my name is me, my age is 13
person.go.apply(obj)  // my name is me, my age is 14
person.go.bind(obj)()  // my name is me, my age is 15
// 传参
// 1.不改变this指向,   传的是window下的值, go中 this依然是person
person.go.call(null, name, age) // my name is cab, my age is 18
person.go.apply(null, [name, age]) // my name is cab, my age is 18
person.go.bind(null, name, age)() // my name is cab, my age is 18

改变this指向并传参数,go中 this此时是obj, 穿的参数是window下的值
person.go.call(obj, name, age) // my name is cab, my age is 18
person.go.apply(obj, [name, age]) // my name is cab, my age is 18
person.go.bind(obj, name, age)() // my name is cab, my age is 18