jQuery中函数内的this始终返回document问题求助

Hey there! Let's break down why this is pointing to the document object in your functions when using Pug.js, and how to fix this issue.

核心原因：Pug的编译上下文 #

Pug会把模板代码编译成一个在全局上下文运行的JavaScript函数（浏览器环境下，全局上下文默认对应document或window，具体取决于严格模式）。如果你直接在Pug模板里定义或调用函数，却没有显式指定执行上下文，this就会自动指向全局的document对象。

举个例子，这段Pug代码：

script.
  function logThis() {
    console.log(this); // 在浏览器中会输出`document`
  }
  logThis();

编译后在浏览器执行时，logThis运行在全局作用域里，所以this自然映射到document。

解决方法：手动控制this指向 #

你有几种可靠的方式让this指向你期望的对象：

• 使用箭头函数
  箭头函数会继承外层作用域的this上下文。如果你在Vue、React这类组件框架里使用Pug，这个方法能让this直接指向组件实例：

  script.
    const logComponentContext = () => {
      console.log(this); // 指向组件实例，而非document
    }
    logComponentContext();
  

• 用bind()绑定上下文
  在定义或调用函数时，显式把它绑定到目标对象上：

  script.
    const myCustomObj = { message: "来自自定义对象的问候！" };
    function logMessage() {
      console.log(this.message);
    }
    // 先把函数绑定到myCustomObj再调用
    const boundFunction = logMessage.bind(myCustomObj);
    boundFunction(); // 输出"来自自定义对象的问候！"
  

• 使用call()或apply()
  调用函数时直接指定上下文：

  script.
    const myCustomObj = { message: "来自自定义对象的问候！" };
    function logMessage() {
      console.log(this.message);
    }
    // 以myCustomObj作为`this`调用函数
    logMessage.call(myCustomObj); // 输出"来自自定义对象的问候！"
  

• 完全避免依赖this
  如果可以的话，直接把目标对象作为参数传递，这种方式更直观，也能避免上下文混淆：

  - const user = { name: "Pun Wai" };
  script.
    function showUserName(user) {
      console.log(user.name);
    }
    showUserName(#{user}); // 输出"Pun Wai"
  

内容的提问来源于stack exchange，提问作者Pun Wai