如何重构此 JavaScript 以删除“with”语句答案

【问题标题】：How would this JavaScript be refactored to remove the 'with' statement如何重构此 JavaScript 以删除“with”语句
【发布时间】：2017-09-23 04:00:45
【问题描述】：

这是一个简单时钟应用的 JS。 ~~在 JS 中，'with' 语句不再使用。~~ 我想帮助理解如何在保留功能的同时删除使用 'with' 语句。谢谢你。

function moveHands() {
  with (new Date()) {
    h = 30 * (getHours() % 12 + getMinutes() / 60); // 30 degrees for each hour
    m = 6 * (getMinutes()); // 6 degrees each minute
    s = 6 * (getSeconds()); 
    // now rotate the clock via changing css

    document.getElementById('hours').style.cssText = "-webkit-transform:rotate(" + h + "deg);";
    document.getElementById('minutes').style.cssText = "-webkit-transform:rotate(" + m + "deg);";
    document.getElementById('seconds').style.cssText = "-webkit-transform:rotate(" + s + "deg);";

    setTimeout(moveHands, 1000);
  }
}
window.onload = moveHands;

【问题讨论】：

var d = new Date(); ..... d.getHours() .... 等
with 没有被弃用，它在ECMA-262的当前版本中。

标签： javascript refactoring with-statement

【解决方案1】：

来自MDN with documentation：

不推荐使用 with，并且在 ECMAScript 5 strict 中被禁止模式。推荐的替代方法是分配对象您要访问临时变量的属性。

基本上，这只是意味着您必须在使用之前将对象分配给变量，这是非常标准的。因此，在您的情况下，您的代码应如下所示：

function moveHands() {
  var date =  new Date();
    h = 30 * (date.getHours() % 12 + date.getMinutes() / 60); // 30 degrees for each hour
    m = 6 * (date.getMinutes()); // 6 degrees each minute
    s = 6 * (date.getSeconds()); 
    // now rotate the clock via changing css

    document.getElementById('hours').style.cssText = "-webkit-transform:rotate(" + h + "deg);";
    document.getElementById('minutes').style.cssText = "-webkit-transform:rotate(" + m + "deg);";
    document.getElementById('seconds').style.cssText = "-webkit-transform:rotate(" + s + "deg);";

    setTimeout(moveHands, 1000);

}

window.onload = moveHands;

【讨论】：

From the MDN with documentation - 我想说 OP 完全意识到这一点：p
谢谢！简单的修复，但正是需要的。

【解决方案2】：

只需将日期分配给变量，然后显式调用该变量的日期方法。

function moveHands() {
  var currentDate = new Date();

  h = 30 * (currentDate.getHours() % 12 + currentDate.getMinutes() / 60); // 30 degrees for each hour
  m = 6 * (currentDate.getMinutes()); // 6 degrees each minute
  s = 6 * (currentDate.getSeconds()); 
  // now rotate the clock via changing css

  document.getElementById('hours').style.cssText = "-webkit-transform:rotate(" + h + "deg);";
  document.getElementById('minutes').style.cssText = "-webkit-transform:rotate(" + m + "deg);";
  document.getElementById('seconds').style.cssText = "-webkit-transform:rotate(" + s + "deg);";

  setTimeout(moveHands, 1000);
}
window.onload = moveHands;

【讨论】：

【解决方案3】：

我只会使用局部变量。

function moveHands() {
  var date = new Date();
  h = 30 * (date.getHours() % 12 + date.getMinutes() / 60); // 30 degrees for each hour
  m = 6 * (date.getMinutes()); // 6 degrees each minute
  s = 6 * (date.getSeconds()); 
  // now rotate the clock via changing css

  document.getElementById('hours').style.cssText = "-webkit-transform:rotate(" + h + "deg);";
  document.getElementById('minutes').style.cssText = "-webkit-transform:rotate(" + m + "deg);";
  document.getElementById('seconds').style.cssText = "-webkit-transform:rotate(" + s + "deg);";

  setTimeout(moveHands, 1000);
}
window.onload = moveHands;

【讨论】：

这种方法解决了这个问题。小心，因为您的代码在作为局部变量的“日期”和“数据”之间切换，但我明白你的意思。感谢您的帮助。
@user1486510 感谢您指出这一点。我总是打错字:(我编辑了帖子。