展开语法(ECMAScript)

Question

我之前使用过扩展语法，但没有像这样使用过。我对 (...fns) 到 (...args) 之间的跳转感到困惑。我理解 fns 是传递进来的函数（internalOnLoad 和 onLoad），而 args 是属于相应函数的参数。但当每个函数将它们的参数传递给函数 (...args) => fns.forEach(...) 时，会是什么样子呢？

const callAll = (...fns) => (...args) => fns.forEach(fn => fn && fn(...args));

const internalOnLoad = () => console.log("loaded");

const Avatar = ({ className, style, onLoad, ...props }) => (
  <img 
    className={`avatar ${className}`}
    style={{ borderRadius: "50%", ...style }}
    onLoad={callAll(internalOnLoad, onLoad)}
    {...props} 
  />
);

Avatar.propTypes = {
  src: PropTypes.string.isRequired,
  alt: PropTypes.string.isRequired,
  className: PropTypes.string,
  style: PropTypes.object,
  onLoad: PropTypes.func
};

你能给我一个可视化的描述吗？比如像这样调用 callAll = (...fns) ：callAll(internalOnLoad, onLoad) 就相当于 callAll 会接收到这样的参数 callAll = (internalOnLoad, onLoad)

提前感谢您的帮助。

- RMT

---

... 不是一个操作符！ - Felix Kling

Answer 1

rest parameters 语法 可以将所有参数收集到一个数组中。在这种情况下，部分应用 用于存储函数数组 (fns) 并返回一个新函数。当调用新函数时，它将调用 fns 中的函数，并将参数 (args) 传递给每个函数。如果我们使用标准 JS 函数，则为：

function callAll(...fns) { 
    return (...args) {
        fns.forEach(fn => fn && fn(...args));
    }
}

例子：

const callAll = (...fns) => (...args) => fns.forEach(fn => fn && fn(...args));

const callFns = callAll (
  (a, b) => console.log(a + b + 10),
  (a, b) => console.log(a + b + 20),
  (a, b) => console.log(a + b + 30),
);

console.log(callFns); // you can see the function that was returned in the console.

callFns(1, 2);

- Ori Drori

Answer 2

const callAll = (...fns) => (...args) => fns.forEach(fn => fn && fn(...args));

第一个 ... 获取所有的函数。

第二个 ... 获取所有的参数。

第三个 ... 将参数通过 fn.apply(undefined, args) 插入到函数中，而不是 fn(args)。

- K..