为什么会出现这种词法范围的不匹配？

Question

这个问题在 Node 6.9.4 和 7.0.0 中都会出现，我不知道为什么。我没有在其他版本中测试过。请参阅下面 Node.js 程序中的评论：

const express = require('express');
const adaro = require('adaro');

const app = express();

const tabs = require('./config/tabs.json');
const config = require('./config/locals.js');

function getLocals(name) {
  const modifiedTabs = config.tabs.map(tab => {
    return Object.assign(tab, {active: tab.name === name});
  });

  return Object.assign({tab: name}, config, {tabs: modifiedTabs});
}

app.engine('dust', adaro.dust());
app.set('view engine', 'dust');
app.set('x-powered-by', false);

app.use(express.static('static'));

tabs.map(tab => tab.name).forEach(name => {
  const locals = getLocals(name);
  const tab = locals.tabs.find(tab => tab.active);

  // these are always true
  console.log(tab === locals.tabs.find(tab => tab.active));

  function callback(req, res) {
    // const locals = getLocals(name);
    // this should be true, but is false unless the line above is commented in
    console.log(tab === locals.tabs.find(tab => tab.active));
    res.render('main', locals);
  }

  if (tab.url !== '/' + tab.id) {
    app.get(tab.url, callback);
  }

  app.get('/' + tab.id, callback);
});

app.all('*', function (req, res) {
  res.sendStatus(404);
});

app.listen(process.env.PORT || 8000);

任何人都可以解释为什么会发生这种情况以及如何解决它吗？

Answer 1

我发现了问题。在 getLocals() 中，我正在执行

const modifiedTabs = config.tabs.map(tab => {
  return Object.assign(tab, {active: tab.name === name});
});

Object.assign(tab, ...) 每次调用时都会覆盖现有的 tab 对象，只留下每个选项卡的最后一次分配。因此所有视图都将数组中的最后一个选项卡显示为活动状态，因为它们的所有 active 属性都已被最后一个选项卡配置的属性覆盖。

解决方案是将参数切换为 Object.assign() 以便创建返回的对象而不是覆盖它：

return Object.assign({active: tab.name === name}, tab);

为什么会出现这种词法范围的不匹配？

Why does this mismatch in lexical scoping occur?

javascript

debugging

node.js

lexical-scope