call(),apply()和bind()的区别
javascript中的每一个Function对象都有一个apply()和一个call()方法,它们的语法分别是:
/*apply()方法*/
function.apply(thisObj[, argArray])
apply: 调用一个对象的一个方法,用另一个对象替换当前对象。 例如: B.apply(A,arguments); 即A对象应用B对象的方法。
/*call()方法*/
function.call(thisObj[, arg1[, arg2[, [,...argN]]]]);
call: 调用一个对象的一个方法,用另一个对象替换当前对象。 例如:B.call(A,args1,args2);即A对象调用B对象的方法。
相同点:
1.方法的含义是一样的,功能自然也是一样的;
2.第一个参数的作用是一样的。
不同点:两者传入的列表形式不一样
1.call可以传入多个参数
2.apply只能传入两个参数,所以器第二个参数往往是作为数组的形式传入。
意义:
实现(多重)继承
实例代码:
function sum(num1,num2){
return num1+num2
}
function sub(num1,num2){
return num1-num2
}
var a1 = sum.apply(sub,[4,2]) // sub调用sum内的方法
console.log(a1) // 6
var a2 = sub.apply(sum,[4,2]) // sum调用sub内部的方法
console.log(a2) // 2
var c1 = sum.call(sub,4,2) // sub调用sum的方法
console.log(c1) // 6
var c2 = sub.call(sum,4,2) // sum调用sub内部的方法
console.log(c2) // 2
window.color = 'red';
var o = {color:'blue'}
function sayColor(){
console.log(this)
console.log(this.color)
}
console.log(this) // window
sayColor.call(this) // window red
sayColor.call(window) // window red
sayColor.call(o) // {color:'blue'} blue
sayColor.apply(this) // window red
sayColor.apply(window) // window red
sayColor.apply(o) // {color:'blue'} blue
实现继承
function Animal(name){
this.name = name
this.showName = function(){
console.log(this.name)
}
}
function Cat(name){
Animal.apply(this,[name])
}
var cat = new Cat("猫")
cat.showName() //猫
// 多继承
function Sum(){
this.sumadd = function(a,b){
console.log(a+b)
}
}
function Sub(){
this.subadd = function(a,b){
console.log(a-b)
}
}
function Js(){
console.log(this) //Js {}
Sum.apply(this)
Sub.apply(this)
}
var a = new Js();
a.sumadd(3,1) //4
a.subadd(3,1) //2
/*bind()方法*/
bind() 这个方法会创建一个函数实例,其this值会被绑定到传给bind()函数的值
var objSayColor = sayColor.bind(o) //{color:'blue'}
objSayColor() // blue
var a = {
user: 'skl',
}
var b = function(e,d,f){
console.log(this.user) //skl
console.log(e,d,f) //10,1,2
};
var c = b.bind(a,10)
c(1,2)
总结:call和apply都是改变上下文中的this并立即执行这个函数,bind方法可以让对应的函数想什么时候调就什么时候调用,并且可以将参数在执行的时候添加,这是它们的区别,根据自己的实际情况来选择使用。