原生JS脚本迁移至React后嵌套函数丢失this指向问题求助

问题根因 #

该问题和React、webpack本身的机制没有直接关联，本质是JavaScriptthis的动态绑定特性导致的。
this的指向不取决于函数定义的位置，只取决于函数被调用的方式。你迁移到React项目后触发this丢失的常见原因如下：

• 你将gotoAndPlay或otherFunction单独提取出来作为回调使用，比如传入React的事件处理函数、setTimeout定时器、Promise回调等场景，此时函数脱离了原实例的调用上下文，非严格模式下this会默认指向window，严格模式下this会为undefined。
• webpack打包后的代码默认会启用严格模式，如果你之前的独立脚本运行在非严格模式下，也会放大this绑定的差异表现。

举个React项目里常见的错误调用示例：

function PlayBtn() {
  const movieClip = new lib.AnMovieClip();
  // ❌ 错误：直接把方法提取为回调，丢失了movieClip的实例上下文
  const handleClick = movieClip.gotoAndPlay;
  return <button onClick={handleClick}>点击播放</button>
}

修复方案 #

你可以任选以下任意一种方案修复：

1. 调用时手动绑定上下文
   传递回调时用箭头函数包裹，保留实例引用：

   // ✅ 正确：箭头函数里始终用movieClip实例调用方法，this不会丢失
   const handleClick = () => movieClip.gotoAndPlay();
   

   也可以用bind提前绑定实例：

   const handleClick = movieClip.gotoAndPlay.bind(movieClip);
   

2. 改造原JS脚本的类定义，提前绑定所有方法的this：

   lib.AnMovieClip = function() {
     this.testVariable = true;
     // 构造函数内提前绑定所有方法的this指向当前实例
     this.gotoAndPlay = this.gotoAndPlay.bind(this);
     this.otherFunction = this.otherFunction.bind(this);
   }
   lib.AnMovieClip.prototype.gotoAndPlay = function(){
     this.otherFunction();
   }
   lib.AnMovieClip.prototype.otherFunction = function(){
     console.log(this.testVariable); 
   }
   

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