锚点标签href中JavaScript的作用域及函数可访问性问题

嘿，这两个问题问得很实在，我来给你拆解清楚：

问题1：锚点标签（<a>）的href属性可以访问哪些JavaScript作用域？ #

当你用<a href="javascript:...">这种伪协议写法时，里面的代码是在全局执行上下文（也就是浏览器的window对象作用域）中运行的。具体来说：

• 它能直接访问所有在全局作用域声明的变量、函数（包括那些自动挂载到window对象上的全局成员）
• 代码里的this在非严格模式下会指向window，严格模式下this是undefined
• 它不能直接访问局部作用域（比如某个函数内部声明的变量/函数）里的内容——除非你主动把局部作用域的成员暴露到全局，或者通过DOM元素属性（比如dataset）、闭包引用等间接方式让全局上下文能拿到。

问题2：我有一个<a>标签，计划通过它调用JavaScript函数：<a href="javascript:doSomething();">link</a>，该函数需要声明在什么作用域内才能被访问？必须是全局作用域吗？ #

先说默认的直接调用场景：如果你就像这样直接写javascript:doSomething();，那doSomething确实需要在全局作用域（或者被挂载到window对象上，因为全局变量默认会成为window的属性）才能被访问到——毕竟这段代码是在全局上下文跑的，找不到局部作用域里的东西。

但！不是必须非要放在全局不可，有几个变通方法：

1. 把局部函数引用存到DOM元素上
   比如你在局部作用域里定义了函数，把它的引用存到a标签的dataset属性里，然后在javascript代码里通过this访问：

// 局部作用域内的函数
(function() {
  function doSomething() {
    alert('我是局部作用域的函数！');
  }
  // 将函数引用存入a标签的dataset
  document.querySelector('a[data-call-func]').dataset.callFunc = doSomething;
})();

对应的a标签写法：

<a href="javascript:this.dataset.callFunc();" data-call-func>点我调用局部函数</a>

2. 更推荐的方案：用事件绑定替代href伪协议
   其实不建议用href="javascript:..."这种写法（比如会破坏右键菜单的“在新标签页打开”功能，语义也不好），更规范的做法是用addEventListener绑定点击事件，这样事件处理函数的作用域可以灵活控制，完全不用依赖全局：

// 局部作用域内的函数
(function() {
  function doSomething() {
    alert('我在局部作用域里，直接就能被调用！');
  }
  // 绑定点击事件
  document.querySelector('a[data-action]').addEventListener('click', function(e) {
    e.preventDefault(); // 阻止a标签的默认跳转行为
    doSomething(); // 直接调用局部函数
  });
})();

对应的a标签可以写成：

<a href="#" data-action>点我</a>

（这里用href="#"是为了让它看起来像可点击的链接，也可以用href="javascript:void(0)"，但绑定事件+阻止默认的方式更灵活）

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