为何this指向window而非a标签？Prototype.js场景问题排查

问题原因 #

用href="javascript:fullscreenmap(this)"这种写法时，this指向的是window对象，而非点击的a标签——因为javascript伪协议的执行上下文是全局作用域，所以函数里的link参数自然拿到的是window。

解决方案（三种可选） #

方案1：用Prototype的事件绑定（推荐） #

直接去掉href里的javascript代码，给a标签绑定click事件，这样能正确获取元素本身：

修改HTML：

<td class="thead" width="50%">
  <strong>Mappa</strong>&nbsp;-&nbsp;<a href="#" id="linkFullScreen">full screen mode</a>
</td>

修改JS：

document.observe('dom:loaded', function() {
  $("linkFullScreen").observe('click', function(e) {
    e.preventDefault(); // 阻止默认跳转行为
    $("tblMap").toggleClassName("overlay");
    if ($("tblMap").hasClassName("overlay")) {
      this.innerText = "exit full screen";
    } else {
      this.innerText = "full screen mode";
    }
  });
});

这里this在事件回调里直接指向触发点击的a标签，符合预期。

方案2：通过ID直接获取元素（最简单） #

既然a标签已经有唯一IDlinkFullScreen，函数里直接用Prototype的$()方法获取它，不用传参数：

修改JS：

function fullscreenmap() {
  var link = $("linkFullScreen");
  $("tblMap").toggleClassName("overlay");
  if ($("tblMap").hasClassName("overlay"))
    link.innerText = "exit full screen";
  else
    link.innerText = "full screen mode";
}

修改HTML的href：

<a href="javascript:fullscreenmap()" id="linkFullScreen">full screen mode</a>

方案3：改用onclick事件传this #

把javascript代码移到onclick里，onclick的执行上下文是元素本身，这里的this会指向a标签：

修改HTML：

<a href="javascript:void(0)" onclick="fullscreenmap(this)" id="linkFullScreen">full screen mode</a>

JS代码不用改，这样函数里的link参数就能拿到正确的a标签元素了。

内容的提问来源于stack exchange，提问作者FDB