performConcurrentWorkOnRoot.bind(null, root)

Question

老师，这里为什么要用bind，我理解是在调用performConcurrentWorkOnRoot 时，实际上是在执行绑定后的函数，并将 root 作为参数传递给它，可是用意是什么呢，直接传递root进入performConcurrentWorkOnRoot不可以吗

/**
 * 确保根节点被调度执行。
 * @param {*} root - 根节点。
 */
function ensureRootIsScheduled(root) {
  scheduleCallback(performConcurrentWorkOnRoot.bind(null, root)); // 为什么使用bind
}



/**
 * 执行根节点上的并发工作。
 * @param {*} root - 根节点。
 */
function performConcurrentWorkOnRoot(root) {
  renderRootSync(root);
  const finishedWork = root.current.alternate;
  root.finishedWork = finishedWork;
  // commitRoot(root);
}

Answer 1

杨艺韬 2023-08-16 14:22:44

bind会创建一个新函数，在后续调用该新函数的时候，会自动携带此时绑定的参数和上下文，不过需要注意的是，对于bind函数第一个函数为空的时候，严格模式和非严格模式的行为是不一样的：

如果 bind 的第一个参数（也就是 thisArg）被设置为 null 或 undefined，并且代码在严格模式下运行，那么新函数的 this 值将为 null 或 undefined。如果代码在非严格模式下运行，this 值将被替换为全局对象。

可以参考官方文档：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind#examples

Answer 2

提问者 用户1135260 2023-08-16 11:53:37

我懂了，通过bind() 方法可以创建一个新的函数，并将其绑定到指定的上下文，然后将这个新函数传递给scheduleCallback，以便在稍后的时间点比如目前使用的requestIdleCallback执行，同时保持原始函数的上下文和参数不变，是这样吗老师？

• 杨艺韬 #1

  是的，参考我的回答。

• 慕盖茨6544834 #2

  把函数作为参数是不是应该这样写  scheduleCallback(performConcurrentWorkOnRoot)
  
  那这时  performConcurrentWorkOnRoot 函数需要接收一个参数，如果你这样写的话  scheduleCallback(performConcurrentWorkOnRoot(root))，传给  scheduleCallback 的参数是  performConcurrentWorkOnRoot(root) 的返回值，所以需要用 bind，也就是  scheduleCallback(performConcurrentWorkOnRood.bind(null, root))