接口如何在 JavaScript 中工作？

Question

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

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()。但是，据我了解，接口以其他方式工作，我不明白如何。

Answer 1

接口是如何工作的？

interface 是一种约定。该约定规定了一种对象的预期外观，包括它应该具有哪些方法、这些方法应该具有哪些签名以及它们应该做什么。

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

这是界面：

• minHeight() 返回一个数字，指示此单元格所需的最小高度（以行为单位）。
• minWidth() 返回一个数字，指示此单元格的最小宽度（以字符为单位）。
• draw(width, height) 返回一个长度为高度的数组，其中包含一系列字符串，每个字符串都是宽度字符。这 表示单元格的内容。

正如作者解释的那样：

布局程序将通过一个 定义明确的界面。这样，程序的单元格类型 支撑不是预先固定的。我们可以稍后添加新的单元格样式——因为 例如，表格标题的下划线单元格——如果它们支持我们的 界面，它们将正常工作，无需更改 布局程序。

因此，您的 drawTable 函数期望获得此类单元对象数组的数组。那么让我们来玩个游戏：有细胞还是没有细胞？

{}

空对象，没有方法：没有单元格！

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

没有draw 方法：没有单元格！

new TextCell("Hi")

从TextCell.prototye 继承方法，按预期执行：单元格

{ 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！