JavaScript中this.classList.toggle()调用及显示问题咨询

嘿，我来帮你理清这个困惑！

你的核心疑问是：明明console.dir(this.classList)看不到toggle()方法，为什么代码里还能调用它？这其实和JavaScript的原型链继承以及浏览器控制台的显示逻辑有关：

• DOMTokenList的方法在原型链上
  this.classList返回的是一个DOMTokenList对象，它的toggle()、add()、remove()这些方法并不是直接挂在这个对象本身上的，而是定义在它的原型对象（也就是DOMTokenList.prototype）上的。浏览器控制台默认展开对象时，只会显示对象自身的属性/方法，不会自动展开原型链部分，所以你看不到这些继承来的方法，但它们确实存在。

  你可以试试在控制台里手动展开__proto__（现代浏览器里显示为[[Prototype]]），就能找到toggle()方法了——所有DOMTokenList实例都能通过原型链访问到这些方法。

• 讲师代码里的小细节
  另外提个小点：讲师写的this.classList.toggle(box1)其实有个错误，这里的box1应该是字符串形式，也就是this.classList.toggle('box1')。如果不加引号，JavaScript会把box1当成一个变量，如果你的代码里没定义这个变量，运行时就会抛出ReferenceError。

• 验证方法
  你可以在点击事件里加一行代码测试：

  console.log(this.classList.toggle instanceof Function); // 会输出true，证明这个方法确实存在
  

总结一下：看不到方法不代表它不存在，只是控制台默认没展示原型链上的内容，DOMTokenList的toggle()方法是完全可以正常调用的~

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