Как реализовать константу в среде ES5?

JavaScript
  • Автор: Чен Даютоу
  • гитхаб:KRISACHAN

предисловие

  • Просто прочитайте последнюю статью Nuggets«Как технический интервьюер, почему вы прошли?», первый вопрос в нем - использоватьes5выполнитьconst, по отзывам автораВсе интервьюеры не ответили на этот вопрос, Жаль, на самом деле это относительно простая тема, но поскольку она требует некоторого знания дескрипторов атрибутов объекта Object, эти дескрипторы часто используются в нескольких сценах, поэтому их нелегко запомнить.

Дескриптор свойства:

В настоящее время в объекте есть два типа дескрипторов свойств:

  • Дескриптор данных:недвижимость со стоимостью
  • Дескриптор доступа:Свойство, описываемое парой функций получения и установки.

Дескрипторная функция:

И дескрипторы данных, и дескрипторы доступа могут быть изменены:

  • настраиваемый: можно ли изменить или удалить дескриптор свойства текущего элемента объекта
  • enumerable: является ли текущий элемент объекта перечисляемым

Только дескрипторы данных могут быть изменены:

  • value: значение текущего элемента объекта
  • записываемый: можно ли изменить значение текущего элемента объекта

Только дескрипторы доступа могут быть изменены:

  • get: операция при чтении значения атрибута элемента
  • set: операция при изменении значения атрибута элемента

Дескрипторы могут иметь оба ключевых значения:

configurable enumerable value writable get set
дескриптор данных Yes Yes Yes Yes No No
дескриптор доступа Yes Yes No No Yes Yes

константный принцип реализации

Так как в среде ES5 нет блочной концепции, реализовать const невозможно, можно только примонтировать к объекту, либо глобальное окно заказывается для настройки объекта на контейнер.

      var __const = function __const (data, value) {
        window.data = value // 把要定义的data挂载到window下，并赋值value
        Object.defineProperty(window, data, { // 利用Object.defineProperty的能力劫持当前对象，并修改其属性描述符
          enumerable: false,
          configurable: false,
          get: function () {
            return value
          },
          set: function (data) {
            if (data !== value) { // 当要对当前属性进行赋值时，则抛出错误！
              throw new TypeError('Assignment to constant variable.')
            } else {
              return value
            }
          }
        })
      }
      __const('a', 10)
      console.log(a)
      delete a
      console.log(a)
      for (let item in window) { // 因为const定义的属性在global下也是不存在的，所以用到了enumerable: false来模拟这一功能
        if (item === 'a') { // 因为不可枚举，所以不执行
          console.log(window[item])
        }
      }
      a = 20 // 报错

Не по теме

Основная идея реализации текущей двусторонней привязки Vue заключается в использовании Object.defineProperty дляgetа такжеsetПерехват, отслеживание конкретной ситуации, когда пользователь вызывает атрибут и назначает его, чтобы реализовать двустороннюю привязку~~

Если вам нравится обсуждать технологии или у вас есть какие-либо комментарии или предложения по этой статье, вы можете добавить друзей Yutou в WeChat для совместного обсуждения.Конечно, Yutou также надеется поговорить с вами о жизни, хобби и поболтать. WeChat ID Fish Head: krisChans95 Вы также можете отсканировать код, чтобы подписаться на официальный аккаунт и подписаться на более интересный контент.

https://fish-pond-1253945200.cos.ap-guangzhou.myqcloud.com/img/base/qrcode-all.png

Категории