Chart.js中onClick函数无法调用方法及修改公共变量问题

这是个非常典型的JavaScript上下文绑定问题，我来帮你理清原因并给出解决方案！

问题根源 #

你代码里的onClick用了普通函数声明，此时函数内部的this指向的是Chart.js的实例对象，而不是你的类/组件实例。所以你调用this.hello()时，Chart实例根本没有这个方法，自然会报错；同理也没法修改你定义的公共变量。

三种可行解决方案 #

方案1：使用箭头函数（最简洁）

箭头函数不会绑定自己的this，它会继承外层作用域的this（也就是你的组件实例）。修改后的代码如下：

initializeGraph() { 
  this.graph = new Chart('graph', { 
    type: 'pie', 
    data: { 
      datasets: [{ 
        data: [1,2], 
        backgroundColor: ['#RRGGBB', '#FF0000'], 
      }], 
      labels: ['blue','red'] 
    }, 
    options: { 
      onClick : (event, elements) => { 
        this.hello(); // 现在this指向组件实例，能正常调用方法
      } 
    } 
  }); 
} 

hello() { 
  console.log("i am here"); 
}

方案2：提前保存组件的this到变量

在initializeGraph函数开头，把组件的this存到一个变量（比如self）里，然后在onClick里用这个变量访问方法：

initializeGraph() { 
  const self = this; // 保存组件实例的this
  this.graph = new Chart('graph', { 
    type: 'pie', 
    data: { 
      datasets: [{ 
        data: [1,2], 
        backgroundColor: ['#RRGGBB', '#FF0000'], 
      }], 
      labels: ['blue','red'] 
    }, 
    options: { 
      onClick : function(event, elements) { 
        self.hello(); // 使用提前保存的self访问组件方法
      } 
    } 
  }); 
} 

hello() { 
  console.log("i am here"); 
}

方案3：用bind绑定this

直接给onClick函数绑定组件的this，确保函数内部的this指向正确：

initializeGraph() { 
  this.graph = new Chart('graph', { 
    type: 'pie', 
    data: { 
      datasets: [{ 
        data: [1,2], 
        backgroundColor: ['#RRGGBB', '#FF0000'], 
      }], 
      labels: ['blue','red'] 
    }, 
    options: { 
      onClick : function(event, elements) { 
        this.hello(); 
      }.bind(this) // 绑定组件实例的this到函数
    } 
  }); 
} 

hello() { 
  console.log("i am here"); 
}

以上三种方法都能帮你解决上下文问题，之后你不仅能调用hello()，也能正常修改组件的公共变量啦！

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