5.4改变this的指向
如果系统自动指定的this对象不是我们想要的,我们就可以主动更换this指向的对象
5.4.1 call
在一次调用函数时,临时替换一次函数中的this为指定对象
使用:要调用的函数.call(替换this的对象, 实参值1,...)
call做了的3件事:
i:立刻调用一次.前的函数
ii:自动将.前的函数中的this替换为指定的新对象
iii:向要调用的函数中传入实参值
示例:
// call
// 有一个公共的计算器函数,计算员工的总工资
function jisuan(base,bouns1,bouns2){
console.log(`${this.name}的工资是:${base+bouns1+bouns2}`);
}
var lilei={name:"li lei"};
var hmm={name:"han meimei"};
// 使用call函数,改变this的指向,让jisuan函数中的this指向lilei这个对象,并将参数一个一个的传入
// this base bouns1 bouns2
jisuan.call(lilei, 10000, 2000, 1000);
jisuan.call(hmm,10000,1000,3000);
5.4.2 apply
如果多个实参值是放在一个数组中给的,这里就需要既替换this,又要将数组拆散再传入参数
使用:要调用的函数.apply(替换this的对象, 包含实参值的数组)
apply做了3件事:
i. 调用.前的函数
ii. 替换.前的函数中的this为指定对象
iii. 先拆散数组为多个元素值,再分别传给函数的形参变量
示例:
// apply
// 有一个公共的计算器函数,计算员工的总工资
function jisuan(base,bouns1,bouns2){
console.log(`${this.name}的工资是:${base+bouns1+bouns2}`);
}
var lilei={name:"li lei"};
var hmm={name:"han meimei"};
// 使用call函数,改变this的指向,让jisuan函数中的this指向lilei这个对象,并自动遍历数组,且将值放入参数列表
var arr=[10000,1000,2000];
// this base bouns1 bouns2
jisuan.apply(lilei,arr);
5.4.3 bind
如果多次需要调用函数,并且对应的都是一个对象,就可以使用bind进行永久绑定this
功能:创建函数副本,并永久绑定this
【1】使用:var 新函数=原函数.bind(替换this的对象)
bind做了2件事:
i. 创建一个和原函数一模一样的新函数
ii. 永久替换新函数中的this为指定对象
如何使用新函数:新函数(实参值,…)
注意: 因为bind()已经提前将指定对象替换了新函数中的this,则后续每次调用时,不需要再替换this了!
【2】bind()不但可以提前永久绑定this,而且还能提前永久绑定部分实参值
如何使用:var 新函数=原函数.bind(替换this的对象, 不变的实参值)
做了3件事:
i. 创建一模一样的新函数
ii. 永久替换this为指定对象
iii. 永久替换部分形参变量为固定的实参值!
调用:新函数(剩余实参值,...,...)
注意:被bind()永久绑定的this,即使用call,也无法再替换为其它对象了。
示例:
// bind
// 有一个公共的计算器函数,计算员工的总工资
function jisuan(base,bouns1,bouns2){
console.log(`${this.name}的工资是:${base+bouns1+bouns2}`);
}
var lilei={name:"li lei"};
var hmm={name:"han meimei"};
var jisuan2=jisuan.bind(lilei);
jisuan2(10000,1000,2000);
var jisuan3=jisuan.bind(lilei,10000);
jisuan3(1000,3000);
[^(4). 总结:]:
[^]: a. 只在一次调用函数时,临时替换一次this: call
[^]: b. 既要替换一次this,又要拆散数组再传参: apply
[^]: c. 创建新函数副本,并永久绑定this: bind