JavaScript中每个Function对象都有一个 call 方法和 apply 方法；
1、call
call方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)。
注意：该方法的作用和 apply() 方法类似，只有一个区别，就是call()方法接受的是若干个参数的列表，而apply()方法接受的是一个包含多个参数的数组。
?- 功能：改变this指向
?- 参数：
?????????- 第一个参数：就是要改变的this的指向
?????????- 第二个参数~：要传给原函数的实参
- 返回值：等同于原函数的返回值
function Person(name,age){
this.name = name;
this.age = age;
}
function Male(name,age,sex){
Person.call(this,name,age);
this.sex = sex;
}
var men = new Male('john',30,'male');
console.log(men.name); //'john'
2、apply
方法调用一个具有给定this值的函数，以及作为一个数组（或类似数组对象）提供的参数。
注意：call()方法的作用和 apply() 方法类似，区别就是call()方法接受的是参数列表，而apply()方法接受的是一个参数数组。
? ? - 功能：改变this指向
? ? - 参数：
? ? ? ? 第一个参数：就是要改变的this的指向
? ? ? ? 第二个参数：数组的形式，内包含，要传给原函数的实参
? ? - 返回值：等同于原函数的返回值
var arr = [1,5,10,20,100];
var max = Math.max.apply(null,arr);
console.log(max); //100
var min = Math.min.apply(null,arr);
console.log(min); //1
3、bind
bind()方法创建一个新的函数，当这个新的函数被调用时，其this置为提供的值，其参数列表前几项，置为创建时指定的参数序列。
? ? - 功能：改变this指向
? ? - 参数：
? ? ? ? 第一个参数：就是要改变的this的指向
? ? ? ? 第二个参数~：要传给原函数的实参
? ? - 返回值：改变this和参数之后的新函数
var module = {
x:42,
getX:function(){
return this.x;
}
}
var unboundGetX = module.getX;
console.log(unboundGetX()); //undefined
var boundGetX = unboundGetX.bind(module);
console.log(boundGetX()); //42
总结：
????????相同点
-
都是用来改变函数的this对象的指向的 -
第一个参数都是this要指向的对象 -
都可以利用后续参数传参
? ? ? ? 不同点
?call、apply和bind的区别就是bind返回的是一个函数,我们还需要在执行一次
但call和apply的区别是什么呢,我们接下来吧代码改动一下:
let xiaowang = {
name:'小王',
gender:'男',
age:22,
say:function(school,grade){
console.log('姓名:' + this.name + ' 性别:' + this.gender + ' 年龄: ' + this.age + ' 在: ' + this.school + ' 上:' + this.grade)
}
}
let xiaohong = {
name:'小红',
gender:'女',
age:22
}
xiaowang.say()
现在我们再来看call和apply的区别:
call方法:
xiaowang.say.call(xiaohong,"实验小学","六年级")
apply方法:
xiaowang.say.bind(xiaohong,["实验小学","六年级"])
看到他们俩的区别了吗？他们的第一个参数上面提到过了。call的后续参数是和say方法中一一对应的;而apply后续的参数是需要传一个数组,数组里面的值才是要和say方法中一一对应的。
bind方法:
上面说过了bind返回的是一个函数我们还需要在调用一次,那么我们可以这样来传参
xiaowang.say.bind(xiaohong,"实验小学","六年级")
也可以这样,在调用的时候传参
xiaowang.say.bind(xiaohong)("实验小学","六年级")
|