javascript - 将函数作为事件处理程序上的回调传递时，在我的JavaScript项目中获取不正确的值

在这里，我刚刚提取了我有问题的代码部分，因为它是带有clickInfo方法的对象，当单击html中的testDivbtn时我想使用该对象

var product = {
        jsondata:[
        {title:"GearBox", price:80000},
        {title:"Clutch", price:7000}
        ],
    loadInfo:function (event) {
    ​   // This line is printing first product info from the jsondata array​ - just to test
     console.log (this.jsondata[0].title + " " + this.jsondata[0].price);
      }
}

这是附加到点击处理程序的简单div

$ ("#testDivbtn").click(product.loadInfo);

这是html

<div class="col-sm6"><button id="#testDivbtn" type="button" class="btn btn-default">Test Product</button></div>

它在控制台中显示错误-无法读取未定义的属性“ 0”
我在我的应用程序中的许多其他地方都存在此错误，如果有任何错误，这将非常有帮助。

最佳答案

在这里，您需要了解一些与正确使用“ this”对象有关的概念。一些方法，例如bind（）-（从ES5开始），apply（）和call（）。
  现在，如我所见，您的代码将
  尝试详细解释一下
  
  
    这里的按钮$（“＃testDivbtn”）本身就是一个对象，您将product.loadInfo方法传递给它的click（）方法作为回调，因为它位于product.loadInfo方法内部，不再引用产品对象。现在，“ this”将指向product.loadInfo所在的对象
     方法被执行，因为这是在该方法中定义的。
     调用product.loadInfo的对象是按钮对象，product.loadInfo将在按钮对象的click方法中执行。
  


即使您使用product.loadInfo（）调用loadInfo（）方法
在这一点上，很明显，当上下文改变时，当我们在对象最初定义的位置以外的其他对象上执行方法时，


  “ this”关键字不再引用最初定义“ this”的原始对象，而是现在引用调用该方法的对象。
  
  
    将方法作为回调函数传递时解决此问题的解决方案：
    由于您确实希望this.jsondata引用产品对象上的jsondata属性，因此我们可以使用Bind（），Apply（）或Call（）方法专门设置this的值。
  


如上答案建议使用绑定替换这样的所有地方

    $("#testDivbtn").click (product.loadInfo);

有了这个

    $("#testDivbtn").click (product.loadInfo.bind (product)); // it will print Gearbox 80000 in console.

我要链接的一个问题是，在此处查找有关应用调用绑定的更多详细信息确实非常好
Javascript call() & apply() vs bind()?