javascript - 界面如何在 JavaScript 中工作？

Question

这些代码来自http://eloquentjavascript.net/06_object.html 我的问题是关于“接口(interface)如何工作？”例如，为什么在第一部分我们使用了 cell.minHeight()，而不仅仅是 cell？为什么我们需要 .minHeight() 以及它以后如何工作？作者没有解释接口(interface)是如何工作的:(

function rowHeights(rows) {
  return rows.map(function(row) {
    return row.reduce(function(max, cell) {
      return Math.max(max, cell.minHeight());
    }, 0);
  });
}

function colWidths(rows) {
  return rows[0].map(function(_, i) {
    return rows.reduce(function(max, row) {
      return Math.max(max, row[i].minWidth());
    }, 0);
  });
}

我还看到了 draw(width, height) 和它收到的参数，但我不明白执行了什么代码？

function drawTable(rows) {
  var heights = rowHeights(rows);
  var widths = colWidths(rows);

  function drawLine(blocks, lineNo) {
    return blocks.map(function(block) {
      return block[lineNo];
    }).join(" ");
  }

  function drawRow(row, rowNum) {
    var blocks = row.map(function(cell, colNum) {
      return cell.draw(widths[colNum], heights[rowNum]);
    });
    return blocks[0].map(function(_, lineNo) {
      return drawLine(blocks, lineNo);
    }).join("\n");
  }

  return rows.map(drawRow).join("\n");
}

上面的广告 minHeight() 和 minWidth() 与这段代码中提到的是否有联系？

function UnderlinedCell(inner) {
  this.inner = inner;
};
UnderlinedCell.prototype.minWidth = function() {
  return this.inner.minWidth();
};
UnderlinedCell.prototype.minHeight = function() {
  return this.inner.minHeight() + 1;
};
UnderlinedCell.prototype.draw = function(width, height) {
  return this.inner.draw(width, height - 1)
    .concat([repeat("-", width)]);
};

简单的例子:

davey = {
    name: "Davey"
}

john = {
    name: "John"
}

say = function(){
        alert("Hello, I'm " + this.name)
}

davey.sayHi = say
john.sayHi = say

davey.sayHi() // =>  Hello, I'm Davey
john.sayHi() // =>  Hello, I'm Jhon

这意味着，我们应该在某个地方使用 minHeight() 函数。但是，据我所知，接口(interface)以其他方式工作，但我不明白是如何工作的。

Answer 1

How do interfaces work?

安interface是一个约定。这个约定规定了一种对象应该是什么样子，包括它应该有什么方法，这些方法应该有什么签名以及它们应该做什么。

JavaScript 没有作为语言元素的接口(interface)(例如 Java 有)，它们是纯粹的约定。在您的情况下，单元格对象的约定仅在文本中定义:

This is the interface:

• minHeight() returns a number indicating the minimum height this cell requires (in lines).
• minWidth() returns a number indicating this cell’s minimum width (in characters).
• draw(width, height) returns an array of length height, which contains a series of strings that are each width characters wide. This represents the content of the cell.

正如作者所解释的:

The layout program will communicate with the cell objects through a well-defined interface. That way, the types of cells that the program supports is not fixed in advance. We can add new cell styles later—for example, underlined cells for table headers—and if they support our interface, they will just work, without requiring changes to the layout program.

所以您的drawTable 函数期望获得由此类单元格对象组成的数组。那么让我们来玩个游戏:有细胞还是无细胞？

{}

空对象，没有方法:没有单元格!

{ minHeight: function() { return 3; },
  minWidth: function() { return 3; } }

没有 draw 方法:没有单元格!

new TextCell("Hi")

继承自 TextCell.prototye 的方法，按预期执行:cell

{ minHeight: function() { return 3; },
  minWidth: function() { return 3; },
  draw: function() { return []; } }

draw 方法不接受 width 和 height 参数，并且总是返回一个空数组:没有单元格。

new RTextCell("Hi")

继承自 RTextCell.prototye 和 TextCell.prototye 的方法，按预期执行:cell

{ minHeight: function() { return 3; },
  minWidth: function() { return 3; },
  draw: function(w, h) { 
      var t = new Array(w-1).join("-");
      return return [","+t+"."].concat(new TextCell("").draw(w-2, h-2).map(function(l) {
          return "|"+l+"|";
      }), ["`"+t+"´"]);
  } }

具有必需的方法，并且这些方法的行为符合预期:cell!