如何不使用额外变量重写对象内的override函数并调用原实现

需求回顾 #

原helper.highlight函数会在输入字符串前添加### ，现在需要重写该函数，实现同时在字符串末尾添加 ###，且必须调用原函数的实现。原实现使用了额外变量prevHighlight存储原函数，现在希望找到更简洁的无额外变量实现方式。

原代码实现 #

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

无额外变量的优化实现 #

当然可以！我们可以利用**立即执行函数表达式（IIFE）**直接捕获原函数的引用，避免额外的全局变量，实现更紧凑的代码：

// BEGIN OF YOUR APPROACH
helper.highlight = (originalHighlight => {
  return str => {
    // 先给字符串末尾添加后缀
    const modifiedStr = `${str} ###`;
    // 调用原函数完成前缀添加
    return originalHighlight(modifiedStr);
  };
})(helper.highlight);
// END OF YOUR APPROACH

实现原理 #

• IIFE会立即执行，把当前的helper.highlight（也就是原函数）作为参数传入，在内部命名为originalHighlight
• IIFE返回一个新函数，直接替换掉原来的helper.highlight
• 新函数先处理字符串添加末尾的 ###，再调用捕获到的原函数完成前缀添加，完全满足"必须调用原函数实现"的要求

这个实现既没有额外的全局变量，又保持了逻辑清晰，不会污染全局作用域。

内容的提问来源于stack exchange，提问作者davidesp