为什么我的局部变量没有引用，程序还是一样运行

Question

// JavaScript Document
var data=['iPhone5','50元充值卡','100元超市购物卷','数码相机','谢谢参与！','笔记本电脑','笔记本','SB称号','抽个毛线'];
var timer=null;

window.onload=function()
{
    var title=document.getElementById('title'),
        begin=document.getElementById('begin'),
        stop1=document.getElementById('stop');
    begin.onclick=begindraw;
    stop1.onclick=function(){
        clearInterval(timer);
        begin.style.background="#00C";
        }
        
}

function begindraw()
{    
    clearInterval(timer);
    timer=setInterval(bdraw,50);
    this.style.background="#999";
    }
function bdraw()
{
    var random1=Math.floor(Math.random()*data.length);
    //console.log(random1);
    title.innerHTML=data[random1];
    }

结果还是一样可以运行没问题。

Answer 1

对于有id的元素，会直接把这个元素挂到window上，做为window的一个属性，既window.title 就指向这个元素。然后在函数中运行时，会在作用域中逐级向上查找。而bdraw的上一级作用域就是window，所以可以通过title直接访问#id=title的标签元素。但是不推荐这样使用，尽量不要这样来写。