Что такое this и расскажите про область видимости?angular-6

1. this в JavaScript

this — это контекст выполнения функции, который определяется в момент вызова, а не объявления.

Основные правила определения this:

  • Глобальный контекст:

    console.log(this); // В браузере: `window`, в Node.js: `global`

  • Метод объекта:

    const user = {
  name: 'Alice',
  greet() {
    console.log(this.name); // `this` = объект `user`
  }
};
user.greet(); // "Alice"

  • Конструктор (класс):

    function Person(name) {
  this.name = name; // `this` = новый экземпляр
}
const bob = new Person('Bob');

  • Стрелочные функции:
    Не имеют своего this, берут его из внешней области.

    const obj = {
  name: 'Alice',
  greet: () => {
    console.log(this.name); // `this` = глобальный объект (не `obj`!)
  }
};
obj.greet(); // undefined (если в строгом режиме)

  • Явное указание:

    function showName() {
  console.log(this.name);
}
const user1 = { name: 'Alice' };
const user2 = { name: 'Bob' };
showName.call(user1); // "Alice" (явная привязка)

2. Область видимости

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

Типы областей видимости:

  • Глобальная область:

    const globalVar = 'I am global';
function foo() {
  console.log(globalVar); // Доступна
}

  • Локальная (функциональная) область:

    function bar() {
  const localVar = 'I am local';
  console.log(localVar); // Доступна
}
console.log(localVar); // Ошибка: localVar is not defined

  • Блочная область (let/const):

    if (true) {
  const blockVar = 'I am block-scoped';
  let anotherVar = 'Me too';
}
console.log(blockVar); // Ошибка

  • Лексическая область (замыкания):

    function outer() {
  const outerVar = 'Outer';
  function inner() {
    console.log(outerVar); // Доступ к внешней переменной
  }
  return inner;
}
const closure = outer();
closure(); // "Outer"

3. Особенности в Angular

  • this в компонентах:

    class MyComponent {
  name = 'Angular';
  onClick() {
    console.log(this.name); // `this` = экземпляр компонента
  }
}

  • Стрелочные функции для колбэков:

    class AppComponent {
  items = [1, 2, 3];
  ngOnInit() {
    this.items.forEach(item => {
      console.log(this); // `this` = экземпляр компонента
    });
  }
}

  • Использование bind:

    constructor() {
  this.onClick = this.onClick.bind(this); // Фиксация контекста
}

Резюмируем

  1. this:
    • Зависит от контекста вызова.
    • Стрелочные функции не имеют своего this.
    • В Angular чаще всего this — это экземпляр класса компонента.
  2. Область видимости:
    • var — функциональная, let/const — блочная.
    • Замыкания позволяют сохранять доступ к внешним переменным.
  3. Практика:
    • В Angular используйте стрелочные функции для колбэков.
    • Избегайте утечек контекста (например, в setTimeout).

P.S. Для отладки this в DevTools используйте console.log(this) или точки останова.

Вопросы

Собеседования