在JavaScript中有call( )、apply( ) 、bind ( )三种方法,这三种方法的作用都是改变this的指向,下面我们来了解一下三种方法的使用及区别和在不同的情况下应该使用哪种方法
一、call()方法
call()方法使用一个指定的this值和单独给出的一个或多个参数调用一个函数,简单来讲就是通过调用一个参数来修改this的指向
function introduce() {
console.log(this);
console.log(`我叫${
this.name},我的名字是${
this.age}`);
}
const xm = {
name: '小明',
age: 20
};
const xh = {
name: '小红',
age: 18
}
introduce.call(xm);
//{ name: '小明', age: 20 }
//我叫小明,我的名字是20
通过这个例子我们可以看到此时this指向的是xm这个对象
function.call(thisArg, arg1, arg2, ...)
参数
thisArg:可选。在function函数运行时使用的this值。这里的this可能不是该方法看到的实际值,如果这个函数处于非严格模式下,则指定为null或underfined时会自动替换为全局对象,原始值会被包装
arg1,arg2,… 指向的参数列表
二、 apply()方法
apply()方法调用一个具有给定this值的函数,以及一个数组(或者一个类数组对象)的形式提供的参数,该方法与call()相似,只有一个区别,就是call()方法接受的是一个参数列表,而apply()方法接收的是一个包含多个参数的数组
const nums = [3, 6, 8, 2,];
const max = Math.max.apply(null, nums);
console.log(max);
const min = Math.min.apply(Math, nums);
console.log(min);
//8
//2
apply(thisArg)
apply(thisArg, argsArray)
thisArg : 必选,如果不需要改变this指向,则传null。
三、call()和apply()的区别
function test(a, b) {
console.log(this.name);
console.log(a + b);
}
const xm = {
name: "小明"
};
const xh = {
name: "小红"
};
const nums = [1, 3];
test.call(xm, ...nums);//此处是 es6 写法,等价于 test.call(xiaomi, 1, 2)
//小明 4
test.apply(xh, nums);
//小红 4
四、bind的使用
bind()方法创建一个新的函数,在bind()被调用时,这个新函数的this被指定为bind()的第一个参数,而其余参数将作为新函数的参数,供调用时使用,也就是说bind()返回的是一个函数,使用时需要调用。
在实际开发中,bind()方法使用得最为频繁,如果有些函数我们不需要立即调用,但是又想改变这个函数内部的this指向,此时用bind()最为合适,
新函数 = func.bind(thisArg,arg1,arg2);
参数:
thisArg:在func函数运行时,指定func函数的this指向,如果不需要改变this指向,则传null
arg1,arg2:func函数的实参
返回值
返回一个原函数的拷贝,并拥有指定的this值和初始参数
function add(a, b, c) {
return a + b + c;
}
var fn = add.bind(null, 10);
var ans = fn(20, 30);//60
add 函数需要三个参数,fn函数将10作为默认的一个参数,所以只需要传入两个参数就可以了,如果你又传了三个参数,那么,也只会取前两个
也就是说,如果有一些函数,其中前几个参数已经确定了,那么我们就可以使用bind返回一个新的函数,也就说,bind()能使一个函数拥有预设的初始参数,这些预设参数将会作为bind()的第二个参数跟在this后面,之后它们会被插入到目标函数的参数列表的开始位置
37作为内定的参数,然后将其作为预设的初始参数作为默认值,需要其他参数时再向其传入其他的参数
new
当使用new操作符绑定函数时,bind的第一个参数无效
但是我们可以按照之前的做法使用
参考链接:https://segmentfault.com/a/1190000006623043