javaScript---bind、call、apply

目录

• bind()
• call()
• apply()
• 总结
  • 相同点
  • 不同点

bind()

bind()会创建一个与原函数一模一样的函数，并将这个新函数中的this指向永久换成thisObj。

var newFn = fn.bind(thisObj, arg1, arg2, ...)

案例如下：

function calc(base,bonus1,bonus2){
  	console.log(`${this.ename} 的总工资是: ${base+bonus1+bonus2}`)
};
let lilei={ ename:"lilei", }
let lcalc=calc.bind(lilei,1000);
//新函数function lcalc(base,bonus1,bonus2){
  	//this.ename永久替换为lilei.ename
	//形参base永久=10000
//}
//从此调用lcalc，无需反复.call(lilei,10000)，其中的this永远指lilei，base永远是10000
lcalc(1000,2000); // lilei的总工资是：4000
lcalc(2000,3000); // lilei的总工资是：6000

call()

在调用函数时，临时替换一次函数内部的this指向。

fn.call(thisObj, arg1, arg2, ...)

案例如下：

function calc(base, bonus1, bonus2){
  	console.log(`${this.ename} 的总工资是: ${base+bonus1+bonus2}`)
};
let lilei={
    ename:"lilei",
};
calc.call(lilei,1000,1000,2000); //lilei的总工资是：4000

apply()

在调用函数时，临时替换一次函数内部的this指向。

fn.apply(thisObj, arr)

案例如下：

function calc(base,bonus1,bonus2){
  	console.log(`${this.ename} 的总工资是: ${base+bonus1+bonus2}`)
};
let lilei={
    ename:"lilei",
}
calc.apply(lilei,[10000,1000,2000]);//lilei的总工资是：4000

总结

相同点

• bind()、call()、apply()方法的作用都是改变函数内部的this作用域。

不同点

• fn.bind(thisObj, arg1, arg2, ...)会创建一个新的函数；不会立即调用执行函数fn；并且生成的新函数中的this作用域会被永久地换成thisObj；共有n个参数，第一个参数是函数中新的this指向，从第二个参数开始都是传给函数内部用于计算的值
• fn.call(thisObj, arg1, arg2, ...)不会创建新的函数；而是立即调用执行fn；对于fn中的this指向也只是临时替换成thisObj；共有n个参数，第一个参数是函数中新的this指向，从第二个参数开始都是传给函数内部用于计算的值
• fn.apply(thisObj, [arg1, arg2, ...])不会创建新的函数；而是立即调用执行fn；对于fn中的this指向也只是临时替换成thisObj；共有2个参数，第一个参数是函数中新的this指向，第二个参数是一个数组，可存放多个参数，执行函数时依次传给函数内部用于计算