-1

我在掌握如何将 javascript 函数/变量设为私有时遇到问题。我需要如何编辑它以使函数/变量像这样私有。

<html>
<head>
<style>
#panel, .flip {
  font-size: 16px;
  padding: 10px;
  text-align: center;
  background-color: #4CAF50;
  color: white;
  border: solid 1px #a6d8a8;
  margin: auto;
}

#panel {
  display: none;
}
</style>
</head>
<body>

<p class="flip" onclick="myFunction()">Click to show panel</p>

<div id="panel">
  <p>This panel contains a div element, which is hidden by default (display: none).</p>
  <p>It is styled with CSS and we use JavaScript to show it (display: block).</p>
  <p>How it works: Notice that the p element with class="flip" has an onclick attribute attached to it. When the user clicks on the p element, a function called myFunction() is executed, which changes the style of the div with id="panel" from display:none (hidden) to display:block (visible).</p>
  <p>You will learn more about JavaScript in our JavaScript Tutorial.</p>
</div>

<script>
function myFunction() {
  document.getElementById("panel").style.display = "block";
}
</script>

</body>
</html>
4

2 回答 2

2

你不能。

JavaScript 没有任何访问修饰符的概念（export在模块之外，但<script>具有内联脚本的元素不是 JavaScript 模块）。

此外，OOP 语言中的修饰符只对/类型private有意义，对自由函数没有意义（因为所有自由函数都是全局范围的），所以 of 的想法毫无意义。classstructprivate function myFunction() { ... }

目前在 JavaScript 生态系统中，当使用 JavaScript class（它只是prototype声明的语法糖）时，使用前导下划线来表示“私有”属性（包括函数）是司空见惯的——但这是一种约定，而不是一种语言特性，它也不会阻止从另一个脚本调用函数：

class Foobar {

    doSomething() { // <-- "public"
        // ...
    }

    _doSomethingElse() { // <-- the leading underscore is a hint to consumers not to use this property directly, but they can still call it if they want to.
        // ...
    }
}

var f = new Foobar();
f.doSomething();
f._doSomethingElse(); // <-- nothing stops a consumer from calling this function-property.

解决方法：

请注意，您可以拥有一个带有无法访问的匿名函数的 JavaScript 对象（使用class或仅使用 POJO），前提是您可以以不暴露它们的方式将它们连接起来 - 但这种方法的缺点是您自己的代码可以t 也直接调用它们。这种方法可用于设置事件处理程序而不会污染全局命名空间：

class Foobar {

    constructor() {

        (function() { // This is an IIFE

            const button = document.getElementById( 'foobar' );
            button.addEventListener( 'click', function() {
                alert("clicked!);
            } );

        })();
    }

}

在上面的代码中，click现在不能直接调用 IIFE 和事件处理函数，因为它们没有名称，并且在脚本运行后它们将不在范围内。

于 2020-03-17T22:01:18.183 回答
0

您可以通过将函数包装在特定范围内来使函数“私有”。

在您的示例中，这意味着将其包装在立即调用的函数表达式中：

(function () {
  function myFunction() {
    document.getElementById("panel").style.display = "block";
  }

  // myFunction is only available within the outer function context.
})();

这也意味着以下内容将不再起作用：

<p class="flip" onclick="myFunction()">Click to show panel</p>

myFunction不再公开可用，因此现在单击时会引发错误。addEventListener但是，当您仍处于与以下范围相同的范围内时，您可以设置它myFunction：

(function () {
  function myFunction() {
    document.getElementById("panel").style.display = "block";
  }

  for(const p of document.querySelectorAll("p.flip")) {
    p.addEventListener("click", myFunction);
  }
})();
于 2020-03-17T22:14:08.373 回答