Funkcje ES6, funkcje strzałek i "to" w klasie ES6 [duplikat]

Ważne jest, aby wiedzieć, że składnia ta:

class A {
  method = () => {}
}

Jest tylko cukrem składniowym do tworzenia metody instancji w konstruktorze klasy:

class A {
  constructor() {
    this.method = () => {}
  }
}

Uwaga: Ta składnia nie jest jeszcze oficjalną częścią języka JavaScript (obecnie w etapie 3), więc musisz użyć transpilera podobnego do Babel do obsługi .

Wartość this wewnątrz method jest klasą A, ponieważ na to wskazuje this w konstruktorze (od strzałka funkcje dziedziczą kontekst z zakresu, w którym są zdefiniowane):

class A {
  constructor() {
    this.method = () => this;
  }
}

const instance = new A();
console.log(instance.method() === instance); // true

Definiowanie zwykłej (Nie-funkcji strzałkowej) metody na klasie tworzy metodę na prototypie klasy (nie instancję), ale nie ustala reguł co this będzie (ponieważ this jest dynamiczna w JS i zależy od tego, jak funkcja jest wywoływana, a nie jak jest zdefiniowana ).

class A {
  method() {}
}

console.log(new A().method === A.prototype.method); // true

Jeśli metody zdefiniowane w którymkolwiek z tych sposobów są wywoływane na instancji klasy (poprzez .), zgodnie z regułą jak this jest związana, gdy funkcja jest wywoływana jako metoda obiektu, this wskaże instancję klasy w obu przypadkach:

class A {
  constructor() {
    this.methodOnInstance = () => this;
  }
  methodOnPrototype() { return this; }
}

const instance = new A();
console.log(
  instance.methodOnInstance() === instance.methodOnPrototype(), // true
  instance.methodOnPrototype() === instance // true
);

Jedną z głównych różnic między dwiema powyższymi deklaracjami metody jest to, że metoda instancji ma this zawsze stałe do instancji klasy, podczas gdy metoda class (prototype) nie (możemy ją zmienić za pomocą funkcji .prototyp.zastosuj lub funkcja.prototyp.call )

class A {
  constructor() {
    this.methodOnInstance = () => this;
  }
  methodOnPrototype() { return this; }
}

const instance = new A();
console.log(
  instance.methodOnInstance() === instance.methodOnPrototype(), // true
  instance.methodOnPrototype.call('new this') === 'new this' // true
);

Częstym zjawiskiem, w którym this zmiany znajdują się wewnątrz procedury obsługi zdarzeń, gdzie procedura obsługi zdarzeń wywołuje przekazaną do niej funkcję i wiąże kontekst z elementem, na którym zdarzenie miało miejsce (tak więc nadpisuje wartość this jako element, który został kliknięty lub cokolwiek to było zdarzenie)

Dzieje się tak również w Reaccie dla wszystkich (syntetycznych) procedur obsługi zdarzeń DOM.

Dlatego, jeśli aby kontekst naszej metody zawsze wskazywał na instancję komponentu Reactowego, możemy użyć tej metody.

Innym sposobem ograniczenia kontekstu, ale bez użycia specjalnej składni metody instancji, która wymaga Babel, jest bezpośrednie utworzenie metody instancji przez utworzenie nowej funkcji z metody klasy (prototype) z powiązanym kontekstem (za pomocą funkcji .prototyp.bind):

class A {
  constructor() {
    this.methodOnInstance = this.methodOnPrototype.bind(this);
  }
  methodOnPrototype() { return this; }
}

const instance = new A();
console.log(
  instance.methodOnInstance() === instance.methodOnPrototype(), // true
  instance.methodOnPrototype() === instance // true
);

To pozwala nam dotrzeć do tego samego wynik jako użycie składni metody wystąpienia specjalnego, ale z aktualnie dostępnymi narzędziami (ES2017 i under).

Jeśli z jakiegoś powodu chcemy metody, która jest zawsze związana z czymś, co nie jest instancją klasy, możemy to zrobić również: {21]}

class A {
  constructor() {
    this.method = this.method.bind(console);
  }
  method() { return this; }
}

const instance = new A();
console.log(
  instance.method() === console // true
);