Question

鉴于这段代码（我简化了React组件）：

const myFn = function(
  {otherFn = () => {console.log('inside myFn declaration'); return 'true'}}
  ){
      console.log('Inside myFn2 ', otherFn());
      foo(otherFn);
      bar(otherFn);
      ...
}

myFn({name:'some name', type: 'some type'});
// output:
// inside myFn declaration
// Inside myFn2  true

我不明白那里发生了什么。这个构造是什么？我指的是里面的内容＆＃39; myFn（）＆＃39;

无论什么参数调用此构造/代码块（因此它不会作为默认参数）

更重要的是，它的目的似乎是＆＃39; otherFn＆＃39;在函数的实现中可用，因此它可以作为回调传递给其他函数。

如果目标是在myFn体内提供otherFn，那么它可以实现（可能更容易理解）：

const myFn = function(){
  otherFn = () => {console.log('inside myFn declaration'); return 'true'}
  console.log('Inside myFn2 ', otherFn());
  foo(otherFn);
  bar(otherFn);
    ...
  }
}
// Output exactly the same as above

必须有一个简单的解释，这个结构是什么，但我似乎无法将它与我所知道的任何JavaScript连接。

有关进展情况的任何提示？

编辑以包含一些答案：有趣的是，如果我使用这样的代码：

function myFn({
  name: 'some name',
  type: 'some type',
  otherFn: () => { console.log("other function"); return false; }
}){
  console.log('here');
}

它不起作用:-(使用chomium的节点或控制台为了使其发挥作用，＆＃39;：＆＃39;应该是＆＃39; =＆＃39;因为它正在分配默认值。

更多编辑。我选择了Thomas＆＃39;回答是因为虽然其他人已经向我暗示正确的方向（感谢Benjamin，Ainitak和所有人）但我没有完全看到＆＃39;直到我读到Thomas＆＃39;详细解释。

谢谢你们，你们是最好的！

Answer 1

这结合了两个功能：

参数的默认值：

const fn = (value = 42) => { 
  console.log("value:", value);
}

fn(13);
fn();

.as-console-wrapper{top:0;max-height:100%!important}

基本上是

的简写

const fn = (value) => { 
  if(value === undefined) value = 42;

  console.log("value:", value);
}

将对象解构为文章

const fn = ({ foo, bar }) => { 
  console.log(foo, bar);
}

fn({ foo: 10, bar: 100 });
fn({ foo: 13 });
fn(window.location);

.as-console-wrapper{top:0;max-height:100%!important}

基本上

const fn = (__arg) => { 
  let foo = __arg.foo;
  let bar = __arg.bar;

  console.log(foo, bar);
}

只是__arg只是一个在你的函数中没有实际名称的值。

要点：

const myFn = function({
  otherFn = () => {
      console.log('inside myFn declaration'); 
      return 'true'
    }
  }){
      console.log('Inside myFn2 ', otherFn());
      foo(otherFn);
      bar(otherFn);
      ...
}

只是这两个特性的组合：参数的对象解构与该参数的默认值恰好是一个函数。

像这样工作：

const myFn = function(__arg){
  let otherFn = __arg.otherFn;
  if(otherFn === undefined){
    otherFn = () => {
      console.log('inside myFn declaration'); 
      return 'true' //why 'true' as a string?
    }
  }

  console.log('Inside myFn2 ', otherFn());
  foo(otherFn);
  bar(otherFn);
  ...
}

更重要的是，它的目的似乎是'otherFn'在函数的实现中可用，因此它可以作为回调传递给其他函数。

如果目标是在myFn体内提供otherFn，那么它可以实现（可能更容易理解）

此构造的目的是为您（使用/调用函数）提供将此方法注入函数的功能，因为配置对象和的某些属性提供了回退/默认值，如果你没有传递这个配置属性。

Imo关于这个结构的唯一不常见的事情是这个属性的类型是function，并且他们选择内联作为默认值的函数。

Answer 2

它是函数参数的对象解构语法，箭头函数作为otherFn属性的默认初始值。

您可以像

一样使用它

myFn({
    name: 'some name',
    type: 'some type',
    otherFn: () => { console.log("other function"); return false; }
});

Answer 3

我终于明白'那里的建筑是什么'。同时是两件事：

对象解构
一个解构部分的默认参数值

当然我知道每个都是什么，但事实是被解构的对象的唯一部分是一个函数，而这个函数反过来被提供了一个默认的内联实现，让我一直都很困惑。

另外，我无法理解为什么实现是以这种方式完成而不是一些更易读的方式（例如在函数体内）。正如Thomas建议的那样，现在我明白这是函数调用者为内部函数提供实现的一种方式（它具有默认实现'以防万一'）。

它让我思考了一段时间，但是当你最终理解它时它很好。谢谢大家！

Javascript代码块作为函数

3 个答案:

要点：