Javascript 如何使用；这"；关键字inside事件监听器在类的方法中，而不丢失对类参数和方法参数的访问？

我正在尝试学习“this”关键字在各种上下文中的用法，到目前为止，我发现的所有资源，包括stackoverflow中提出的类似问题，都让我感到困惑。其中包括一些使用.bind和.proxy方法的方法。希望有人能更清楚地解释如何解决所附代码段注释中描述的问题

类实体{
构造函数（entityArgs）{
this.entityArgs=entityArgs；
}
方法（methodArgs）{
$（'.button'）。在（'click'，函数（事件）{
event.preventDefault（）；
//应返回单击的按钮。代码似乎有效
$（“#结果”）.append（“
单击：”+$（this.text（）+”
）；
//应按照以下要求返回“testMethodArg”。代码似乎有效
$（'#result'）.append（'methodArgs:'+methodArgs+'
'）；
//应按照以下要求返回“testEntityArg”。不工作-这就是问题所在
$（'#result'）.append（'entityArgs:'+this.entityArgs+'
'）；
})
}
}
$（函数（）{
const obj=新实体（'testEntityArg'）；
对象方法（'testMethodArg'）；
})

文件
按钮1


按钮2

jquery的

on（）

函数中的

this

关键字将引用DOM元素

按钮。如果需要访问此

的父级上下文，可以将其放入变量中

类实体{
构造函数（entityArgs）{
this.entityArgs=entityArgs；
}
方法（methodArgs）{
var实体_this=此；
$（'.button'）。在（'click'，函数（事件）{
log（“此关键字来自函数内部：”）；
console.log（this）；
log（“父类中的此关键字：”）；
console.log（实体_this）；
event.preventDefault（）；
//应返回单击的按钮。代码似乎有效
$（“#结果”）.append（“
单击：”+$（this.text（）+”
）；
//应按照以下要求返回“testMethodArg”。代码似乎有效
$（'#result'）.append（'methodArgs:'+methodArgs+'
'）；
//应按照以下要求返回“testEntityArg”。不工作-这就是问题所在
$（'#result'）.append（'entityArgs:'+entity_this.entityArgs+'
'）；
})
}
}
$（函数（）{
const obj=新实体（'testEntityArg'）；
对象方法（'testMethodArg'）；
})

文件
按钮1


按钮2

框中的“此”

这是另一个稍微复杂一点的用法。我为自己做的只是为了玩玩“这个”。我希望这有助于阐明“这一点”

const-box=document.querySelectorAll（'div'））
常量键=对象键（框）//4.
常量boxArray=[]
const-boxarydotfrom=Array.from（boxArray）
框。forEach（（框，i）=>{
box.addEventListener（'click'，function logStyle（）{
设w=this.clientWidth；
设h=this.clientHeight；
let style=getComputedStyle（此）
设c=style.backgroundColor
设指数=i
如果（boxArray==0）{
boxArray.push（一）
}否则{
boxArray.shift（）
boxArray.push（一）
}
this.nextElementSibling.innerHTML=`box#${index}的下一个同级
`
this.innerHTML+=`这是索引#${index}`
this.innerHTML+=`boxArray=${boxArray}`
this.innerHTML+=`
'listener'，H'，${H}'，W'，${W}'，Color'，${c}`
console.log（“”，this.textContent）
console.log（'boxArray'，boxArray）
log（'listener'，H'，H'，W'，W'，Color'，c）
});
}，这个）
body，
html{
字体：1.1rem系统界面；
背景颜色：黄色；
显示：网格；
网格模板列：重复（自动拟合，最小值（300px，1fr））；
栅隙：10px；
}
div{
填充：10px0；
过渡：所有输入输出1秒；
光标：十字线；
}
.box3{
最小高度：50px；
背景色：红色；
}
.box0{
/*宽度：75px*/
最小高度：60px；
背景颜色：绿色；
}
.box1{
/*宽度：100px*/
最小高度：70px；
背景颜色：蓝色；
}
.box2{
最小高度：100px；
背景色：淡蓝色；
}







在“$（'#result'）.append（'entityArgs:'+this.entityArgs+'
'）中“this”的结果绑定到返回的“.button”DOM对象，而this.entityArgs在DOM对象上不存在，因此调用this.entityArgs会产生未定义的结果。
要获取对实体类的引用，可以将其存储在方法函数的变量中。可以使方法函数如下所示：

method(methodArgs){
      let entityArgs = this.entityArgs
    $(".button").on("click", function (event) {
      event.preventDefault();
      // Should return the button clicked. Codes seem to work
      $("#result").append("<br> clicked: " + $(this).text() + "<br>");
      // Should return 'testMethodArg' as per below . Codes seem to work
      $("#result").append("methodArgs: " + methodArgs + "<br>");
      // Should return 'testEntityArg' as per below. NOT WORKING - this is the problem
      $("#result").append("entityArgs: " + entityArgs + "<br>");
    });
  }

方法（methodArgs）{
设entityArgs=this.entityArgs
$（“.button”）。在（“单击”）上，函数（事件）{
event.preventDefault（）；
//应返回单击的按钮。代码似乎有效
$（“#结果”）.append（
单击：“+$（this.text（）+”
”）；
//应按照以下要求返回“testMethodArg”。代码似乎有效
$（“#结果”）。追加（“methodArgs:+methodArgs+”
”；
//应按照以下要求返回“testEntityArg”。不工作-这就是问题所在
$（“#结果”）。追加（“entityArgs:+entityArgs+”
”；
});
}
$（'#result'）.append（'entityArgs:'+this.entityArgs+'
'）
，
this
是您单击的按钮的DOM版本。为了澄清，我倾向于OP的“this”关键字在各种上下文中的使用”和“混乱”情绪。谢谢@Nick！然而，克里斯蒂安下面的回答更灵活。