Question

我有一个Function，我希望能够以两种方式调用它 - 它的行为应该相同。

是否有任何ES6语法允许我使用两种方式调用下面的函数doBar并获得相同的结果？

考虑这样的函数：

const doBar = ({ foo = 'bar' }) => {
  console.log(foo) // should log 'baz'
}

我正在使用一个绑定事件的框架：

<x-component on-some-event="doBar"></x-component>

这实际上会导致这样的调用：

// where e = { detail: { foo: 'baz' } }
doBar(e)

..但我希望能够明确地同时调用我的Function ，尽管有正确的呼叫签名，如下所示：

doBar({ foo: 'baz' })

Answer 1

您可以使用default parameter。如果找不到foo，则会使用detail.foo的值。

＆＃13;

const doBar = ({ detail = {}, foo = detail.foo }) => {
  console.log(foo) // should log 'baz'
}

doBar({ foo: 'baz' })


doBar({
  detail: {
    foo: 'baz'
  }
});

＆＃13;

Answer 2

您无法在参数声明中正确执行此操作。只需将您的解构赋值放在函数体中：

function doBar(e) {
  const { foo = "bar", qux } = e.detail || e;
  consoel.log(foo, qux);
}

我希望能够同时明确地调用我的函数

我建议不要这样做。函数应该只有一个签名，不能重载到不同类型的参数。只需明确何时使用：

function doBar({ foo = "bar", qux }) {
  console.log(foo);
}
function withDetail(fn) {
  return e => fn(e.detail)
}

<x-component on-some-event="withDetail(doBar)"></x-component>

doBar({ foo: 'baz' })

Answer 3

没有。除非你认为这是一个充分的选择：

const thing = {
  detail: {
    foo: 'baz'
  }
};

doBar(thing.detail);

构造函数参数子属性

3 个答案: