Почему ловушка ownKeys Proxy не работает с Object.keys()?

В документации ловушки Proxy ownKeys на MDN указано, что она будет перехватывать Object.keys() вызовы:

Эта ловушка может перехватывать следующие операции:

Object.getOwnPropertyNames()

Object.getOwnPropertySymbols()

Объект.keys()

Reflect.ownKeys()

Однако, судя по моим тестам, это не работает с Object.keys:

const proxy = new Proxy({}, {
  ownKeys() {
    console.info("called")
    return ["a", "b", "c"]
  }
})

console.info(Object.keys(proxy))

console.info(Object.getOwnPropertyNames(proxy))

console.info(Reflect.ownKeys(proxy))
Поведение ключевого слова "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) для оценки ваших знаний,...
6
0
799
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

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

Причина проста: Object.keys возвращает только свойства с перечисляемым флагом. Чтобы проверить это, он вызывает внутренний метод [[GetOwnProperty]] для каждого свойства, чтобы получить его дескриптор. А здесь, поскольку свойства нет, его дескриптор пустой, флаг перечисления отсутствует, поэтому оно пропущено.

Чтобы Object.keys возвращал свойство, нам нужно, чтобы оно либо существовало в объекте с флагом enumerable, либо мы можем перехватывать вызовы [[GetOwnProperty]] (это делает ловушка getOwnPropertyDescriptor) и возвращать дескриптор с enumerable: true.

Вот пример:

let user = { };

user = new Proxy(user, {
  ownKeys(target) { // called once to get a list of properties
    return ['a', 'b', 'c'];
  },

  getOwnPropertyDescriptor(target, prop) { // called for every property
    return {
      enumerable: true,
      configurable: true
      /* ...other flags, probable "value:..." */
    };
  }

});

console.info( Object.keys(user) ); // ['a', 'b', 'c']

Источник

Object.keys возвращает только перечисляемые собственные свойства объекта. У вашего прокси их нет, или, по крайней мере, он не сообщает о них в своей ловушке getOwnPropertyDescriptor. Он работает с

const proxy = new Proxy({}, {
  ownKeys() {
    console.info("called ownKeys")
    return ["a", "b", "c"]
  },
  getOwnPropertyDescriptor(target, prop) {
    console.info(`called getOwnPropertyDescriptor(${prop})`);
    return { configurable: true, enumerable: true };
  } 
})

console.info(Object.keys(proxy))

console.info(Object.getOwnPropertyNames(proxy))

console.info(Reflect.ownKeys(proxy))
const proxy = new Proxy({}, {
ownKeys: function () {
  console.info("called")
  return ["a", "b", "c"]
  }
 });

Хотя ответ, содержащий только код, может быть правильным, он помогает человеку, задавшему вопрос, но не приносит пользы ни ему, ни будущим посетителям. Пожалуйста, рассмотрите возможность улучшения вашего ответа.

Rohit Gupta 03.05.2023 16:19

мой друг, я тестирую код, и он работает нормально. что я должен сделать, чтобы улучшить ответ

paliz 03.05.2023 18:43

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