Выбор пользовательских жидкостных блоков переменных контекста

В дополнение к большим ответам до сих пор я хотел бы представить совершенно другую причину, по которой функции стрелок в определенном смысле существенно лучше, чем «обычные» функции JavaScript. Для обсуждения, давайте временно предположим, что мы используем проверку типа TypeScript или «Flow» Facebook. Рассмотрим следующий игрушечный модуль, который является действительным кодом ECMAScript 6 плюс плюс аннотации типа потока: (я буду включать нетипный код, который в конечном итоге будет получен из Babel в конце этого ответа, поэтому он может быть запущен.)

export class C {
  n : number;
  f1: number => number; 
  f2: number => number;

  constructor(){
    this.n = 42;
    this.f1 = (x:number) => x + this.n;
    this.f2 = function (x:number) { return  x + this.n;};
  }
}

Теперь посмотрим, что произойдет, когда мы используем класс C из другого модуля, например:

let o = { f1: new C().f1, f2: new C().f2, n: "foo" };
let n1: number = o.f1(1); // n1 = 43
console.log(n1 === 43); // true
let n2: number = o.f2(1); // n2 = "1foo"
console.log(n2 === "1foo"); // true, not a string!

Как вы можете видеть, ошибка проверки типа здесь: f2 должен был возвратить число, но он вернул строку!

Хуже того, кажется, что нет мыслимой проверки типа может обрабатывать обычные (не стрелочные) функции JavaScript, потому что «это» из f2 не встречается в списке аргументов f2, поэтому требуется type для «this» не может быть добавлен как аннотация к f2.

Эта проблема также затрагивает людей, которые не используют контролеры типов? Я так думаю, потому что даже когда у нас нет статических типов, мы думаем, что они там. («Первые параметры должны быть числом, второе - строкой» и т. Д.). Скрытое «это» действие, которое может или не может быть использовано в теле функции, делает нашу умственную бухгалтерию более сложной.

Вот текущая нетипизированная версия, которая будет вызываться Babel:

class C {
    constructor() {
        this.n = 42;
        this.f1 = x => x + this.n;
        this.f2 = function (x) { return x + this.n; };
    }
}

let o = { f1: new C().f1, f2: new C().f2, n: "foo" };
let n1 = o.f1(1); // n1 = 43
console.log(n1 === 43); // true
let n2 = o.f2(1); // n2 = "1foo"
console.log(n2 === "1foo"); // true, not a string!