JavaScript getter and setter All In One

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

*/

Object.defineProperty

refs

https://javascript.info/property-accessors

https://medium.com/javascript-in-plain-english/javascript-properties-getters-and-setters-619997b93612

https://www.hongkiat.com/blog/getters-setters-javascript/

https://www.w3schools.com/js/js_object_accessors.asp

https://stackoverflow.com/questions/812961/getters-setters-for-dummies

---

---

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---