JavaScript中的函数运行在词法作用域中，这也意味着函数在定义它们的作用域中运行，而不在调用它们的作用域中运行。
下面的代码，在控制台中将打印出什么？
<body style="background-color:black;" scroll="no">
<a id="a1" href="javascript:;" οnclick="console.log(this);">a1</a><br><a id="a2" href="javascript:;">a2</a><br>
<a id="a3" href="javascript:;" οnclick="dosome()">a3</a>
</body>
<script>
function dosome(){
console.log(this);
}
document.getElementById("a2").addEventListener("click",function(e){
console.log(this);
},false);
</script>
控制台内容：
a1:<a id="a1" href="javascript:;" οnclick="console.log(this);">a1</a>
a2:<a id="a2" href="javascript:;">a2</a>
a3:DOMWindow
a1的显示内容，this就是a1本身。这时，onclick函数在定义DOM树中。HTML元素中绑定的事件句柄，它的作用域链头是调用对象，作用域链的下一个对象是触发事件句柄的对象。
a2的显示内容，this也是a2本身。大部分浏览器的addEventListener实现中this都是引用注册的对象(相当于e.currentTarget)，但是onclick函数却在JS的全局作用域中。
a3的显示内容，this是JS作用域的全局变量window对象。因为a3触发的函数是定义在JS作用域中的。
a1和a2，在上面的例子中似乎并不明显有区别，我们将例子稍稍转变一下(this 改为body)，区别就出来了。
<body style="background-color:black;" scroll="no">
<a id="a1" href="javascript:;" οnclick="console.log(body);">a1</a><br>
<a id="a2" href="javascript:;">a2</a><br>
<a id="a3" href="javascript:;" οnclick="dosome()">a3</a>
</body>
<script>
var body="g_body";
function dosome(){
console.log(body);
}
document.getElementById("a2").addEventListener("click",function(e){
console.log(body);
},false);
</script>
控制台内容：
a1:DOM中的body元素。
a2:g_body.
a3:g_body.
a1，在作用域链查找时，当前的<a>标签中，没有找到body定义，就会找它作用域链的上一级，在DOM树中查找body，找到了<body>。
a2，在作用域链查找时，当前的<a>标签中，没有找到body定义，找作用域链的上一级，在window对象中查找body，找到了body变量g_body.
a3，在作用域链查找时，当前函数中没有定义body变量，找作用域上一级，在window对象中找到了body变量g_body.
252
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
