函数名调用bind(this)的作用

1 问题

看不太明白bind(this)的写法

    Router.prototype.refresh = function () {
        console.log('触发一次 hashchange,hash 值为', location.hash);
        this.currentUrl = location.hash.slice(1) || '/';
        this.routes[this.currentUrl]();
    };
    
    Router.prototype.init = function () {
        window.addEventListener('hashchange', this.refresh.bind(this), false);
    };
    window.Router = new Router();
    window.Router.init();

2 bind(this)的作用

  • 传递上下文

refresh方法中,有关键字this,调用相关代码,内部的this指向的调用者,所以如果不使用bind(this) , 事件触发后,window调用 refresh后,refresh方法中的this将指向window.

  • bind(this),this参数,就是指定上下文,方法内部的this都将是传入的这个对象

init方法执行时, 当前的this是Router,因此bind(this)后,window调用refresh方法后,方法内部的this对象即为传入的参数Router对象

3 总结

  • window接收的方法,可能理解为,只是一个方法体,任何对象都可以调用,因此如果方法体中存在 this, 绑定上下文是有必要的
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值