ключевое слово this в javascript

Введение :-

Одна из самых запутанных тем в javascript
чтобы получить доступ к объекту, метод может использовать это ключевое слово.
В отличие от других языков программирования javascript, это ключевое слово ведет себя иначе, оно может быть использовано в любой функции, даже если это не метод объекта.

ключевое слово this

использование этого ключевого слова

const user = {
  name: 'hero',
  age: 21,
  data() {
    console.log('user name', this.name)
    console.log("user age", this.age)
  }
}
user.data()
// user name hero
// user age 21

выглядит просто и правильно

В javascript значение this не относится к используемой функции или ее области видимости.
оно относится к значению по контексту вызова функции и месту ее вызова.

Привязка важна для понимания ключевого слова ‘this’

• Привязка по умолчанию:
• Неявное связывание
• Явное связывание
• Новый метод оператора

Привязка по умолчанию

const myFunction = function() {
   console.log(this);
}

myFunction();    // Window

поскольку мы вызываем функцию function() в контексте окна, она будет ссылаться на объект окна

var myFunction = function() {
   console.log(this.a);
}
var a = 200
myFunction();    // 200

вышеуказанная функция ссылается на глобальный контекст и возвращает 200. Она работает только если мы используем var, потому что она находится в глобальном контексте.

Неявное связывание

function foo(){
    console.log(this.a);
}

var obj = {
    a:2,
    foo:foo
};

obj.foo();  // 2 

как вы видите obj.foo() будет ссылаться на объект obj и возвращать 2

function foo(){
    console.log(this.a);
}

var obj = {
    a:2,
    foo:foo
};

var fun = obj.foo; 
fun() //undefined

если мы присвоим obj.foo значению var, то оно будет ссылаться на саму функцию

Явное связывание

если мы хотим вызвать функцию, используя какой-либо конкретный объект, мы используем явное связывание.

Мы можем использовать call, bind и apply.

const obj = {
 name:'hero',
  age:21
}

function foo (){
console.log('user name', this.name)
    console.log("user age", this.age)
}

foo.call(obj)
// user name hero
// user age 21

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

метод apply работает так же, как и call, единственное различие между call и apply — в apply аргументы функции передаются в виде массива.

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

function foo(){
    console.log(this.a);
}

var obj = {
    a:2,
    foo:foo
};

var fun = foo.bind(obj); 
fun() //2

Метод нового оператора

Оператор new позволяет создать экземпляр объекта определенного пользователем типа или одного из встроенных типов объектов, имеющих функцию конструктора.

const newObj = new Car('toyota','nissan','honda')

• Создает пустой, обычный объект JavaScript.
• Создается новый пустой объект, на который ссылается это ключевое слово.
• Свойства и методы добавляются к объекту, на который ссылается this.

function Car(carOne, carTwo, carThree) {
  this.carOne = carOne;
  this.carTwo = carTwo;
  this.carThree = carThree;
}

const newObj = new Car('toyota','nissan','honda')

console.log(newObj.carTwo);  //nissan

Оператор new имеет наивысший приоритет по сравнению с явным связыванием и неявным связыванием. Наименьший приоритет имеет привязка по умолчанию.

Функция стрелки для 🥶this

const arrowFun = ()=> console.log('this will not bind')

да 😂
потому что функция стрелки не имеет собственного связывания. функция стрелки не может использовать методы этого аргумента.

const obj = {
  name: 'harshit'
}
const fun = () => {
  console.log(this.name)
}

fun.call(obj) // <empty string>

стрелочная функция не имеет доступа к new.target
Стрелочные функции не подходят для методов call, apply и bind, которые обычно полагаются на установление области видимости.

спасибо за прочтение