在JavaScript中传递对象和函数名称

Question

我创建了一个对象，其中包含多个对象的名称以及与创建新对象相关的函数名称，在本例中为图表。

var oCharts = [{
    nchart: "chart1",
    fchart: "makeChart1"
  },
  {
    nchart: "chart2",
    fchart: "makeChart2"
  },
  {
    nchart: "chart3",
    fchart: "makeChart3"
  }
]

“nchart”是表示要销毁的图表的变量。 “fchart”是表示创建新图表的函数的变量。

如果我手动完成，就像这样，它可以工作

if(typeof chart1 != undefined ){
  chart1.destroy();
  makeChart1();         
}   

如果我迭代oCharts，它不起作用。我得到“对象不支持属性或方法'破坏'”，当然，它永远不会运行makeChart（）。 （我甚至不确定我是否正确称呼它。）

$(oCharts).each(function(i,v){
  var myChart = [this.nchart];
  var makeChart = this.fchart;

  if(typeof myChart != undefined ){
    myChart.destroy();
    makeChart();            
  }
});

制作图表的功能很简单......

function makeChart1(){
 // do stuff
}

function makeChart2(){
 // do other stuff
}

function makeChart3(){
 // do different stuff
}

有人可以告诉我我做错了什么吗？非常感谢！

Answer 1

我确信这可以通过更聪明的方式完成，但这应该适用于您的示例：我假设chart1，chart2，chart3是已经创建为var chart1 = new Chart(ctx, config)的图表实例

$(oCharts).each(function(i,v){
  var myChart = this.nchart;
  var makeChart = this.fchart;

  if( myChart == "chart1" ){
    chart1.destroy();
    makeChart1();
  }
  if( myChart == "chart2" ){
    chart2.destroy();
    makeChart2();
  }
  if( myChart == "chart3" ){
    chart3.destroy();
    makeChart3();
  }
  }
);

更新动态使用：检查出来（How do I call a dynamically-named method in Javascript?）

$(oCharts).each(function(i,v){
  var myChart = this.nchart;
  var makeChart = this.fchart;


    self[myChart].destroy();
    self[makeChart]()


  }
);

希望这个帮助。

Answer 2

有两点需要注意：

1）你要找的关键字不是destroy，它是delete。它不是一个函数，它是一个如此使用的运算符：

let a = {b: 3, c: 4};
delete a.b;
console.log(a);

2）使用delete不是必要的，因为你将覆盖nchart中的makeChart1。

这里有一些编辑可以帮助您入门：

let makeChart1 = () => {
  // do stuff
  return 1;
};

let makeChart2 = () => {
  // do stuff
  return 2;
};

let makeChart3 = () => {
  // do stuff
  return 3;
};

let oCharts = [{
  nchart: "chart1",
  fchart: makeChart1
}, {
  nchart: "chart2",
  fchart: makeChart2
}, {
  nchart: "chart3",
  fchart: makeChart3
}];

oCharts.forEach(chart =>
    chart.nchart = chart.fchart());

console.log(oCharts);

Answer 3

var chart1 = {destroy:function(){console.log('chart1')}}
var chart2 = {destroy:function(){console.log('chart2')}}
var chart3 = {destroy:function(){console.log('chart3')}}
function makeChart1(){
console.log('make chart 1');
}

function makeChart2(){
 // do other stuff
  console.log('make chart 2');
}

function makeChart3(){
 // do different stuff
  console.log('make chart 3');
}

var oCharts = [{
    nchart: chart1,
    fchart: makeChart1
  },
  {
    nchart: chart2,
    fchart: makeChart2
  },
  {
    nchart: chart3,
    fchart: makeChart3
  }
]
$(oCharts).each(function(i,v){

  var myChart = this.nchart;
  var makeChart = this.fchart;

  if(typeof myChart != undefined ){
    myChart.destroy();
    makeChart();            
  }
});