Question

我正在尝试在没有可用传播语法的环境中添加到元素的classList。使用apply失败并出现TypeError：

const classes = 'red blue';
const tag = document.querySelector('#tag')
const list =  classes.split(/\s/);
console.log(list); // ['red', 'blue']
tag.classList.add.apply(tag, list); // Error
tag.classList.add('green'); // doesn't happen

.blue {
  background: blue
}
.red {
  color: red;
}
.green {
  border: 3px double green;
}

<p id="tag">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat nam nihil sed, dicta, maxime, atque nulla voluptatibus necessitatibus aliquam quasi inventore voluptas dolore labore ratione officia! Rerum vel, similique perferendis?</p>

Uncaught TypeError: Illegal invocation

我肯定做错了某事，因为这与传播有关。对此classList.add的调用有什么问题？

Answer 1

Function.apply()的文档：

apply（）方法调用具有给定this值的函数，并以数组（或类似数组的对象）的形式提供参数。

一个自然的问题出现了。默认情况下，this是什么？这就是您误会的根源。

this的文档

以该代码段为例。它将使用成员方法创建一个对象，然后将该对象放入外部对象中。它输出什么？

innerObj = 
{
  a: "inner",
  func: function() {
    return this.a;
  },
};

outerObj = {
  a: "outer",
  inner : innerObj
};

console.log(outerObj.inner.func())

这表明默认情况下，this将是最里面的对象。就您而言，代码

tag.classList.add('green');

将最里面的对象（也称为classList）用作this。您将外部对象tag用作this，这就是为什么出现TypeError的原因。

希望这很清楚

Answer 2

您应使用 t 而不是标记

const classes = 'red blue';
const t = document.querySelector('#tag')
const list =  classes.split(/\s/);

t.classList.add.apply(t, list);

为什么不能与classList一起使用？

2 个答案: