被这个this指向弄晕了,求请教

functionRouter(){
this.routes={};
this.currentUrl='';
}
Router.prototype.route=function(path,callback){
this.routes[path]=callback||function(){};
}
Router.prototype.refresh=function(){
this.currentUrl=location.hash.slice('1')||'/';
this.routes[this.currentUrl]();
}
Router.prototype.init=function(){
window.addEventListener('load',this.refresh.bind(this),false);
window.addEventListener('hashchange',this.refresh.bind(this),false);
}
window.Router=newRouter();
window.Router.init();
varcontent=document.querySelector('body');
//changePageanything
functionchangeBgColor(color){
content.style.backgroundColor=color;
}
Router.route('/',function(){
changeBgColor('red')
})
Router.route('/blue',function(){
changeBgColor('blue')
})
Router.route('/green',function(){
changeBgColor('green')
})
问题就在于window.addEventListener('load',this.refresh.bind(this),false);这句话中this.refresh.bind(this),弄晕了,换成this.refresh.apply(this)和call都会报错,有人能帮我来理清这个this指向的顺序吗?以及为什么不能使用apply和call
守着一只汪
浏览 467回答 2
2回答

BIG阳

this.refresh.apply(this)是改变作用域并执行this.refresh.bind(this)是改变作用域并返回新函数(未执行)这里的this.refresh.bind(this)是改变addEventListener的this将其指向Router,因为事件的this指向事件的绑定者,这里是window

阿晨1998

call和apply会自动执行函数,而bind不会window.addEventListener里的第二个参数是一个函数用call和apply的话得到的就是执行完的结果,也就是函数返回值,你的refresh没有返回值(return),得到的也就是undefined,所以会报错啦
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript