Question

我试图避免使用es6来避免“const that = this”，“const self = this”等。然而，我正在努力与vue js和highcharts相结合的一些结构，你有这样的东西：

In [41]: from shapely.geometry import Polygon

In [48]: coords  = ((-1, 0), (-1, 1), (0, 0.5), (1, 1), (1, 0), (-1, 0))

In [49]: polygon = Polygon(coords)

In [50]: polygon.area
Out[50]: 1.5

如果可能的话，我想在格式化程序对象中定义。使用arrow语法（）=＆gt;我允许在数据范围内使用它，但是我会失去为函数提供额外范围的能力。

我不想修改使用过的库。

Answer 1

该示例说明了在当前JS OOP实践之前出现的较旧的库（如Highcharts和D3）中存在的问题，并且强烈依赖于动态this上下文将数据传递给回调函数。这个问题是因为数据没有被复制为回调参数，就像通常在vanilla JS事件处理程序或jQuery回调中一样。

预计选择this个上下文之一（词法或动态），另一个上下文赋值给变量。

所以

const that = this;

是解决问题的最常见也是最简单的方法。

但是，如果传统上使用词法this，或者回调是作为this上下文绑定到类实例的类方法，则不实用。在这种情况下，this可以由开发人员指定，并且回调签名更改为接受动态this上下文作为第一个参数。

这是通过简单的包装函数实现的，该函数应该应用于老式的回调：

function contextWrapper(fn) {
    const self = this;

    return function (...args) {
        return fn.call(self, this, ...args);
    }
}

对于词汇this：

data () {
  return {
    highchartsConfiguration: {
      formatter: contextWrapper((context) => {
        // `this` is lexical, other class members can be reached
        return context.point.y + this.unit
      })
    }
  }
}

或者类实例为this：

...

constructor() {
  this.formatterCallback = this.formatterCallback.bind(this);
}

formatterCallback(context) {
    // `this` is class instance, other class members can be reached
    return context.point.y + this.unit
  }
}

data () {
  return {
    highchartsConfiguration: {
      formatter: contextWrapper(this.formatterCallback)
    }
  }
}

Answer 2

如果您需要调用this方法的formatter，则无法使用额外的变量（that，self，无论如何）。

ES6避免/自我

2 个答案: