Javascript 覆盖相同的命名函数，尽管在 Chrome 中有条件

Javascript Overwriting Same Named Functions Despite Conditionals In Chrome

本文关键字：Chrome 有条件 函数 覆盖 Javascript      更新时间：2023-09-26

在我的javascript文件中，我正在使用var screenheight = window.screen.height

我使用此高度测量值来确定是使用一组函数还是使用一组几乎相同的函数。所有函数都有完全相同的名称，但如果某人的屏幕高度高于某个阈值，他们将得到一组而不是另一组。

这在Firefox中工作得很好，但是在Chrome中，无论如何它都使用后一组功能。

关于此行为的另一个奇怪之处在于，在我在其条件中拥有函数集之前，我有一个条件，该条件根据屏幕高度调用正确设置某些元素的样式。

我不知道它为什么要这样做。它看起来类似于下面的这种过度简化。

var screenheight = window.screen.height;
window.onload = init;
function init() {
if(screenheight > 800 && screenheight <= 1100) {
document.getElementById("someid").style.height = 700px;
}
}
if(screenheight > 700 && screenheight <= 800) {
function functionone() {
document.getElementById("someotherid").style.height = 500px;
}
} else if(screenheight > 800 && screenheight <= 1000) {
function functionone() {
document.getElementById("someotherid").style.height = 600px;
}
}

这在Firefox中运行良好，但Chrome更喜欢第二个版本的functionone()

编辑：为了清楚起见，我清理了一下假代码。缺少括号和格式错误的条件。

Javascript 不会使用块作用域，除非你使用 'let' 关键字。

看起来有一些错别字会阻止 chrome 运行它。

  • PX 值缺少引号
  • <= 之前的缺失值
  • 非闭合函数，
  • 未调用的函数
  • 未关闭的否则 if 语句

这是未经测试的，但请尝试修复语法。

var screenheight = window.screen.height;
window.onload = init;
function init() {
  if(screenheight > 800 && screenheight <= 1100) {
    document.getElementById("someid").style.height = '700px';
  }
}
if(screenheight > 700 && screenheight <= 800) {
  (function functionone () {
    document.getElementById("someotherid").style.height = '500px';
  })();
} else if(screenheight > 800 && screenheight <= 1000) {
  (function functionone() {
    document.getElementById("someotherid").style.height = '600px';
  })();
}
JavaScript 没有块级作用域

（变量作用域为大括号）;相反，JavaScript 具有函数级作用域。函数内声明的变量是局部变量，只能在该函数内或由该函数内的函数访问。裁判

在 JavaScript 中，所有全局函数都child window对象。

在此示例中，稍后在代码中声明的function functionone()将始终重写前面的函数。

它将很像这样：

var obj = {
  a: 10
};
obj.a = 20;
alert(obj.a);

您可以尝试此方法：

var screenheight = window.screen.height;
//screenheight = 900;
var functionone = (function() {
  if (screenheight > 700 && screenheight <= 800) {
    return function() {
      document.getElementById("someotherid").style.height = '500px';
    }
  } else if (screenheight > 800 && screenheight <= 1000) {
    return function() {
      document.getElementById("someotherid").style.height = '600px';
    }
  }
})();
console.log(functionone);
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<div id="someotherid"></div>

编辑：您在代码中的条件中有语法错误，缺少引号和缺少变量，如 curtwphillips 突出显示的那样

相关文章：