Question

所以我有一个要扩展的开源库。

它具有以下值：

export const withX = fn => e => fn(getEvent(e).pageX);
export const getEvent = e => (e.touches ? e.touches[0] : e);

在一个类中，实现了原始作者的预期工作方式：

...

  onDragStart = withX(start => {
    if (this.state.swiped) return;

    this.setState({ start, pristine: false, moving: true });
  });

我想将其更改为这样的（伪代码）：

onDragStart() {
let startX = withX(return start);
}

但是我不确定如何做到。

当我尝试这样的事情时：

let startX = withX();

或者这个：

let startX = withX(start => startX);

我得到的只是实际的函数返回。

有人能向我解释一下箭头功能，以使我了解这里的情况吗？有什么办法在这里获得起始值吗？

已删除的答案之一具有以下解决方案：

  onDragStart(event) {
    let startX = withX(_ => startX)(event);
    console.log(startX);
  }

不幸的是，这导致了undefined

Answer 1

箭头功能只是速记功能的语法糖。由于速记，它们还具有一些小的限制，例如this绑定。

如果您在与它们作斗争，那么从头脑上做的第一件事就是将箭头功能重新排列为其正常功能形式，以便于对其进行可视化。随着您逐步使用它们，这应该成为第二天性。

export const withX = fn => e => fn(getEvent(e).pageX);
export const getEvent = e => (e.touches ? e.touches[0] : e);

// Note here that the withX function is actually returning a function that
// is expecting to be called with e as the argument (e generally being an event)
function withX(fn){
    return function(e){
        return fn(getEvent(e).pageX);
    };
}

// This function seems to return the first touch event (generally related to converting
// click events for mobile)
function getEvent(e){
    if(e.touches) return e.touches[0];
    return e;
}

现在您已经看到了这种转换，希望它对于将如何合并到您更熟悉的其他经典实现中更有意义。

例如，在您提供的演示中，

onDragStart = withX(start => {
    if (this.state.swiped) return;

    this.setState({ start, pristine: false, moving: true });
});

然后需要转换为

var onDragStart = withX(function(start){
    if(this.state.swiped) return;

    this.setState({ start, pristine: false, moving: true });
}.bind(this));

.bind(this)之所以存在，是因为要在发送的函数内部创建一个新的this绑定。但是，由于箭头功能并没有这样做（作为其语法糖的一部分），因此最初并不是必需的。

在此代码转换中，还应该更加清楚start是注入值，根据以上翻译，您可以看到start是被注入到回调函数中的pageX值。由于start在注入期间作用于内部函数，因此需要从内部作用域中提取出来。

此外，如果您看一下上面的翻译，您会发现箭头函数返回的值就是回调函数返回的值。回调函数fn被注入了起始值，因此，从回调函数fn返回起始注入的值将在调用结束时返回该值。

选项1：直接在原始实现中返回所需的值

onDragStart = withX(start => {
  if (this.state.swiped) return;

  this.setState({ start, pristine: false, moving: true });

  // instead of onDragStart being undefined, it will now hold the start variable
  return start;
});

选项2：在实施期间存储变量

var startX;
onDragStart = withX(start => {
  if (this.state.swiped) return;

  this.setState({ start, pristine: false, moving: true });

  // now, assuming state.swiped was true, startX will hold the pageX value
  // onDragStart will still end up being undefined in this implementation
  startX = start;
});

选项3：将这些版本之一转换为普通函数语法和/或使用其他数据结构进行存储。

Answer 2

箭头功能如下：

(arguments) => { function }
// OR
(arguments) => returnStatement

并翻译为

name(arguments) {
    function
}
// OR
name(arguments) {
    return returnStatement
}

唯一的区别是箭头函数没有名称。因此，在第一行中，

export const withX = fn => e => fn(getEvent(e).pageX);
export const getEvent = e => (e.touches ? e.touches[0] : e);

与以下相同：

function withX(e) {
    // As the comments state, I'm not sure why this is recursive...
    return withX(getEvent(e).pageX);
}

function getEvent(e) {
    return (e.touches ? e.touches[0] : e);
}

要做你想做的事，你应该能够做：

function onDragStart() {
   let startX = withX(function(start) {
       if (this.state.swiped) return;
       this.setState({ start, pristine: false, moving: true });
   });
}

试图了解Javascript箭头功能

2 个答案: