如何从动态属性调用和 Uncaught ReferenceError 中删除 eval()

Question

我正在尝试动态调用对象属性。我已经用 eval() 解决了这个问题，但我知道 eval 是邪恶的，我想以更好、更安全的方式做到这一点。我的评估代码：

            // onfocus
            var classes = this.getAttribute('class').split(' ');
            for(var i = 0; i < classes.length; ++i) {
                if(classes[i].match(/val\- */) !== null) {
                    var rule = classes[i].substr(4);
                    var instruction = eval('validate.instructionTexts.'+ rule +'()');

                    tooltip.appendChild( document.createTextNode(instruction) );
                }
            } 

我也有这个代码：

       // onblur
        var classes = this.getAttribute('class').split(' ');
        for( var i = 0; i < classes.length; ++i ){
            if(classes[i].match(/val\- */) !== null) {
                var rule = classes[ i ].substr( 4 );
                var tooltip = document.getElementsByClassName( 'tooltip' );
                for( i = 0; i < tooltip.length; ++i){
                    tooltip[ i ].style.display = 'none';
                }

                eval('validate.rules.'+ rule +'(' + (this.value) + ')');
            }

第二个代码的问题是我想向我的属性发送一个字符串。 this.value = 我在文本框中输入的文本，因此我从 this.value 中获得了正确的字符串，但出现了此错误。

如果我输入 foo. 未捕获的引用错误：foo 未定义。 Javascript 认为我试图发送一个变量，但我希望它发送一个字符串。我该如何解决这个问题？

Answer 1

1. HTML 元素的 CSS 类可以通过 className 属性直接从 JS 访问。
2. JS 对象属性可以通过点符号 object.property 或通过方括号符号 object['property'] 访问。
3. 正则表达式 /val\- */ 匹配字符串中任意位置的字符 v、a、l、“-”连字符以及零个或多个空格。
   • 空格完全无关，因为您正在测试按空格分割的字符串的结果（因此它不再包含任何空格）。
   • 此外，您没有锚定正则表达式，因此一类'eval- test' 也将被匹配。我怀疑这就是您要找的东西。
   • 如果您只是测试以 val- 开头的类，那么 indexOf 方法更容易阅读，而且可能也更高效。

我已经相应地调整了你的代码。我假设验证规则的类名均以 val- 开头，类名的其余部分是规则的名称：

// onfocus
var classes = this.className.split(' ');
for(var i = 0; i < classes.length; ++i) {
    if(classes[i].indexOf('val-') === 0) { // the class name starts with 'val-'
        var rule = classes[i].substr(4);
        var instruction = validate.instructionTexts[rule]();

        tooltip.appendChild(document.createTextNode(instruction));
    }
}


// onblur
var classes = this.className.split(' ');
for (var i = 0; i < classes.length; ++i ){
    if(classes[i].indexOf('val-') === 0) { // the class name starts with 'val-'
        var rule = classes[i].substr(4);
        var tooltip = document.getElementsByClassName('tooltip');
        for (i = 0; i < tooltip.length; ++i){
            tooltip[i].style.display = 'none';
        }

        validate.rules[rule](this.value);
    }
}

Answer 2

您不需要使用 eval，您可以通过以下方式访问它：

validate.rules[rule](this.value);

这也将解决您的其他问题，即您传入 this.value 的值，当 eval()'d 时没有被引用为字符串（'foo' 是），因此被解释为变量。

Answer 3

要从对象 obj 获取属性 foo，您可以使用

obj.foo

或

obj["foo"]

第一个不允许保留字或者属性包含空格。

所以你的第一个例子可以改为

validate.instructionTexts[rule]()