JavaScript 函数 Call() apply() bind()区别

JavaScript 函数 Call() apply() bind()区别

this总是指向调用某个方法的对象，但是使用call()和apply()方法时，就会改变this的指向。

call.(thisOject, arg1 ,arg2 ...)

• apply 、 call 、bind 三者都是用来改变函数的this对象的指向的；
• apply 、 call 、bind 三者第一个参数都是this要指向的对象，也就是想指定的上下文；
• apply 、 call 、bind 三者都可以利用后续参数传参；
• bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用 。

call(thisObj，arg1，arg2...)、apply(thisObj，[obj1,obj2...])这二个方法是每个函数都包含的非继承的方法

call(thisobj[, args])和apply(thisobj[, args])

作用都是一样的，简单来说就是改变当前使用该方法的对象中的this指向，指向调用方法中的thisObj对象二者的区别（第一个参数是相同的）就是call方法中传入的参数是是一个个列举出来的，而apply方法中的参数二是一个数组

还是举例说明比较直观：

window.color='red';
var o={color:"blue"};
function sayColor(){
alert(this.color);
};
sayColor(); //red（全局函数，this是window）
sayColor.call(this);//red(调用call方法，指定对象是this，这里的this是window，没什么意义)
sayColor.call(window);//red(调用call方法，指定对象是window，没什么意义)
sayColor.call(o); //blue (调用call方法，指定对象是o，所以this指代对象o，这里由原来的window指向了o)
sayColor.apply(o);//blue (调用call方法，指定对象是o，所以this指代对象o，这里由原来的window指向了o)

call的用法

let obj = {
name:"Agwenbi",
age:25
}
function add(...args){
console.log(this);//obj对象
console.log(args);//参数1，2，3
}
/*
call用法解析
xxx.call(obj,1,2,3)
表示调用xxx函数，并将xxx函数里面的this指向call的第一个参数（这里是obj）
其余的call参数将作为xxx函数的参数进行传递
*/
add.call(obj,1,2,3);

2、apply的用法，与call的不同点就是参数的传递方式不一样

let obj = {

name:"Agwenbi",

age:25

}

function add(...args){

console.log(this);//输出obj对象

console.log(args);//输出[1,2,3]

}

/*

xxx.apply(obj,[1,2,3]);

表示调用xxx函数，并将xxx函数里面的this指向apply的第一个参数（这里是指obj）

apply中的剩余参数则是作为xxx函数的参数进行传递

*/

add.apply(obj,[1,2,3]);

3、bind的用法

let obj = {

name:"Agwenbi",

age:25

}

function add(...args){

console.log(this);//输出obj对象

console.log(args);//输出[1,2,3]

}

/*

let newXxx = xxx.bind(obj);

将xxx的函数内部中的this指向为obj，并返回一个新的函数newXxx

*/

let newAdd = add.bind(obj);//或者add.bind(obj)(1,2,3)

newAdd(1,2,3);