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(`
fullName = ${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(`
area = ${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(`
staticName =`, Person.staticName);
return Person.staticName || Person.name;
}
static get userName() {
log(`
static userName =`, window.username || global.username);
return window.username || global.username;
}
static set userName(name) {
log(`
new name =`, name);
if(window.username) {
window.username = name;
} else {
global.username = name;
}
}
get fortune() {
log(`
get money =`, this.money);
return this.money;
}
set fortune(dollar) {
log(`
set 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://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 发布文章使用：只允许注册用户才可以访问！