JavaScript中获取属性值如何避免返回[Object object]？代码求助

让我来帮你拆解这个问题～首先直接说结论：x.value这行代码完全是无效且多余的，它不仅起不到任何作用，还暴露了你attr方法里的逻辑漏洞，这也是你最终得到[Object object]的核心原因之一。

为什么x.value没用？ #

当你执行获取属性的分支（只传s不传v时），你把x赋值成了[x[0].getAttribute(s)]——这时候x是一个包裹着字符串的数组（比如你的例子里会变成["hulkster"]）。而数组对象本身根本没有value这个内置属性，所以这行代码除了产生一个无意义的undefined之外，什么都做不了，完全可以直接删掉。

你得到[Object object]的关键原因 #

你的attr方法最后总是返回this（也就是你的库对象obj），所以当你链式调用$('.kilo').cl('.uniform').attr('data-wrestler')时，变量wtf拿到的是整个库对象，而不是你想要的属性值。再加上你错误地把x改成了属性值数组，后续如果再链式调用其他方法（比如再调用.cl()）还会直接报错。

修正后的attr方法 #

我们需要区分设置属性和获取属性的逻辑：设置时返回this支持链式调用，获取时直接返回属性值，同时不要修改x的原有结构（保持它是DOM元素集合，方便后续操作）：

attr(s, v) {
  // 设置属性：遍历DOM元素设置属性，返回this支持链式调用
  if (s && v) {
    x.forEach(y => y.setAttribute(s, v));
    return this;
  } 
  // 获取属性：返回第一个元素的属性值，不修改x
  else if (s) {
    return x[0].getAttribute(s);
  }
  // 没有传参数的情况，返回this
  return this;
}

这样修改后，var wtf = $('.kilo').cl('.uniform').attr('data-wrestler')会直接拿到"hulkster"，你再console.log就不会出现[Object object]了。

额外的知识点提醒 #

• 数组对象没有value属性：数组的内置属性只有length、constructor等，以及各种原型方法（比如forEach、map），不要把它和表单元素的value属性混淆。
• 链式调用的设计：如果你的库要同时支持链式调用（设置操作）和返回具体值（获取操作），一定要在方法里区分两种场景的返回值。
• 不要随意修改核心变量x：x是你的库用来存储当前选中DOM元素的变量，获取属性时不要把它改成属性值，否则后续操作会因为x不再是DOM元素而失败。

内容的提问来源于stack exchange，提问作者RE666