您的位置:首页 > 移动开发

函数中的this指向,以及 修改this指向的 call/apply/bind方法

2017-09-04 17:51 771 查看
函数中的this指向与 call/apply/bind方法

(1)函数中的this指向:this的指向只取决于函数调用/执行时最终调用该函数的对象。
参考网址:http://www.cnblogs.com/pssp/p/5216085.html

示例1:
var a = {
    user:"追梦子",
    fn:function(){
        console.log(this.user);
    }
}
var b = a.fn;
b();  //输出结果:undefined

示例2:
var a = {
    user:"追梦子",
    fn:function(){
        console.log(this.user);
    }
}
a.fn();  //输出结果:追梦子

注释:具体的其他关于new 、return等复杂情况,详见上述参考网址。

(2)call/apply/bind方法:都是用来修改this指向的
参考网址:http://www.cnblogs.com/pssp/p/5215621.html

兼容性:
        Call/apply    兼容所有
        Bind               IE9+

注释:
        如果call和apply的第一个参数写的是null或不填,那么this指向的是window对象;(bind也是)
        call/apply方法的调用会调用源函数;而bind方法的调用只是返回源函数(需要额外调用)。

(a)call方法
示例:
var a = {
    user:"追梦子",
    fn:function(e,ee){
        console.log(this.user); //追梦子
        console.log(e+ee); //3
    }
}
var b = a.fn;
b.call(a,1,2);
注释:call方法的参数解析:(可接收0至多个参数)
第一个参数:可选,修改this指向的对象;
第二个及之后的参数:可选,函数传参;

(b)apply方法
示例:
var a = {
    user:"追梦子",
    fn:function(e,ee){
        console.log(this.user); //追梦子
        console.log(e+ee); //11
    }
}
var b = a.fn;
b.apply(a,[10,1]);

注释:apply方法的参数解析:(与call有点相似,但最多只接受两个参数)
第一个参数:可选,修改this指向的对象;
第二个参数:可选,一个数组,表示函数传参;

(c)bind方法
注意:bind方法的返回值是一个修改过后的函数,并没有立即调用。
示例:
var a = {
    user:"追梦子",
    fn:function(e,d,f){
        console.log(this.user); //追梦子
        console.log(e,d,f); //10 1 2
    }
}
var b = a.fn;
var c = b.bind(a,10);
c(1,2);

注释:bind方法的参数解析:(传参比call/apply方法更灵活)
bind可以有多个参数,而且,既可以在bind方法中传参,也可以在执行的时候再次添加传参,总体的参数处理是按照形参的顺序进行的。
bind方法的this指向参数必须在bind方法中传参,否则都默认为指向window对象。

综上所述,call、apply 和 bind 三者的比较总结:
call和apply都是改变上下文中的this,并自动立即执行这个函数。
bind方法可以改变上下文中的this,但不会自动立即执行这个函数;并且,可以将参数在执行的时候添加。
这是它们的区别,根据自己的实际情况来选择使用。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: