【js】--- DOM元素属性值如果设置为对象

结论：内部会调用toString方法，将设置的对象转换为字符串添加给相应的属性；

这个问题呢，是通过jQuery的each方法中，回调函数的this指向问题而来；

我们知道，回调函数中的this如果指向的是基本数据类型，那么系统会自动将这个基本数据类型的值包装为对应的对象类型；

就比如：

let arr = ['aaa', 'bbb', 'ccc'];
$(arr).each(function() {
  console.log(this);
})

数组里面存的是string类型的值，然后jq实例调用each方法，打印的this如下图所示：

1264576-20171109224848013-730439497.png

this指向的基本数据类型的值被转换为了String类型；
但是这里说的不是这个问题，而是和这个问题类似，我们在给DOM元素设置属性值的时候，如果设置的是对象呢？
获取页面中的span，然后给两个span分别设置属性‘a’，属性值为两个对象：

let span1 = document.querySelectorAll('span')[0];
let span2 = document.querySelectorAll('span')[1];

span1.setAttribute('a', {a: 'a', b: 'b'});
span2.setAttribute('a', new String('abcd'));

看看设置后显示的结果：

1264576-20171109230515653-504716735.png

第一个属性值：内部调用toString方法将{a : 'a',b : 'b'}对象转换为字符串设置；

第二个属性值：同理，也是调用toString方法将String对象的实例转换为字符串设置；

那么，我们在回到jQuery中，

如果用each方法给DOM添加属性值；

jQuery中的each方法的回调函数中的this，如果指向的是字符串类型的数据，那么在回调函数中操作this给元素添加属性值，是没有问题的，因为this即使被转换为了相应的对象类型数据，那么再给DOM元素添加的时候，内部会调用toString方法在对象类型的数据转换为字符串添加，就相当于‘又折腾回来了’；

那么，如果this指向的不是字符串类型数据，那么就操作参数吧~

好了，那就到这儿吧，如果有不对的地方，欢迎大家指正，望在前端的道路上共勉！