JS 简单面试题 this指向问题_class this指向面试题-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_54550702/article/details/127143331

本文通过两个示例详细解析了JavaScript中this指向的问题。当直接调用方法时，this指向对象自身；作为事件处理器时，this指向触发事件的元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

this指向简单面试题

下面代码运行结果是什么？

<button id="btn" class="blue">按钮</button>

<script>
    let student = {
      className: "1111",
      say() {
        console.log(`className:${this.className}`);
      },
    };

    btn.onclick = student.say();
</script>

A：点击按钮后，控制台打印 className:blue

B：点击按钮后，控制台打印 className:1111

C：点击按钮无反应，页面加载时，控制台已经打印 className:blue

D：点击按钮无反应，页面加载时，控制台已经打印 className:1111

这道题目是很简单的一个 this指向面试题，正确答案是 D

解答：当 say 方法带括号时，将会自动执行该方法，此时 say 方法调用者是 student ，将直接执行 student 里面的 say 方法，执行打印语句，并将方法返回值返回，当方法无返回值将会返回 undefined

此时 btn.onclick = student.say() => btn.onclick = undefined 当我们点击按钮将不会产生任何操作(反应)

此时，this 指向没有发生改变，this 还是指向 student

这道题目还有另外一种提问方式：

<button id="btn" class="blue">按钮</button>

<script>
    let student = {
      className: "1111",
      say() {
        console.log(`className:${this.className}`);
      },
    };

    btn.onclick = student.say;
</script>

这时，这道题目的正确答案是 A

解答：此时 say 方法没有带括号，将不会自动调用，只是将 say 方法的引用赋值给 btn.onclick，当点击按钮时，say 方法的调用者将会变成 btn (button 标签)，this 的指向由最开始指向 student 变成现在指向 btn (button 标签) ，button 标签的 className 为 blue ，此时，我们点击按钮后，控制台将会打印 className:blue

因此，当调用方法时 this指向会随着调用者的改变而改变。

这便是 this指向中简单的面试题及其解答。