（代码简化自js设计模式与开发实践P99）
如下代码中，当F2触发后，执行的函数中的miniConsole指的是miniConsole.js中的对象，而不是html里miniConsole对象，为什么？？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
var miniConsole = (function(){
var cache = [];
var handler = function(ev){
console.log("f2 triggle");
if(ev.keyCode === 113){
var script = document.createElement('script');
script.onload = function(){
for(var i=0,fn ; fn=cache[i++] ; ){
fn();
}
};
script.src='miniConsole.js';
document.getElementsByTagName('head')[0].appendChild(script);
document.body.removeEventListener('keydown',handler);
}
}
document.body.addEventListener('keydown',handler,false);
return {
log:function(){
var args = arguments;
cache.push(function(){
console.log(miniConsole);
return miniConsole.log.apply(miniConsole,args);
})
}
}
})();
</script>
</body>
</html>miniConsole.js
var miniConsole = {
log:function(){
console.log('lg');
}
}
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
因为onload事件触发时表示加载已经完成，此时miniConsole对象已经被重写了，之前的miniConsole对象是为了将执行用户输出的接口函数储存到var cache = []里面，之前的miniConsole对象已经自己执行了一次返回了一个匿名对象了，所以最后执行的对象是被重写的miniConsole对象
今天正好也在看这本书的这一章节的这个代码