如下代码中，有3个button，每个button都指定了函数，第一个button的按键后显示“click me” ，this指向了button；第二个button的按键后显示“underfine” ，this指向了全局window；第三个button与第一个相同。怎么解释呢？？希望有详细的介绍啊，若没有，可提供学习资料，博客也是极好的。
<input type="button" value="click me" onclick="alert(this.value)" />
<input type="button" value="click me" onclick="f()" />
<input id= "button" type="button" value="click me" />
<script type="text/javascript">
function f(){
alert(this.value);
}
var button = document.getElementById("button");
button.onclick=f1;
function f1() {
alert(this.value);
}
</script>第一个onclick调用的是alert()这个函数，传入值指的是this.value，其中this指向当前对象;
你把第二个函数改写一下，如下所示，和1本质上一模一样。
<input type="button" value="click me" onclick="f(this.value)" />
<script>
function f(str){
alert(str);
}
</script>你的之所以是undefined，是因为函数内部的this确实没有上下文啊，只有指向window了。
<input type="button" value="click me" onclick="f.call(this)" />当然，如上，你也通过这个call传入this。
第三个f1通过赋值给button，this指向的自然就是button了。
题主是个非常细心的人，看到这么有意思的问题我忍不住去尝试了一下并查阅了一下关于this的的资料，对于上面的清情况做一下解释：
这个问题的关键在于对于this对象的理解：this关键字引用的是:调用this的那个函数，被调用时所属的那个对象（未指定的情况下默认是window）;这么说有点拗口，为了更容易理解，接下来以题主之前的样例举几个例子：
1.第一个例子
<body>
<input type="button" value="click me" onclick="f()" />
</body>
<script type="text/javascript">
function f(){
alert(this);
}
</script>
此时点击那个按钮，将会返回widows对象，
回头看刚刚作出的解释：this关键字引用的是调用this的那个函数（这里就是f），被调用时所属的那个对象（因为没指定默认是window）；
2.第二个例子
<body>
<input type="button" id="btn" value="click me" />
</body>
<script type="text/javascript">
window.onload=function(){
var btn=document.getElementById("btn");
btn.onclick=f;//这里改变了所属对象
}
function f(){
alert(this);
}
</script>
此时再点击该按钮，结果如下
this关键字引用的是调用this的那个函数（这里就是f），被调用时所属的那个对象（此时被指定为btn）
3.第三个例子
<body>
<input type="button" id="btn" value="click me" />
</body>
<script type="text/javascript">
window.onload=function(){
var btn=document.getElementById("btn");
btn.onclick=function(){
f();
};//这里其实没有改变所属对象
}
function f(){
alert(this);
}
</script>
这个和上面看起来非常相似，但是实际上，没有改变调用this的函数所属的对象，因此结果如下：
最后补充解释一下题主的第一种情况，即直接在html文档中写函数的时候，这个情况就相当于直接给当前对象绑定方法，原理同上。
以上纯手打，如果有帮助请采纳，还有疑问欢迎继续探讨