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

【问题标题】：Passing object and function names in JavaScript在 JavaScript 中传递对象和函数名称
【发布时间】：2019-09-14 02:52:59
【问题描述】：

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

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

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

如果我像这样手动操作，它可以工作

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

如果我遍历 oCharts，它就不起作用。我得到“对象不支持属性或方法'destroy'”，当然，它永远无法运行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
}

谁能告诉我我做错了什么？将不胜感激！

【问题讨论】：

函数是如何定义的？如果必须使用eval 动态评估以通过字符串而不是其引用来调用函数，这是一个坏主意。当您在 string 上使用 () 时遇到错误 typeof myChart 是 string 并且只有函数具有调用它的属性
你是如何破坏图表的？？？
图表是使用 chart.js 制作的。 chart1.destroy() 是你如何销毁它们以创建一个具有相同 ID 的新的。
您的表达式 typeof myChart != undefined 始终为真，因为 typeof variable 始终返回 string 类型，您应该将其与 undefined 的字符串化值进行比较@ 即 typeof myChart !== 'undefined' 此外，在您创建此表达式之前一个变量`var myChart = [this.nchart]; `typeof myChart 总是会返回“对象”。为防止您只需将this.nchart 分配给myChart
抱歉，谢尔盖。但是，如果 myChart 尚未创建，则 typeof myChart 将是未定义的，因此不能被销毁。我正在尝试将图表的 ID 传递到条件中，如果定义了具有该 ID 的对象，则将其销毁。

标签： javascript

【解决方案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]()


  }
);

希望对您有所帮助。

【讨论】：

这就是我想要的，亚历克斯。但我不想为每个图表创建单独的 IF 语句。这就是为什么我将他们的 id 放在 oCharts 对象中。所以我可以遍历 oCharts，销毁当前图表，创建一个新图表，然后继续。
@ChrisG。检查此更新，让我知道是否有效
噢噢噢！我会试试看的。

【解决方案2】：

需要注意的两点：

1) 您要查找的关键字不是destroy，而是delete。而且它不是一个函数，它是一个这样使用的运算符：

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

2) 不需要使用delete，因为您将在makeChart1 中覆盖nchart。

以下是一些帮助您入门的编辑：

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);

【讨论】：

谢谢你的帮助，君瓦尔。但是使用chart.js mychartname.destroy() 是函数。

【解决方案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();            
  }
});

【讨论】：