我在掌握如何将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>
答案 0 :(得分:2)
您不能。
JavaScript没有访问修饰符的概念(模块中export
之外,但是带有内联脚本的<script>
元素不是JavaScript模块)。
此外,OOP语言中的private
修饰符仅对class
/ struct
类型有意义,而对free-functions不适用(因为所有自由函数都是全局范围的),因此private 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),前提是您可以将它们连接到一种不会暴露它们的方法-但是这种方法的缺点是您自己的代码也不能直接调用它们。此方法可用于设置事件处理程序,而不会污染全局名称空间:
class Foobar {
constructor() {
(function() { // This is an IIFE
const button = document.getElementById( 'foobar' );
button.addEventListener( 'click', function() {
alert("clicked!);
} );
})();
}
}
在上面的代码中,IIFE和click
事件处理程序函数现在无法直接调用,因为它们没有名称,并且在脚本运行后它们将不在作用域内。
答案 1 :(得分:0)
您可以通过将函数包装在一定范围内来使它们“私有”。
在您的示例中,这意味着将其包装在immediately invoked function expression中:
(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
不再公开可用,因此,单击此按钮将引发错误。但是,当您仍与myFunction
处于同一范围时,可以通过addEventListener
进行设置:
(function () {
function myFunction() {
document.getElementById("panel").style.display = "block";
}
for(const p of document.querySelectorAll("p.flip")) {
p.addEventListener("click", myFunction);
}
})();