call() , apply() , bind() 这三个方法在js中尤为重要,尤其是在编写js源码的时候,那三个方法到底有什么用呢?
var a={
name : "小明" ,
age : 18,
sex : "男",
fn : function(){
console.log(this.name+"调用fn方法成功");
},
ft : function(names, days){
console.log("我叫"+ names+",我在"+ days+"的时候"+"调用ft方法成功");
}
}
var b = a.fn;
b();//this.name 不能输出 因为 调用时this指向的是window 但是因为window里面有name属性所以输出没有报错
b.call(a); //改变this指向 让this指向a
//call前面是调用的对象 里面参数是需要改变为this所指向的对象
var c = a.ft;
c.call(a,"小红","吃饭"); //传其他参数
这三个输出分别为:
① 调用fn方法成功
② 小明调用fn方法成功
③ 我叫小红,我在吃饭的时候调用ft方法成功
第一次将a.fn 方法赋值给 b 的时候,并没有执行,所以没执行只拿函数,此时this指向的是window,所以不能输出小明。
第二次使用call改变this指向,将this指向a,因此可以拿到他的name属性。
第三次 说明call还可以传参数。
var a={
name : "小明" ,
age : 18,
sex : "男",
fn : function(){
console.log(this.name+"调用fn方法成功");
},
ft : function(names, days){
console.log("我叫"+ names+",我在"+ days+"的时候"+"调用ft方法成功");
}
}
var b = a.fn ;
b(); //this.name 不能输出 因为 调用时this指向的是window 但是因为window里面有name属性 所以输出没有报错
b.apply(a); //改变this指向 让this指向a
//apply前面是调用的对象 里面参数是需要改变为this所指向的对象
var c = a.ft;
c.apply(a, ["小花","化妆"]); //传其他参数
三个输出分别为:
① 调用fn方法成功
② 小明调用fn方法成功
③ 我叫小花,我在化妆的时候调用ft方法成功
apply和call有着异曲同工之秒,但是在传参数的时候,call传递的是普通参数,而apply传递的是数组,在接收的时候可以设置和数组长度一样多的形参来分别接收。
var a={
name : "小明" ,
age : 18,
sex : "男",
fn : function(){
console.log(this.name+"调用fn方法成功");
},
ft : function(names, days){
console.log("我叫"+ names+",我在"+ days+"的时候"+"调用ft方法成功");
}
}
var b = a.ft ; // 此时this指向window
var c=b.bind(a,"翠花","现在"); //bind将this指向了a,而且传递了两个参数,并且返回一个新函数。
c(); //输出 我叫翠花,我在现在的时候调用ft方法成功
bind函数有多种调用方法,
b.bind(a,“小强”,“今天”)();
b.bind(a,“熊大”)(“刚刚”);
b.bind(a)(“熊二”,“刚才”);
这些方法都可以调用bind方法并且进行传参。
它与 call方法 apply方法 不同在于,bind能返回一个新函数。