试图了解Javascript箭头功能

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 });
   });
}