了解 *这个 *内部课程的上下文

Question

我有以下代码。

class Node {
     constructor(value, parent, possibleChildren = []) {
     this.value = value;
     this.parent = parent;
     this.children = []
     this.setChildren(possibleChildren);
   }

setChildren(possibleChildren) {
  if (possibleChildren.length === 0) return [];

  while (possibleChildren.length > 0) {
      const value = possibleChildren.pop();
      // keyword *this* messes up the context. Save them function calls for lazy execution
      let childNode = () => new Node(value, this, possibleChildren);
      this.children.push(childNode);
    }
    this.children = this.children.map(child => child())
  }

getChildrenValues() {
    return this.children.map((child) => child.value);
  }
}

在上面的this.Children变量设置正确。如果我直接保存this.Children数组，而无需将其包裹在功能中，则我会看到设置不正确的孩子。

示例：

setChildren(possibleChildren) {
  if (possibleChildren.length === 0) return [];

  while (possibleChildren.length > 0) {
    const value = possibleChildren.pop();
    // keyword *this* messes up the context. Save them function calls for lazy execution
    let childNode = new Node(value, this, possibleChildren);
    this.children.push(childNode);
  }
}

我知道，如果没有功能包装器， 的上下文就不会有意见。我不明白的是原因。有什么想法吗？

在第一个示例上调用getChildRenvalues返回[“ a”，“ b”，“ c”]。

调用getChildrenvalues在第二个示例上返回[“ C”]

class Node {
  constructor(value, parent, possibleChildren = []) {
    this.value = value;
    this.parent = parent;
    this.children = []
    this.setChildren(possibleChildren);
  }

  setChildren(possibleChildren) {
    if (possibleChildren.length === 0) return [];

    while (possibleChildren.length > 0) {
      const value = possibleChildren.pop();
      // keyword *this* messes up the context. Save them function calls for lazy execution
      const childNode = new Node(value, this, possibleChildren);
      this.children.push(childNode);
    }
  }
  
  getChildrenValues() {
    return this.children.map((child) => child.value);
  }
}

let root = new Node(null, null, "ABC".split(""));
console.log(root.getChildrenValues())

Answer 1

我知道，如果没有功能包装器，的上下文是不一致的。我不明白的是为什么？

这与此关键字无关。由于您使用了箭头函数，因此确实指的是两个代码段中的完全相同的对象，因此没有区别。

从两个片段中获得不同结果的原因是懒惰的执行，但与有关，而是possiblechildren array。在您的第一个代码中，while（possiblechildren.length＆gt; 0）运行并清空possiblechildren array array 您进行递归新节点调用。在第二个示例中，您在期间调用new Node ，然后传递对 same same possibleChildren 数组，由递归调用倒空，因此循环在第一次迭代后立即终止。

要解决此问题，只是不要递归传递Possiblechildren：

class Node {
  constructor(value, parent, childrenValues = []) {
    this.value = value;
    this.parent = parent;
    this.children = []
    this.setChildrenValues(childrenValues);
  }

  setChildrenValues(childrenValues) {
    for (let i=childrenValues.length; i--; ) {
      const value = childrenValues[i];
      const childNode = new Node(value, this  );
//                                           ^ no third argument, no grandchildren
      this.children.push(childNode);
    }
  }
  
  getChildrenValues() {
    return this.children.map((child) => child.value);
  }
}

let root = new Node(null, null, "ABC".split(""));
console.log(root.getChildrenValues())