深入理解Javascript Function中 call()、 apply()、bind()

我以前在使用的时候函数的时候一直不太确认Function对象三个方法的使用以及区别 Function.prototype.call()
Function.prototype.apply()
Function.prototype.bind()

这三个方法都是Function下的原型方法，如果你对原型不了解，你可以去看我的另一篇文章 深入理解javascript原型及原型链

我们先看例子

let person = {
	age: 29,
	personInfo: function() {
	    return this.age;
	}
}
let fun = person.personInfo;
fun()//undefined

let person = {
	age: 29,
	personInfo: function() {
	    return this.age;
	}
}
person.personInfo(); //29

比较一下我们可以得出结论 第一个this指向的是全局的window,所有找不到age 属性。第二个例子this指向的是person，所以可以取到age属性。 call()、apply()、bind() 都是用来重定义 this 这个对象的！

call()

let person = {
	age: 29,
	personInfo: function() {
	    return this.age;
	}
}
let fun = person.personInfo;
fun.call(person);//29

通过在call方法，给第一个参数添加要把fun添加到哪个环境中，简单来说，this就会指向那个对象。 call方法除了第一个参数还可以添加多个参数

let person = {
	age: 29,
	money: function(x, y) {
	    return x + y;
	}
}
let fun = person.money;
fun.call(person, 10 , 20);//30

apply()

apply方法和call方法有些相似，它也可以改变this的指向,同样apply也可以有多个参数，但是不同的是，第二个参数必须是一个数组

let person = {
	age: 29,
	money: function(x, y) {
	    return x + y;
	}
}
let fun = person.money;
fun.apply(person, [10 , 20]);//30

ps* 注意如果call和apply的第一个参数写的是null，那么this指向的是window对象

bind()

let person = {
	age: 29,
	personInfo: function() {
	    return this.age;
	}
}
let fun = person.personInfo;
fun.bind(person);

没有任务的输出 这就是bind和call、apply方法的不同，实际上bind方法返回的是一个修改过后的函数。

正确的方式如下

let person = {
	age: 29,
	personInfo: function() {
	    return this.age;
	}
}
let fun = person.personInfo;
fun.bind(person)();//29

同样bind也可以有多个参数，并且参数可以执行的时候再次添加，但是要注意的是，参数是按照形参的顺序进行的

let person = {
	age: 29,
	money: function(x, y) {
	    return x + y;
	}
}
let fun = person.money;
fun.bind(person, 10 , 20)();//30