Question

我试图将我的头脑包裹在一些反应中常见的箭头函数及其工具上。

给出以下示例：

<%= form_for(@tenant) do |f| %>

  <%= render 'shared/tenant_error_messages' %>

  <%= f.label :name_orig, "Company name" %>
  <%= f.text_field :name_orig, class: 'form-control' %>

  <%= f.label :email, "Company e-mail" %>
  <%= f.email_field :email, class: 'form-control' %>

  <%= f.fields_for(:users) do |u| %>

    <%= u.label :name, "User name" %>
    <%= u.text_field :name, class: 'form-control' %>

    <%= u.label :email, "User e-mail" %>
    <%= u.email_field :email, class: 'form-control' %>

    <%= u.label :password, "Password" %>
    <%= u.password_field :password, class: 'form-control' %>

    <%= u.label :password_confirmation, "Password confirmation" %>
    <%= u.password_field :password_confirmation, class: 'form-control' %>

  <% end %>

  <%= f.submit "Save", class: "btn btn-primary" %>
<% end %>

用语言描述上述内容：

我们的导出函数（applyMiddleware）采用带扩散的数组参数。
然后applyMiddleware返回一个带有createStore参数的无名函数，该参数这次返回另一个无名函数，带有三个参数。

所以没有箭头，它看起来像这样：

    export default function applyMiddleware(...middlewares) {
      return (createStore) => (reducer, preloadedState, enhancer) => {
        // snip actual enhancer logic

        return {
            ...store,
            dispatch
        }
    }
}

我的问题：

我说错了吗？
我们在这里看到的常见用例/代码范例是什么？

Answer 1

你的第一个问题的答案或多或少（见我的评论）。第二个问题的答案是，您看到的模式是使用closure和currying的组合。导出函数的原始参数被收集到一个名为“中间件”的数组中，返回的函数关闭（即有权访问）。然后可以使用另一个参数'createStore'再次调用该函数，然后返回另一个可以接受更多参数的函数。这允许人们部分地应用参数。对于一个更简单（也许更容易理解）的例子，让我们采用一个名为'add'的函数来添加两个数字：

let add = (x, y) => x + y;

不是很有趣。但是让我们分解它以便它可以取第一个数字并返回一个接受第二个的函数：

let add = x => y => x + y;
let add3 = add(3);
let seven = add3(4); // 7

这对我们的添加功能来说似乎不是一个大赢家，但是你从一个更合理的现实世界的例子开始。此外，不是手动调度，而是可以（并且可取）使用咖喱功能为您完成，许多流行的库（lodash，下划线，ramda）为您实现咖喱。使用Ramda的一个例子：

let add = R.curry((x, y) => x + y);
let add3 = add(3);
let five = add3(2);
let also5 = add(3, 2);
let still5 = add(3)(2); // all are equivalent.

Answer 2

此答案适用于对双箭头功能仍有疑问的人。让我们深入了解它。

const doubleArrowFunc = param1 => param2 => {
   console.log('param1', param1);
   console.log('param2', param2);
}

如果您调用此函数

const executeFunc = doubleArrowFunc('Hello');

如果您在控制台中打印executeFunc，将会得到类似的输出

ƒ (param2) {
    console.log('param1', param1);
    console.log('param2', param2);
  }

现在，这就像执行了一半的代码。如果要完全执行它，就必须这样做

executeFunc('World');
//And the output will be 
param1 Hello
param2 World

如果您想进一步了解。我可以在没有箭头功能的情况下执行相同的操作

function doubleArrowFunc(param1) {
    return function innerFunction(param2) {
       console.log('param1', param1);
       console.log('param2', param2);
    }
}

javascript es6双箭头功能

2 个答案: