避免在 ES6 的函数内定位 this 的对象作用域

例如，我正在使用 D3.js 运行一个项目，导入特定模块并调用它们的函数。

Setup:

• TypeScript/ES6
• 导入特定的 D3 组件
• 角6

我有一个对象（在本例中是一个角度指令），并在 SVG 画布上绘制一些圆圈，并希望它们在拖动事件上触发函数。

减少的代码片段： 请看一下drawPoints()在这个片段的底部

import { ElementRef, HostListener, Output, EventEmitter, OnInit, Input, OnChanges, SimpleChanges, Directive } from '@angular/core';
import * as Selection from 'd3-selection';
import * as Shape from 'd3-shape';
import * as Random from 'd3-random';
import * as Drag from 'd3-drag';

import { Config } from './../models/config.model';
import { Point } from './../models/point.model';
import { Param } from './../models/param.model';

@Directive({
  selector: '[appCanvas]'
})
export class CanvasDirective implements OnInit, OnChanges {
  private canvas: any;
  private defs: any;
  private gradient: any;
  private svg: any;
  private expandedPoints: Point[];
  private drag: Point;
  public config: Config;

  @Input()
  private param: Param;

  @Output()
  private emitConfig: EventEmitter<Config>;

  @HostListener('window:resize', ['$event'])
  private onResize(event) {
    this.init();
  }

  constructor(
    private el: ElementRef
  ) {
    this.canvas = el.nativeElement;
    this.emitConfig = new EventEmitter();
  }

  ngOnInit() {
    intSvg();
    // ..
  }

  private initSvg() {
    if (!this.svg) {
      this.svg = Selection.select(this.canvas).append('svg');
    }
    this.svg
      .attr('width', this.config.width)
      .attr('height', this.config.height);
  }

  private drawPoints(points: Point[]) {
    points.forEach(point => {
      this.svg.append('circle')
        .attr('r', point.color ? 20 : 10)
        .attr('cx', point.x)
        .attr('cy', point.y)
        .attr('fill', point.color ? point.color : 'lightgray')
        .attr('stroke-width', !point.color ? 2 : 0)
        .attr('stroke', !point.color ? 'gray' : '')
        .call(Drag.drag()
          .on('drag', () => {
            // What to call here?
            // Selection.select(this) will not work
            // So how to target the correct „this“?
          }));
    });
  }
  // ...
}

出现的问题是无法到达正确的位置this在附加圆圈的拖动功能内。

那里有多个示例，但它们在课堂上不起作用，因为this参数受到保护。

归功于 Mike Bostock 的例子https://bl.ocks.org/mbostock/22994cc97fefaeede0d861e6815a847e https://bl.ocks.org/mbostock/22994cc97fefaeede0d861e6815a847e

像 D3 这样的旧库依赖于动态thiscontext 而不是将所有必要的数据作为参数传递并需要使用const self = this达到词汇的技巧this在回调中。这个技巧在 ES6 中被认为是过时的，但在这种情况下是必要的。为了获得动态上下文，需要使用常规函数而不是箭头：

private drawPoints(points: Point[]) {
  const self = this;
  ...
    .call(Drag.drag()
      .on('drag', function (this: ProperContextTypeIfNecessary) {
        Selection.select(this);
        // class instance can be referred as `self`
      }));
});

类实例应该被称为似乎不一致this在一个地方和self在另一个中（这在 ES5 中不是问题，因为self为了一致性，应该在这种情况下彻底使用）。

正如中所解释的这个相关答案 https://stackoverflow.com/a/47661894/3731501，另一种方法是包装函数，它将提供回调函数 D3 上下文作为参数，而this仍然可以引用类实例。在这种情况下可以使用箭头函数：

function contextWrapper(fn) {
    const self = this;

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

...

private drawPoints(points: Point[]) {
  const self = this;
  ...
    .call(Drag.drag()
      .on('drag', contextWrapper((d3Context: ProperContextTypeIfNecessary) => {
        Selection.select(d3Context);
        // class instance can be referred as `this`
      }));
});