onclick与this

这个其实也是一个很基础的问题，不过又碰巧遇到了，所以记录一下。

假设我们有这么一个需求，按下按钮，弹出提示框，显示按钮的value值。

可能有一些人提起笔就写：

<button onclick="a()" value="a">click</button>

<script>
    function a(){
        alert(this.value);
    }
</script>

看上去好像符合逻辑，其实实际执行一看，弹出框里显示的是undefined。将此时的this打印一下，发现此时的this指的是window。

其实，这里我们为按钮绑定的onclick事件，表示的是对这个函数的引用，当我们点击这个按钮时，会在window下执行所绑定的函数。而不是想当然地认为此时是按钮这个dom在调用函数。

那么我们应该怎么达到我们的目的呢，方法有多种。

第一种是在函数调用的时候传入参数。

<button onclick="a(this.value)" value="a">click</button>
<script>
    function a(x){
        alert(x);
    }
</script>

也许你会觉得这种方法不符合你编程的思路，那么你可以试试另一种方法。

<button id="b" value="b">click</button>
<script>
function b(){
        alert(this.value)
    }
    document.getElementById("b").onclick = b;
</script>

这种方法同样可以解决问题。

可能看到这里你会疑惑，为什么这时候this.value又起作用了。

其实这里做的事与前面不同，这里是将b函数的内容赋值到了这个按钮的dom的onclick上，而不是调用window下的这个函数。当点击按钮时，调用的其实是按钮自身的函数，这是的this自然也就是指着这个按钮本身了。