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

Question

I'm trying to add to an element's classList in an environment where I don't have the spread syntax available. Using apply is failing with a 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

I must be doing something incorrectly, because this works with spread. What's the problem with this invocation of classList.add ?

Answer 1

Docs for Function.apply() :

The apply() method calls a function with a given this value, and arguments provided as an array (or an array-like object).

A natural question arises. What is this by default? This is where your misunderstanding stems.

Docs for this

Take this snippet for instance. It will create an object with a member method and put that object inside an outer object. What does it output?

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

This shows that this by default will be the innermost object. In your case, the code

tag.classList.add('green');

will use the innermost object (aka classList ) as this . You applied the outer object tag as this and that's why you get a TypeError.

Hope this is clear

Answer 2

You should use t instead of tag

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

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