为什么要用深奥的函数而不是简单的函数呢?

Why have an abstruse function instead of a straightforward function?

本文关键字:函数 简单 为什么      更新时间:2023-09-26

我简化了我从某处得到的函数(log1)的这个深奥的函数模型。我已经研究过匿名函数和闭包,但我不认为它们适用于这里。与简单的函数(log2)相比,深奥的函数有什么优势吗?有人能解释一下为什么要用log1模型吗?并且,"log1"如何成为全局名称?

函数在为它们保留的div中累积文本。

<!DOCTYPE html>
<html><!-- HTML5 -->
<head>
  <meta charset="UTF-8">
  <title>..</title>
<script type="text/javascript">
(function() { // this is obviously the abstruse model
  this.log1 = function(txt) {
    var divid = document.getElementById("log1id");
    divid.innerHTML += "<br />" + txt;
    };
  })();
function log2(txt) { // this is obviously the straightforward model
  var divid = document.getElementById("log2id");
  divid.innerHTML += "<br />" + txt;
  };
window.onload = function() {
  log1("Message one");
  log2("Message one");
  log1("Message two");
  log2("Message two");
  }
</script>
</head>
<body>
<div>
body
<div id="log1id">--Log1:</div>
<div id="log2id">--Log2:</div>
</div>
</body>
</html>

在这种情况下,没有。它们是等价的。但是,如果您这样做:

(function() {
  var divid = document.getElementById("log1id");
  this.log1 = function(txt) {
    divid.innerHTML += "<br />" + txt;
    };
  })();
var divid = document.getElementById("log2id");
function log2(txt) { // this is obviously the straightforward model
  divid.innerHTML += "<br />" + txt;
};

那么它们确实不同:第二个版本会用divid污染全球环境,而第一个版本不会。

假设它们是在全局环境中求值的(其中this是全局对象),两个函数都是全局的。log2 = ...在没有var log2的情况下等于this.log2 = ..., log1的情况下不改变this,因此它们都将函数赋值给全局this的一个属性。

"深奥的"版本做同样的事情。唯一的区别是,在

结构的边界内声明的任何内容
(function() {
})();

仅在结构内部的作用域中。这被称为IIFE(立即调用的函数表达式),并提供了一种在javascript中实现封装的真正好方法。

所以如果log1不是this的属性,你就不能调用它。

在跨越多个文件的大型项目中,您可能会意外地使用变量/覆盖另一个文件中的变量。防止这种情况的一个好方法是将整个文件的主体包装在IIFE中。