• Author: Chen Da Yu Tou
  • Making: KRISACHAN

preface

  • Just read the last nuggets articleWhy you were Passed as a Technical InterviewerThe first one is usinges5implementationconstAccording to the author’s feedbackAll the interviewees failed to answer this questionIn fact, this is a relatively simple topic, but it is not easy to remember because it involves some knowledge of Object attribute descriptors, which are often used in a few scenes.

Attribute descriptors:

There are currently two types of property descriptors in the object:

  • Data descriptors: Properties with values
  • Access descriptor: Properties described by pairs of getter and setter functions

Descriptor function:

Both data descriptors and access descriptors can be modified:

  • The attribute descriptor of the current object element can be modified and deleted
  • Enumerable: Whether the current object element is enumerable

Only data descriptors can be modified:

  • Value: The value of the current object element
  • Writable: Whether the value of the current object element can be modified

Only the access descriptor can be modified:

  • Get: Operation to read the value of an element attribute
  • Set: Operation to modify the value of an element attribute

Key values that the descriptor can have at the same time:

configurable enumerable value writable get set
Data descriptor Yes Yes Yes Yes No No
Access descriptor Yes Yes No No Yes Yes

Implementation principle of const

Since the ES5 environment does not have the concept of blocks, it is not possible to implement const objects 100%. Instead, it has to be mounted to an object, either a global window or a custom object

      var __const = function__const (data, value) {window.data = value // Use object.defineProperty's ability to hijack the current Object and modify its property descriptor Enumerable:false,
          configurable: false,
          get: function () {
            return value
          },
          set: function (data) {
            if(data ! == value) {// An error is thrown when the current attribute is assigned! 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// Enumerable is used because a const attribute does not exist in a global:falseTo simulate this functionif (item === 'a') {console.log(window[item])}} a = 20 // errorCopy the code

digression

At present, the core implementation idea of Vue bidirectional binding is to hijack GET and set using Object.defineProperty to monitor the specific situation when users call attributes and assign values, so as to achieve bidirectional binding ~~

If you like to discuss technology, or have any comments or suggestions on this article, you are welcome to add yu Tou wechat friends to discuss. Of course, Yu Tou also hopes to talk about life, hobbies and things with you. You can also scan your wechat account to subscribe to more exciting content.