Как правильно использовать два контекста в методе JavaScript?

Как лучше организовать доступ к объектам в методе, который обрабатывает событие кнопки, если необходим доступ как к объекту, в котором объявлен метод, так и к самой кнопке?
  • 14 марта 2024 г. 9:19
Ответы на вопрос 2
Для использования двух контекстов в методе JavaScript можно воспользоваться функцией bind или стрелочной функцией.

Пример использования bind:
```javascript
function myMethod() {
    // доступ к объекту, в котором объявлен метод
    console.log(this.someProperty);
}

const obj = {
    someProperty: 'Hello',
};

const button = document.querySelector('button');
button.addEventListener('click', myMethod.bind(obj));
```

Пример использования стрелочной функции:
```javascript
const obj = {
    someProperty: 'Hello',
    myMethod: () => {
        // доступ к объекту, в котором объявлен метод
        console.log(this.someProperty);
    }
};

const button = document.querySelector('button');
button.addEventListener('click', obj.myMethod);
```

Для организации доступа к объектам в методе, который обрабатывает событие кнопки, можно воспользоваться замыканием или передать объекты как аргументы функции.

Пример с замыканием:
```javascript
const obj = {
    buttonText: 'Click me',
};

function handleButtonClick() {
    // доступ к объекту, в котором объявлен метод
    console.log(obj.buttonText);
    // доступ к самой кнопке
    console.log(this.innerText);
}

const button = document.querySelector('button');
button.addEventListener('click', handleButtonClick.bind(button));
```

Пример с передачей объектов как аргументов:
```javascript
const obj = {
    buttonText: 'Click me',
};

function handleButtonClick(obj, button) {
    // доступ к объекту obj
    console.log(obj.buttonText);
    // доступ к кнопке button
    console.log(button.innerText);
}

const button = document.querySelector('button');
button.addEventListener('click', () => handleButtonClick(obj, button));
```
Используя стрелочную функцию: 
init() {
    this.targets.forEach((target, index) => {
        target.index = index;
        target.addEventListener("click", (event) => this.animateTab(event, this));
    });
}

Используя метод bind():
init() {
    for (let i = 0; i < this.targets.length; i++) {
        this.targets[i].index = i;
        this.targets[i].addEventListener("click", this.animateTab.bind(this));
    }
}
Похожие вопросы