Question

我正在尝试使用此tutorial中的一些代码，它包含一些我不熟悉的chart.attr = function(name, value) {...奇怪的javascript表示法。对我来说不仅仅是陌生，它正在抛出错误。我试图弄清楚如何在纯javascript中进行更改。

function LineChart(config) {

  function chart() {

    // Draw the line.
    chartContainer.append("path")
      .datum(p.data)
      .attr("class", "line")
      .attr("d", line);
  }

  // **** This is the notation I do not understand, and gives me errors ****
  chart.attr = function(name, value) {
    if (arguments.length == 1)
    {
      return p[name];
    }
    else if (arguments.length == 2)
    {
      p[name] = value;
    }

    return chart;
  }

  chart.update = function() {
  }

  return chart;
}

Answer 1

您的代码正在尝试使用未定义的变量p。它应该在LineChart函数中定义为：

function LineChart(config) {
  var p =
  {
    parent          : null,
    labels          : [ "X", "Y" ],
    ...
  };
  ...
}

对于您不理解的符号，这是一个匿名函数表达式，它被分配给chart.attr属性。尽管它可以被chart.attr()调用，但它仍然是一个匿名函数，因为它没有名称。

此特定函数的目的是成为p对象属性的getter和setter。它查看arguments来确定函数的行为方式：如果只有一个参数，那么它需要返回属性值，如果有两个参数则应该设置属性值。

示例用法如下：

var c = new LineChart();
var parent = c.attr('parent'); // get the value of the parent property
c.attr('parent', $('#something')); // set the value of the parent property

Answer 2

让我们剖析那行代码：

//Define chart.attr as a function that by default takes 2 parameters;
chart.attr = function(name, value) {
    //If the function only gets 1 argument (so the first one)
    if (arguments.length == 1)
    {
        //return the element with key "name" from the array p
        //effectively a getter
        return p[name];
    }
    // else, check if there are 2 arguments, but no more
    else if (arguments.length == 2)
    {
        Assign the value of "value" to the element with key "name" from p
        effectively a setter;
        p[name] = value;
    }
//at the end, return the chart
return chart;
}

所以这段代码的作用是，如果只将一个参数传递给chart.attr()，它会从数组p中检索与该键相关的值。如果传递2个参数，它将使用第二个参数作为数组p中key-valuepair的值，并将第一个参数作为键。

现在，在不知道错误的情况下，很难对此进行调试。但是，如果p未定义，则产生错误的唯一方法就是这样。如果p不包含该键，则如果它是一个getter则返回null，如果它是一个setter则返回null。

Answer 3

此代码还有另一种方法可能会失败。由于op没有提供错误，我只会推测。

如果在执行chart.attr = function（name，value）{}之前调用chart.attr（'somekey'，'somevalue'），则会失败。这是因为函数提升...您正在为此行代码中的属性赋值。你没有定义一个函数......你正在分配一个函数。

如果你在上述条件下调用chart.attr（'somekey'，'somevalue'），你将得到一个chart.attr不是函数错误。

奇怪的Javascript表示法 - 调用函数

3 个答案: