JavaScript类内无法引用类变量方法及外部变量定义问题求助

Hey there, let's work through the issues you're hitting—this is super common when combining ES6 classes with jQuery's $(document).ready() context, so you're definitely not alone!

问题1：类内无法引用类变量/方法 #

The biggest culprit here is almost always incorrect this binding, especially when you're using jQuery event callbacks or other async functions inside your class.

错误示例 #

class Game {
  constructor() {
    this.playerScore = 0;
    // 这里的回调函数里，`this`指向的是触发事件的DOM元素，不是Game实例
    $('#play-btn').click(function() {
      this.incrementScore(); // 会报错：this.incrementScore is not a function
    });
  }

  incrementScore() {
    this.playerScore++;
    console.log(`Score: ${this.playerScore}`);
  }
}

$(document).ready(function() {
  const gameInstance = new Game();
});

3种修复方案 #

1. 使用箭头函数（推荐，因为箭头函数会继承外层作用域的this）

$('#play-btn').click(() => {
  this.incrementScore(); // 现在`this`指向Game实例
});

2. 用bind()强制绑定this

$('#play-btn').click(function() {
  this.incrementScore();
}.bind(this)); // 把回调的`this`绑定到Game实例

3. 缓存this到变量（传统写法）

constructor() {
  const self = this; // 缓存Game实例的`this`
  this.playerScore = 0;
  $('#play-btn').click(function() {
    self.incrementScore(); // 用self访问Game实例
  });
}

问题2：类外定义变量报错 #

This usually boils down to scope issues—either your variables are trapped in a block scope, or you're trying to access them before they're initialized (since $(document).ready() runs after the initial page load).

常见错误场景 #

// 试图在ready外部访问ready内部的类实例变量
let gameInstance;

$(document).ready(function() {
  class Game {
    constructor() {
      this.number = 42;
    }
  }
  gameInstance = new Game();
});

// 这里会报错：gameInstance is undefined（因为ready还没执行）
console.log(gameInstance.number);

修复方案 #

1. 确保在ready执行后访问变量
   把需要访问变量的代码放在ready内部，或者用回调：

$(document).ready(function() {
  class Game {
    constructor() {
      this.number = 42;
    }
  }
  const gameInstance = new Game();
  console.log(gameInstance.number); // 正常输出42

  // 如果需要在其他地方用，把逻辑封装成函数调用
  runGameLogic(gameInstance);
});

function runGameLogic(game) {
  console.log(`Number from game: ${game.number}`);
}

2. 正确处理私有/公有变量
   如果你的类里用了私有字段（比如#test），直接在类外访问会报错。要暴露变量的话，用getter方法：

class Game {
  #test; // 私有字段，类外无法直接访问
  constructor() {
    this.number = 100; // 公有字段
    this.#test = "secret value";
  }

  getTestValue() {
    return this.#test; // 提供访问私有变量的方法
  }
}

$(document).ready(function() {
  const game = new Game();
  console.log(game.number); // 正常输出100
  console.log(game.getTestValue()); // 正常输出"secret value"
});

3. 避免全局变量（但如果必须用）
   如果一定要在ready外部访问，把变量挂到window对象上（不推荐，但应急可用）：

$(document).ready(function() {
  class Game {
    constructor() {
      this.number = 42;
    }
  }
  window.gameInstance = new Game();
});

// 确保在页面加载完成后再执行这段代码
setTimeout(() => {
  console.log(window.gameInstance.number);
}, 1000);

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