Рубрики
Без рубрики

Что такое «это» в JavaScript?

Вот вопрос, который я часто получаю в классе: Можем ли мы потратить немного больше времени по поводу фундаменских … Теги с JavaScript.

Вот вопрос, который я часто получаю в классе:

Можем ли мы потратить немного больше времени по поводу основы того, как Это Работает и как определить, что он ссылается? Я бы понравился для кого-то, кто немного знаком с концепцией, чтобы объяснить это, как мне 5 лет.

Самое простое объяснение Это Это определено, когда вызывается функция. Если функция является атрибутом объекта, и этот объект используется при его вызове, как Object.Coolfunction () Тогда Это это объект. Если функция не является атрибутом объекта, то Это это null Отказ

Проверьте это:

const person = {
  name: "Amiro",
  sayHello: function () {
    console.log("Hello from " + this.name)
  }
}
person.sayHello() // => prints "Hello from Amiro"
const sayHello = person.sayHello
sayHello() // what happens here? What is "this" when we call this function?

Вот где он становится очень сложно: обратные вызовы. Вот пример. Предположим, что есть элемент кнопки, хранящийся в переменной кнопка Отказ

button.addEventListener('click', person.sayHello)

Когда кнопка нажала, функция хранится в человек.Сайхелло называется, но важно отметить, что он называется как функция, а не как атрибут человек . Итак, Это это ноль, когда вы нажимаете кнопку.

Есть два способа установить Это Настоятельно, так что это то, что вы хотите, чтобы это было всегда: метод .связывать () и используя функции стрелки.

.связывать ()

Все функции имеют метод .связывать () это принимает один аргумент. .связывать () Возвращает новую функцию, которая делает то же самое, но у него будет переменная Это связан с этим аргументом. Пример:

function sayHello() {
  console.log("hello from " + this.name)
}

const sayHelloFromAmiro = sayHello.bind({name: 'Amiro'})
sayHelloFromAmiro() // => prints "hello from Amiro"

{Название: 'amiro'} был связан с Это Когда мы позвонили .bind ({name: 'amiro'}) на Сайхелло Отказ

Функции стрелки

Когда вы делаете функцию, используя () => {} Синтаксис, известный как синтаксис стрелки , Это связан в то время, когда вы создаете функцию. Это действительно полезно, если у вас есть функция на объекте, который вы хотите действовать как слушатель события.

Думайте обратно к примеру элемента кнопки DOM под названием кнопка Отказ Вот с функциями стрелки:

const person = {
  name: "Amiro",
  sayHello: () => {
    console.log("Hello from " + this.name)
  }
}
person.sayHello() // => prints "Hello from Amiro"
button.addEventListener('click', person.sayHello)

На этот раз мы получим то, что мы ожидаем, когда мы нажимаем кнопка .

Оригинал: “https://dev.to/momentum/what-is-this-in-javascript-3lc1”