覆盖对象内调用其初始实现的函数答案

【问题标题】：Override function inside an object calling its initial implementation覆盖对象内调用其初始实现的函数
【发布时间】：2019-02-09 09:51:02
【问题描述】：

此代码假装覆盖函数：helper.highlight，该函数已经将 ### 添加到作为参数传递的字符串之前。在被覆盖后，它应该还会将### 附加到字符串中。

这里有一个重要的细节，就是函数的新实现（覆盖）需要利用原来的实现。

<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
window.addEventListener('load', function(){
  let output = document.querySelector('.message');
  let result = helper.highlight('Hello World');
  output.innerHTML = result;
});
helper = {
  highlight: str => {
    return '### ' + str;
  }
};
// BEGIN OF YOUR APPROACH
prevHighlight = helper.highlight;
helper.highlight = str => {
  str += ' ###';
  str = prevHighlight(str);
  return str;
};
// END OF YOUR APPROACH
</script>
</head>
<body>
  <span class="message"></span>
</body>
</html>

代码正常运行，您可以在此处看到：

https://codesandbox.io/s/2o503978m0

我想知道的是：是否可以在不使用其他变量的情况下完成函数覆盖，就像我使用的那样：prevHighlight。正在寻找更清晰的方法来做到这一点。

对此有什么想法吗？

如果可能，请在上面 fork 我的codesandbox.io 并将新链接粘贴到您的答案中。

谢谢！

【问题讨论】：

标签： javascript html function oop

【解决方案1】：

这种方法修饰了原来的功能：

Function.prototype.affixer = function() {
    var originalHighlight = this;
    var temp = function() {
      // this is not very robust and assumes there is always at least one argument
      arguments[0] += " ###";
      return originalHighlight.apply(this, arguments);
    };
    return temp;
};
helper.highlight = helper.highlight.affixer();

在此处查看分叉示例：https://codesandbox.io/s/726xw524z0

【讨论】：

这是语法糖，但问题的答案是否定的。您可以将此添加到您的答案中吗？

【解决方案2】：

我认为这是不可能的。看看这个：

helper.highlight = str => {
  str += ' ###';
  str = helper.highlight(str);//prevHighlight(str);
  return str;
};

如您所见，highlight 将以这种方式递归。

【讨论】：