JavaScript中this无法指向嵌套函数及timedFlip的解决方案咨询

嘿，从Python后端转过来接触JS，this的指向确实是个容易让人懵的点，我来帮你搞定这两个问题，结合你的代码一步步说清楚！

首先得明确：JS里this的指向不是定义时决定的，而是调用时决定的。如果在一个函数里嵌套另一个函数，默认情况下嵌套函数里的this会指向全局对象（浏览器里是window），而不是外部函数的this。

举个贴近你场景的例子：

function flipCard() {
  // 这里的this是点击的卡片元素
  this.cardId = this.getAttribute('data-id');
  
  // 嵌套函数
  function logCardInfo() {
    // 默认情况下，这里的this是window，不是外部的卡片元素
    console.log(this.cardId); // 会输出undefined
  }
  logCardInfo();
}

解决方法有三种，按需选择：

• 方法1：把外部的this存到变量里（最传统的方式，兼容性拉满）

  function flipCard() {
    const that = this; // 把当前卡片的this存到that变量里
    that.cardId = that.getAttribute('data-id');
    
    function logCardInfo() {
      console.log(that.cardId); // 现在能正确访问卡片元素的属性了
    }
    logCardInfo();
  }
  

• 方法2：使用箭头函数（ES6+写法，箭头函数没有自己的this，会直接继承外层作用域的this）

  function flipCard() {
    this.cardId = this.getAttribute('data-id');
    
    const logCardInfo = () => {
      console.log(this.cardId); // 箭头函数的this就是外层flipCard的this
    }
    logCardInfo();
  }
  

• 方法3：用bind()强制绑定this

  function flipCard() {
    this.cardId = this.getAttribute('data-id');
    
    function logCardInfo() {
      console.log(this.cardId);
    }
    logCardInfo.bind(this)(); // 把logCardInfo的this绑定到flipCard的this
  }
  

看你的代码，flipBack是绑定在卡片元素的click事件上的，所以flipBack里的this是触发点击的卡片元素。但你直接调用setInterval(timedFlip, 3000)时，timedFlip的this会默认指向window，而不是卡片元素，所以this.setAttribute会直接报错——毕竟window没有这个方法。

这里给你两种适配你代码的解决方案：

方案1：用bind()绑定timedFlip的this #

修改flipBack函数，把当前卡片的this绑定到timedFlip上：

function flipBack() {
  // 绑定this为当前卡片元素，这样timedFlip里的this就是卡片
  setInterval(timedFlip.bind(this), 3000);
}

这样当timedFlip被定时器调用时，this就会指向触发点击的卡片元素，setAttribute就能正常工作了。

方案2：用箭头函数作为setInterval的回调 #

箭头函数会继承外层flipBack的this，可以直接把逻辑写在箭头函数里，省掉单独的timedFlip：

function flipBack() {
  setInterval(() => {
    // 这里的this就是flipBack里的this（卡片元素）
    this.setAttribute('src', 'images/back.png');
  }, 3000);
}

另外给你提个小优化点：你的flipBack和flipCard都绑定在同一个click事件上，重复点击卡片会创建多个定时器，导致卡片频繁翻转。可以加个定时器ID变量来避免这个问题：

let flipTimer = null;
function flipBack() {
  // 先清除之前的定时器，避免重复触发
  if (flipTimer) clearInterval(flipTimer);
  flipTimer = setInterval(timedFlip.bind(this), 3000);
}

最后补一句：Python里的self是显式传递的参数，而JS的this是隐式绑定的，调用方式不同指向就不同，记住这个核心差异，慢慢就能摸透this的脾气啦！

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