Какво е this?

Какво е this?
Photo by sydney Rae / Unsplash

this е специална ключова дума в JavaScript, която се използва за достъп до текущия обект. Това означава, че тя има различни стойности в зависимост от контекста, в който се използва.

Най-често this се използва в контекста на обект, за да се получи достъп до свойствата му. В този случай this се отнася до обекта, който извиква метода.

const person = {
  firstName: 'John',
  lastName: 'Doe',
  fullName: function() {
    return this.firstName + ' ' + this.lastName;
  }
};

console.log(person.fullName()); // John Doe

В този пример, this се отнася до обекта person, тъй като fullName метода се извиква в контекста на този обект.

this се използва и в глобалния контекст, когато се използва извън обект, като се отнася до глобалния обект window в браузърите или до global обекта в Node.js.

console.log(this === window); // true

В този пример, this се отнася до глобалния обект window в браузърите.

this може да се промени в контекста на функция, когато тя се извиква чрез метода call, apply или bind. Тези методи позволяват на програмиста да променя стойността на this в контекста на функцията.

const person1 = {
  firstName: 'John',
  lastName: 'Doe',
  fullName: function() {
    return this.firstName + ' ' + this.lastName;
  }
};

const person2 = {
  firstName: 'Jane',
  lastName: 'Doe'
};

console.log(person1.fullName.call(person2)); // Jane Doe

В този пример, call методът се използва за извикване на fullName метода в контекста на обекта person2. Така this се променя от person1 към person2, като стойността му сега е равна на person2.

this може да бъде използван в контекста на конструктор функция:

function Car(brand, model) {
  this.brand = brand;
  this.model = model;
  this.getDetails = function() {
    console.log(`This is a ${this.brand} ${this.model}`);
  };
}

const car1 = new Car('BMW', 'X5');
const car2 = new Car('Audi', 'Q5');

car1.getDetails(); // This is a BMW X5
car2.getDetails(); // This is a Audi Q5

В този пример, конструкторът Car се използва за създаване на нови обекти car1 и car2. При създаването на нов обект, ключовата дума this се отнася до новия обект, който се създава. Така, за всяка нова инстанция на Car, this се променя, за да се отнася до този конкретен обект.

Така, при извикването на getDetails метода на car1 и car2, this се отнася до тези обекти и отпечатва съответните марка и модел на колите.

this може да се промени в контекста на функцията:

const car = {
  brand: 'BMW',
  model: 'X5',
  getDetails: function() {
    console.log(`This is a ${this.brand} ${this.model}`);
  }
};

const bike = {
  brand: 'Harley Davidson',
  model: 'Fat Boy'
};

car.getDetails(); // This is a BMW X5

const bikeDetails = car.getDetails.bind(bike);
bikeDetails(); // This is a Harley Davidson Fat Boy

В този пример, this се отнася до обекта car в контекста на getDetails метода. След това се използва bind методът за създаване на нова функция bikeDetails, която има привързан контекст на обекта bike.

При извикването на bikeDetails() стойността на this се променя от car към bike.