Page 178 - JavaScript
P. 178

Getters and Setters


        Getters and setters allow you to define custom behaviour for reading and writing a given property
        on your class. To the user, they appear the same as any typical property. However, internally a
        custom function you provide is used to determine the value when the property is accessed (the
        getter), and to preform any necessary changes when the property is assigned (the setter).

        In a class definition, a getter is written like a no-argument method prefixed by the get keyword. A
        setter is similar, except that it accepts one argument (the new value being assigned) and the set
        keyword is used instead.


        Here's an example class which provides a getter and setter for its .name property. Each time it's
        assigned, we'll record the new name in an internal .names_ array. Each time it's accessed, we'll
        return the latest name.


         class MyClass {
             constructor() {
                 this.names_ = [];
             }

             set name(value) {
                 this.names_.push(value);
             }

             get name() {
                 return this.names_[this.names_.length - 1];
             }
         }

         const myClassInstance = new MyClass();
         myClassInstance.name = 'Joe';
         myClassInstance.name = 'Bob';

         console.log(myClassInstance.name); // logs: "Bob"
         console.log(myClassInstance.names_); // logs: ["Joe", "Bob"]


        If you only define a setter, attempting to access the property will always return undefined.


         const classInstance = new class {
             set prop(value) {
                 console.log('setting', value);
             }
         };

         classInstance.prop = 10; // logs: "setting", 10

         console.log(classInstance.prop); // logs: undefined


        If you only define a getter, attempting to assign the property will have no effect.


         const classInstance = new class {
             get prop() {
                 return 5;
             }



        https://riptutorial.com/                                                                             135
   173   174   175   176   177   178   179   180   181   182   183