<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>理解 this 是谁</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
<style>
div {border: 1px solid #aabbcc; border-radius: 5px; width: 130px; text-align: center;}
</style>
<script>
function clickme() {alert("this 是 " + this.id);}
function clickme2(this2) {alert("this2 是 " + this2.id);}
</script>
</head>
<body>
<br /><!-- 上下文语境相同，此时的 this 就是 div_1 -->
<div id="div_1" onclick="alert('this 是 ' + this.id);">div_1（点我）</div>
<br /><!-- 将函数 clickme 作为 div_2 的方法，函数中 this 就是 div_2 -->
<div id="div_2">div_2（点我）</div>
<script> div_2.onclick = clickme; </script>
<br /><!-- 不是调用函数的正常方法！ -->
<div id="div_3" onclick="clickme;">div_3（点我）</div>
<br /><!-- 直接调用函数，上下文语境改变，函数中 this 未知！ -->
<div id="div_4" onclick="clickme();">div_4（点我）</div>
<br /><!-- 将 this（div_5） 做为参数传递，函数中 this 就是 div_5 -->
<div id="div_5" onclick="clickme.call(this);">div_5（点我）</div>
<br /><!-- 将 this（div_6） 做为参数传递，函数中 this2 就是 div_6 -->
<div id="div_6" onclick="clickme2(this);">div_6（点我）</div>
</body>
</html>