javascript - 对函数变量的 JavaScript 控制台日志输出感到困惑

Question

对于 javascript/jquery 我是个初学者..所以如果这个问题听起来很愚蠢，请原谅我。

在经历this tutorial时，我尝试写入javascript console ，函数中一些变量的值——这样我可以更好地理解函数是如何工作的

$(document).ready(function(){
    $("div.post h2 a").click(function () {
    var a    = $(this),
    href = a.attr('href'),
    content  = a.parent().next();
    console.log('a='+a);
    console.log('a.get(0)='+a.get(0));
    console.log('a parent='+a.parent());
    console.log('a parent.get(0)='+a.parent().get(0));
    console.log("href="+href);
    console.log('content='+content);
    content.load(href + " #content");
    return false; 
});

我稍微修改了html

<div class="post">
    <h2 id="h21"><a href="other/mypage.html">My Page</a></h2>
    <div class="content">
        Teaser text1...
    </div>
</div>
<div class="post">
    <h2 id="h22"><a href="other/myotherpage.html">My Other Page</a></h2>
    <div class="content">
        Teaser text2...
    </div>
</div>
});

当我点击第一个链接时，我得到这个控制台日志输出

a=[object Object]
a.get(0)=file:///home/me/dev/misc/other/mypage.html
a parent=[object Object]
a parent.get(0)=[object HTMLHeadingElement]
href=other/mypage.html
content=[object Object]

我以为$(this)函数中的表达式将是被单击的元素(即第一个 <a element )。为什么它显示为 [object Object]。我无法弄清楚 a.get(0) 是如何出现的变成file:///home/me/dev/misc/other/mypage.html

同样，变量 content 不应该吗？等于第一个div (包含预告片文本1)？为什么显示为[object Object]？

Answer 1

这两行之间有区别:

console.log(content);
console.log('content=' + content);

第一个仅记录 content 变量。第二个执行连接操作，在记录字符串和对象之前将其连接起来。连接字符串和对象会导致调用对象的 toString 方法，从而生成 [object Object]。为了避免这种情况，请不要进行串联，而直接记录 content 。作为 Mindandmedia 的评论，您可以通过将值作为单独的参数传递给 console.log 来完成此操作:

console.log('content=', content);

最后，任何具有 href 属性的 native DOM 链接元素都具有 toString 方法。这将返回 href 值。因此 console.log('a.get(0)=' + a.get(0)) 获取 a 中第一个元素的 href 值 设置。