用于调用没有（）的函数的js变量[重复]

Question

我想知道如何在不需要 () 的情况下做这样的事情：

let start = () => document.getElementById("#start");

目前我是这样使用的：

start().classList.remove("hidden");

但我想这样使用它：

start.classList.remove("hidden");

但它仍应调用该函数。我该怎么做？

Answer 1

我不认为有任何好的方法可以做到这一点，但是有一些丑陋且不推荐的方法。

• 您可以依赖 DOM elements with IDs 自动成为全局变量这一事实，而根本不使用 getElementById：

  start.classList.remove("hidden");
  

• 你可以让window.start 成为吸气剂：

Object.defineProperty(window, 'start', { get() { return document.getElementById("start"); } });

start.classList.remove("hidden");

.hidden {
  display: none;
}

<div id="start" class="hidden">foo</div>

• 您可以使用 with 和 getter（请不要这样做）：

with ({
  get start() { return document.getElementById("start"); }
}) {
  start.classList.remove("hidden");
}

.hidden {
  display: none;
}

<div id="start" class="hidden">foo</div>

如果 start 恰好是对象的一部分，而不是将其作为独立变量引用，那么在对象上放置一个 getter 将是一个更合理的解决方案：

const domElements = {
  get start() { return document.getElementById("start"); }
};
domElements.start.classList.remove("hidden");

.hidden {
  display: none;
}

<div id="start" class="hidden">foo</div>