如何使用部分函数检索值

Question

我有以下代码：

const PENDING = 'PENDING';
const FULFILLED = 'FULFILLED';
const REJECTED = 'REJECTED';

class simplePromise {
  
  constructor(callback) {
    this.state = PENDING;
    this.value = null;
    // here so I can execute all the functions
    this.handlers = [];
    this.doResolve(callback, this.resolve.bind(this), this.reject.bind(this));
  }

  doResolve(callback, onResolved, onRejected) {
    let done = false;
    console.log(callback, 'callback')
    callback((val) => {
      console.log(val, 'val')
      if (done) return;
      done = true;
      onResolved(val)
    })
  }

  resolve(val) {
    this.state = FULFILLED;
    this.value = val;
    this.handlers.forEach(handler => handler);
  }

  reject(error) {
    this.state = REJECTED;
    this.value = error;
    this.handlers.forEach(handler => handler);
  }
}


const promiseA = new simplePromise( (resolutionFunc, rejectionFunc) => {
  resolutionFunc(777);
});

令我困惑的是以下几行：

callback((val) => {
      console.log(val, 'val')

val 的值是正确的 777。但是，我不明白为什么。按照我的理解，我原来传入了一个2个参数的回调函数，所以我认为val会有

的值

(resolutionFunc, rejectionFunc) => {
  resolutionFunc(777);
}

在这种情况下如何正确计算出值 777？

Answer 1

这是一个真正的好问题...我需要勇气尝试一个明确的答案。我担心必须编辑 400 次才能改进第一个快速草稿。希望它仍然是草稿，但足以在之后跳入一些更深入的教程。

首先，这确实是一个 simplePromise，因为它不能被拒绝。

您正确识别了这里所谓的 callback...这是传递给 simplePromise 实例的函数。

现在请注意，在 promise 构造函数中，有一个函数调用：

this.doResolve(callback, this.resolve.bind(this), this.reject.bind(this));

其中 callback 作为第一个参数传递，另一个参数分别是定义为 class 方法的 resolve 和 reject 函数。 doResolve 在 promise 实例化时立即执行。

因此执行 doResolve，调用 callback...再次将函数作为第一个参数传递给它：

(val) => {
  console.log(val, 'val')
  if (done) return;
  done = true;
  onResolved(val)
}

该函数实际上是提供给承诺的 callback 的 resolutionFunc 参数！

太有趣了……太有趣了……

留在我身边！所以我们仍然在 callback 执行...我们用 777 作为参数调用 resolutionFunc。我们也可以传入一个 rejectionFunc 函数。

这就是我们最终执行的地方：

(val) => {
  console.log(val, 'val')
  if (done) return;
  done = true;
  onResolved(val)
}

这就是为什么控制台日志记录 val 输出 777... 它从未到过其他任何地方。直接传自resolutionFunc(777).

那么是不是就是一堆函数作为函数传递来调用自己？简而言之？

是的...但是它有一个优点。承诺“结构”的优点是拥有一整套更复杂的功能，否则将重复 class 并仅传入“真实用例”更改部分（callback).

它允许在编程时将重复的机制从其余逻辑中排除。

还有一个绑定到实例的对象，特别是 state 可以被 .done()、.fail() 等使用...所以可以链接一些更复杂的逻辑使用对象。

这个过于简单的承诺中缺少什么... 真正在做某事 只是返回提供的值不变。它可能是检查它是否是一个数字......或者服务器响应检查，如果你考虑 Ajax 例如。

下面，我只是添加了一些带有数字的控制台日志...因此您可以注意到执行顺序。 ;)

const PENDING = 'PENDING';
const FULFILLED = 'FULFILLED';
const REJECTED = 'REJECTED';

class simplePromise {
  
  constructor(callback) {
    this.state = PENDING;
    this.value = null;
    // here so I can execute all the functions
    this.handlers = [];
    this.doResolve(callback, this.resolve.bind(this), this.reject.bind(this));
  }

  doResolve(callback, onResolved, onRejected) {
    console.log("1")
    console.log(callback)
    let done = false;
    callback((val) => {
      console.log("2")
      if (done) return;
      done = true;
      onResolved(val)
    })
  }

  resolve(val) {
    console.log("3")
    this.state = FULFILLED;
    this.value = val;
    this.handlers.forEach(handler => handler);
  }

  reject(error) {
    console.log("4")
    this.state = REJECTED;
    this.value = error;
    this.handlers.forEach(handler => handler);
  }
}


const promiseA = new simplePromise( (resolutionFunc, rejectionFunc) => {
  console.log("5")
  console.log(resolutionFunc)
  resolutionFunc(777);
});

为什么 5 在 2 之前记录？

因为 console.log("2") 位于作为参数传递的函数语句中。在 console.log("5")

之后立即在 callback 中调用该函数

resolutionFunc 是：

(val) => {
  console.log("2")
  if (done) return;
  done = true;
  onResolved(val)
}

关键是要注意函数语句何时被调用。我在代码片段中添加了两个控制台日志...希望能使其显而易见。

如何使用部分函数检索值

How a value is being retrieved with partial function

javascript

function

composition

function-composition