我以前在使用的时候函数的时候一直不太确认Function对象三个方法的使用以及区别
Function.prototype.apply()
Function.prototype.bind()
Function.prototype.call()
这三个方法都是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