有没有办法在使用ES6速记方法表示法的方法中使用词汇“this”？ [英] Is there a way to have lexical `this` in methods using the ES6 shorthand method notation?

问题描述

关于SO的第一个问题，我希望我不会重复任何事情;我看过其他 问题并认为我的不同与保证询问。

First question on SO and I hope I’m not duplicating anything; I’ve looked at other questions and think mine is different enough to warrant asking.

基本上，有没有办法让这个在方法体的方法体中使用简写表示法是词法还是绑定到特定值？

Basically, is there a way to have the this that’s in the method body of a method written using the shorthand notation to be either lexical or bound to a specific value?

这样做的动机来自于我在实现迭代器协议，其中 @@ iterator 方法在被调用时返回一个迭代器对象。该迭代器对象必须有一个 next（）方法，该方法在被调用时返回另一个对象。在第二个对象中，我想要引用原始（在我的例子中， Graph ）实例。

The motivation for this comes from wanting to use the ES6 method shorthand when I was implementing the iterator protocol, in which the @@iterator method, when called, returns an iterator object. That iterator object has to have a next() method, which when called itself returns another object. It’s in this 2nd object that I want a reference to the original (in my case, Graph) instance.

请注意，在下面的代码段中，由于此绑定，不按预期工作， next（）正在使用 ES6方法定义简写。

Note that in the below code snippet, which does not work as intended due to the this binding, next() is using the ES6 method definition shorthand.

class Graph {
  constructor(initialNodes) {
    this.data = [...initialNodes];
  }

  [Symbol.iterator]() {
    let nextIndex = 0;
    // `this` binding is fine here, as expected
    return {
      // look at that beautiful shorthand
      next() {
        return nextIndex < this.data.length
          // `this` binding is not fine here
          ? { done: false, value: this.data[nextIndex++] }
          : { done: true };
      }
    };
  }
}

我知道定义对象上方的函数返回然后将该函数指定为要返回的对象的属性，但我又想知道是否可以使用方法简写语法。

I’m aware of defining the function above the object return and then assigning that function as a property of the object being returned, but again I was wondering if a way with the method shorthand syntax was possible.

定义<$ c返回对象上面的$ c> next（）作为常规函数然后在对象属性赋值中绑定它：

Defining next() above the return object as a regular function then binding it in the object property assignment:

class Graph {
  // constructor

  [Symbol.iterator]() {
    let nextIndex = 0;
    // I know you can do this
    const next = function() {
      return nextIndex < this.data.length
        ? { done: false, value: this.data[nextIndex++] }
        : { done: true };
    };
    return {
      next: next.bind(this)
    };
  }
}

定义 next（）<返回对象上面的/ code>作为箭头函数意味着不需要 bind ，但仍然没有方法语法简写：

Defining next() above the return object as an arrow function means no need for bind, but still no method syntax shorthand:

class Graph {
  // constructor

  [Symbol.iterator]() {
    let nextIndex = 0;
    // I know you can also do this
    const next = () => {
      return nextIndex < this.data.length
        ? { done: false, value: this.data[nextIndex++] }
        : { done: true };
    };
    return {
      next
    };
  }
}

Icepickle 在评论中提出了一个很好的观点，我可以使用存储这个上下文并参考速记法身体。我假设这是我能得到的最接近的？

Icepickle brought up a good point in the comments that I could just use store the this context and refer to that in the shorthand method body. I’m assuming this is the closest I can get?

class Graph {
  // constructor

  [Symbol.iterator]() {
    let nextIndex = 0;
    const self = this;
    return {
      next() {
        return nextIndex < self.data.length
          ? { done: false, value: self.data[nextIndex++] }
          : { done: true };
      }
    };
  }
}

推荐答案

解决问题的理想方法是使用适当的工具：发电机功能。它们也可以与简写语法<一起使用/ a>，它们将正确绑定此。

The ideal solution to your problem would be to use the proper tool for the job: a generator function. They too can be used with a shorthand syntax, and they will properly bind this.

生成器函数返回符合迭代器协议，可以使用 yield * 将迭代器的输出委托给另一个可迭代对象（如数组）。

Generator functions return objects which conform to the iterator protocol, and can use yield* to delegate the output of the iterator to another iterable object (like an array).

class Graph {
  constructor(initialNodes) {
    this.data = [...initialNodes];
  }

  * [Symbol.iterator]() {
    yield* this.data;
  }
}

const graph = new Graph([1, 2, 3]);
for (const node of graph) {
  console.log(node);
}

这篇关于有没有办法在使用ES6速记方法表示法的方法中使用词汇“this”？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！