JS – 将 this.property (event.target.property) 链接到变量名（没有 eval()）答案

【问题标题】：JS – link this.property (event.target.property) to variable name (without eval())JS – 将 this.property (event.target.property) 链接到变量名（没有 eval()）
【发布时间】：2018-01-15 12:56:57
【问题描述】：

我正在编写一个简单的客户端表单验证代码。我正在尝试使用验证过程中使用的属性和值创建对象（对于每个单独的输入），然后将它们附加到输入节点。

我正在尝试找到一种方法将这些对象自动与相应的输入配对。在下面的代码中，我找到了一种方法来做到这一点，但代价是使用 eval() 函数，我宁愿避免。在JS中还有其他方法可以做到这一点吗？

<label class="c-contact-form__label" for="your_name">Your Name *</label>
<input class="" type="text" name="your_name" maxlength="50" size="30">

var your_name = {
  regex: /^([a-z\u00C0-\u02AB,.'´`]{1,}\.?\s?)([a-z\u00C0-\u02AB,.'´`]?\.?\s?)+$/i,
  required: true,
  invalid: "Your name seems a little bit weird…",
  empty: "Please, fill in your name."
};

// From within a function of eventListener:

var Merged = Object.assign(this, eval(this.name)); // Use of eval()
console.log(Merged.invalid); // "Your name seems a little bit weird…",

我非常努力地寻找解决方案，并且我已经阅读了可能的 context[varName] 解决方案，但它似乎不起作用（或者我不明白）。

【问题讨论】：

Convert string to variable name in JavaScript的可能重复

标签： javascript validation variables eval dry

【解决方案1】：

您可以使用 eval() 或 context[varName]。 Context 可以是带有 var、const 或 let 的变量，如果您需要它是全局的，则可以直接使用 window[varName]。

【讨论】：

谢谢。我已经在 SO 上阅读了类似的问题，但我可能无法获得 context[varName] 解决方案。 this[name] 或 this['name'] 在最后一行返回 undefined。

【解决方案2】：

问题在于原始代码被包装在 IIFE 中。因此 - AFAIK - 它不能使用括号符号来访问，因为它不存在于全局范围内，并且对象本身没有父对象。

const foo = (() => {
  let bar = 'obj';
  const obj = {
    // not accessible by [var]whatever. AFAIK
    whatever: 'bar',
  } 
  console.log([bar].whatever); // undefined
})();

我通过将对象包装到父对象中来解决它：

const foo = (() => {
  let bar = 'obj';
  const parent = {
    //now accessible by parent[bar].
    obj: {
      whatever: 'bar',
    }
  }
  console.log(parent[bar].whatever); // bar
})();

【讨论】：