javascript - 为什么此代码中的 console.log 返回 undefined？

Question

var el = $('.container');
var anchors = new Array('jobs', 'portfolio', 'docs', 'interier', 'price');
for (var i = 0; i < anchors.length; i++) {
    el.on('click', 'a[href$="#'+anchors[i]+'"]', function (e) {
        e.preventDefault();
        console.log(anchors[i]);
        $.scrollTo('a[name="'+anchors[i]+'"]');
    });
};

Answer 1

当您单击该元素时，i将增加到 的值anchors.length。

您的点击处理程序具有对i.

JavaScript 中未解析的属性查找返回undefined.

this用作元素的引用会容易得多。否则，找到一种i按值传递值的方法，而不是直接引用它。

Answer 2

你得到未定义的原因是因为i实际上等于5. 看看这个：

for ( var i = 0; i < 5; i++ ) {
    console.log( i );
}

现在，在该循环完成后，您会认为i此时它是未定义的，因为它应该是for循环的本地。不幸的是，这种情况并非如此。一个简单的测试方法：

for ( var i = 0; i < 5; i++ ) {
    console.log( i );
}

console.log( i ) // Logs out 5;

简而言之，i++for 循环在真值测试部分i < 5bit 之后执行。因此，当i等于 时4，循环运行，然后它增加i++，这将值设置i为 5，这反过来又使真值测试失败。

因此，既然您知道i等于5，那么当您在anchors数组中进行查找时，anchors[5]它是未定义的。

这很重要的原因是因为每次点击事件触发时，它都会执行缓存值i5，反过来，您将始终记录 undefined

i为了解决这个问题，我们可以为like的值创建一个别名

var el = $('.container');
var anchors = new Array('jobs', 'portfolio', 'docs', 'interier', 'price');

for (var i = 0; i < anchors.length; i++) {

    // By passing the value to this self executing function,
    // it creates a new instance of the variable
    ( function ( index ) {
        el.on('click', 'a[href$="#'+anchors[index]+'"]', function (e) {
        e.preventDefault();
            console.log(anchors[index]);
            $.scrollTo('a[name="'+anchors[index]+'"]');
        });
    })( i );

};

Answer 3

变量i获得了最后一个循环的值。如果要访问锚点，可以使用：

 console.log($(this).attr('href').substr(1));