ES6 class and closures (object context for callbacks)

Вопрос-ответ JavaScript
1

Как можно сделать замыкание с ES6 class?

ES5 я могу определить переменную в родительской для функции области видимости и она будет видима в функции, так я могу сделать замыкание, в частности передать контекст.
Как подобное сделать в случае применения ES6 class ?

И более специфичный вопрос: как передать контекст объекта в функцию-метод этого объекта, когда она вызывается в callback и не имеет контекста или отличный от контекста объекта (window часто), в случае применения ES6 class ?

2

Покажи пример кода который делает то что тебе надо в es5.

Пример навешивания обработчика-метода класса с сохранением контекста.
С помощью bind и arrow function. Сам я предпочитаю arrow function (проще отлаживать).

class MyClass {
	constructor() {
		// Via bind
		document.addEventListener('click', this.handler.bind(this))

		// Via arrow function
		document.addEventListener('click', () => {
			this.handler()
		})
	}

	handler() {
		console.log(this)
	}
}
3

по п.1

var self = null;

function Some() {
   this.sv = 'sv';
    self = this;
}

Some.prototype.sm = function() {
    self.sv = 'ov';
}

Например как-то так для случая если я хочу сохранить контекст вызова из callback.

Наверно можно просто сделать тоже, но с class?
let self = null;
class Some {
 constructor () {
    this.sv = 'sv';
    self = this;
 }
 
 sm() {
    self.sv = 'ov';
 }
}
4

По п.2 я не это имел в виду, надо было мне не полениться набрать пример кода, сорри.

ситуация такая:

class Some {
  constructor() {
    this.something = 'someValue';
  }

  someObjectMethod () {
    this.something = 'otherValue';
  }

}

someObject = new Some;

somePromise.then(someObject.someObjectMethod);

в таком случае контекст someObjectMethod будет не объект someObject, а window или undefined, очевидно это не то что хотелось.

5

Наверно можно просто сделать тоже, но с class?

let self = null;
class Some {
 constructor () {
    this.sv = 'sv';
    self = this;
 }
 
 sm() {
    self.sv = 'ov';
 }
}

Именно. Так сработает.

6

Вот тут нужен bind. Собственно мои примеры выше актуальны.

По твоему коду .bind будет выглядеть так:

somePromise.then(someObject.someObjectMethod.bind(someObject));
7

Да bind это то что поможет, но есть еще Angular, который на bind ругается, поэтому я обошел:

я вызвал не ng-click=“somePromise.then(someObject.SomeMethod)”

а ng-click=“someObject.wrapMethod”

а уже в wrapMethod() {
somePromise.then((data)=>{
this.data = data;
})
}

через стрелочную функцию сохранил контекст, но мне этот вариант не очень нравится, в частности тем что если у меня в стрелочной функции будет повторяющийся функционал как его вынести в функцию, вызвав внутри еще одну функцию?
Ну и похоже на костыль. А когда чувство прекрасного страдает, то значит что-то не так.

8

В принципе, bind можно делать не только в момент навешивания обработчика, а еще в момент создания инстанса класса. Как-то так:

class SomeObject {
	constructor() {
		this.someMethod = this.someMethod.bind(this)	
	}

	someMethod() {
		// useful stuff
	}
}

Тогда метод можно будет использовать без оглядки на this

ng-click="somePromise.then(someObject.SomeMethod)"
9

Спасибо. При случае попробую.

10

Да последний пример, что написал Дмитрий - это частая практика при разработке на React