ES6: методы против коллбэков

Существует тонкое различие между объектом и методами объекта с обратных вызовов.

Объект, свойства которого являются методами

Параметр this метода является получателем вызова метода (например, obj если вызов метода obj.m (···)).

Например, вы можете использовать WHATWG потоков API следующим образом:


let surroundingObject = {
surroundingMethod() {
let obj = {
data: 'abc',
start(controller) {
···
console.log(this.data); // abc (*)
this.pull(); // (**)
···
},
pull() {
···
},
cancel() {
···
},
};
let stream = new ReadableStream(obj);
},
};


То есть, `obj` является объектом, свойства которого` start`, `и` pull` cancel` методы. Соответственно, эти методы можно использовать `this` для доступа к объектно-локального состояния (линия *) и называть друг друга (линии **).

Объект, свойства которого callbacks

Параметр `this` из функции стрелки является` this` окружающей рамки (лексический это). Arrow функции делать отличные Обратные вызовы, потому что это поведение обычно хотят для обратного вызова (реальной, не-метод функций). Обратный вызов не должен иметь свой собственный это, что тенями `this` окружающей области.

Если свойства `start`,` и `pull` cancel` являются стрелками функций, то они подобрать` `this` из surroundingMethod ()` (окружающей их охват):


let surroundingObject = {
surroundingData: 'xyz',
surroundingMethod() {
let obj = {
start: controller => {
···
console.log(this.surroundingData); // xyz (*)
···
},

pull: () => {
···
},

cancel: () => {
···
},
};
let stream = new ReadableStream(obj);
},
};
let stream = new ReadableStream();


Если выход в линии * удивляет вас, то рассмотрим следующий код:


let obj = {
foo: 123,
bar() {
let f = () => console.log(this.foo); // 123
let o = {
p: () => console.log(this.foo), // 123
};
},
}


Внутри метода bar(), f и o.p работать так же, потому что обе функции со стрелками имеют те же окружающий лексическую область bar(). Последняя функция стрелка в окружении объекта буквальном не изменить.