JavaScript getter and setter All In One

getter & setter

JavaScript Object Accessors

JavaScript Accessors (Getters and Setters)

ECMAScript 5 (2009) introduced Getter and Setters.

Getters and setters allow you to define Object Accessors (Computed Properties).

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set

object getter and setter

"use strict";

/**

 *

 * @author xgqfrms

 * @license MIT

 * @copyright xgqfrms

 * @created 2020-09-05

 * @modified

 *

 * @description object getter & setter

 * @difficulty Easy Medium Hard

 * @complexity O(n)

 * @augments

 * @example

 * @link https://youtu.be/bl98dm7vJt0?t=332

 * @solutions

 *

 */

const log = console.log;

const person = {

  name: "xgqfrms",

  firstName: "web",

  lastName: "fullstack",

  get fullName () {

    log(`\nfullName = ${this.firstName} ${this.lastName}`);

    return `${this.firstName} ${this.lastName}`;

    // return this.firstName + this.lastName;

  },

  set fullName (name) {

    // const names = name.split(` `).map(item => item.trim());

    // this.firstName = names[0];

    // this.lastName = names[1];

    [this.firstName, this.lastName] = name.split(` `).map(item => item.trim());

    // [this.firstName, this.lastName, ...others] = name.split(` `).map(item => item.trim());

  },

}

log(person.fullName);

person.fullName = `abc xyz`;

log(person.fullName);

/*

fullName = web fullstack

web fullstack

fullName = abc xyz

abc xyz

*/

class getter and setter



"use strict";

/**

 *

 * @author xgqfrms

 * @license MIT

 * @copyright xgqfrms

 * @created 2020-09-05

 * @modified

 *

 * @description class getter & setter

 * @difficulty Easy Medium Hard

 * @complexity O(n)

 * @augments

 * @example

 * @link https://youtu.be/y4wDanUBNmE?t=347

 * @solutions

 *

 */

const log = console.log;

class Square {

  constructor (size = 0) {

    // init

    this.acreage = size**2;

    this.width = size;

    this.height = size;

    this.size = size;

  }

  get area () {

    log(`\narea = ${this.acreage}`);

    return this.acreage;

  }

  set area (acreage = 0) {

    const size = Math.sqrt(acreage);

    log(`area size =`, size);

    this.acreage = size**2;

    this.width = size;

    this.height = size;

    this.size = size;

  }

}

const test = new Square(3);

log(test.area);

test.area = 36;

log(test.area);

/*

area = 9

9

area size = 6

area = 36

36

*/

class static getter & setter



"use strict";

/**

 *

 * @author xgqfrms

 * @license MIT

 * @copyright xgqfrms

 * @created 2020-09-05

 * @modified

 *

 * @description class static getter & setter

 * @difficulty Easy Medium Hard

 * @complexity O(n)

 * @augments

 * @example

 * @link

 * @solutions

 *

 */

const log = console.log;

let window = {

  username: "xgqfrms",

};

// let window = window || {

//   username: "xgqfrms",

// };

// global variable

// global.username = "web fullstack";

let username = "web fullstack";

class Person {

  constructor(name = `xgqfrms`, dollar = 100) {

    this.username = name;

    this.money = dollar;

  }

  // static property / public class field

  static staticName = `static property / public class field`;

  // static methods just only for the Utils function

  static get getStaticName() {

    log(`\nstaticName =`, Person.staticName);

    return Person.staticName || Person.name;

  }

  static get userName() {

    log(`\nstatic userName =`, window.username || global.username);

    return window.username || global.username;

  }

  static set userName(name) {

    log(`\nnew name =`, name);

    if(window.username) {

      window.username = name;

    } else {

      global.username = name;

    }

  }

  get fortune() {

    log(`\nget money =`, this.money);

    return this.money;

  }

  set fortune(dollar) {

    log(`\nset money =`, dollar);

    this.money = dollar;

  }

  // static 只能修改全局属性，不能用于类实例中

  // static get fortune() {

  //   log(`get money =`, this.money);

  //   return this.money;

  // }

  // static set fortune(dollar) {

  //   log(`set money =`, dollar);

  //   this.money = dollar;

  // }

}

const user = new Person(`web fullstack`);

log(user.fortune);

user.fortune = 888;

log(user.fortune);

log(Person.getStaticName);

// staticName = static property / public class field

log(Person.staticName);

// static property / public class field

log(Person.userName);

// static userName = xgqfrms

Person.userName = "abc xyz";

log(Person.userName);

// static userName = abc xyz

/*

get money = 100

100

set money = 888

get money = 888

888

*/