Добавьте в прототип функцию с доступом к "этому"

С одной стороны, я могу назначить новую функцию объекту с Object.defineProperty(...).

Затем я попытался назначить функцию непосредственно прототипу NodeList. Но как-то не работает должным образом. Что я делаю не так?

Object.defineProperty(
  NodeList.prototype,
  'lastElement', { 
    get: function() {
      return this[this.length - 1].textContent;
    }
  }
);

NodeList.prototype.firstElement = () => {
   return this[0].textContent;
}

const h = document.querySelectorAll('span');
console.info('#last:', h.lastElement);
console.info('#first:', h.firstElement);
<div>
  <span>1</span>
  <span>2</span>
</div>
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
17
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Стрелочные функции () => {...} — это не просто другой синтаксис, который ведет себя одинаково, они фактически по-разному обрабатывают ключевое слово this.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#arrow_functions_used_as_methods

Если вы переключитесь на использование традиционного синтаксиса функции, this будет вести себя так, как вы ожидаете.

Кроме того, вы определили firstElement как обычную функцию, а не функцию-получатель, поэтому вам нужно будет вызывать ее следующим образом.

console.info('#first:', h.firstElement());

Object.defineProperty(
  NodeList.prototype,
  'lastElement', { 
    get: function() {
      return this[this.length - 1].textContent;
    }
  }
);

NodeList.prototype.firstElement = function() {
   return this[0].textContent;
}

const h = document.querySelectorAll('span');
console.info('#last:', h.lastElement);
console.info('#first:', h.firstElement());
<div>
  <span>1</span>
  <span>2</span>
</div>

Большое спасибо! Можно ли еще написать так, чтобы присваивающая функция все равно получала геттер? Чтобы я мог назвать это без ()?

KrassVerpeilt 06.04.2022 20:47

Я так не думаю, я думаю, что вы ограничены методом, который вы использовали для lastElement

Eric Phillips 06.04.2022 20:55

Спасибо за объяснение! Сегодня я кое-чему научился :-) Merci

KrassVerpeilt 06.04.2022 21:08

Другие вопросы по теме