目录
1. 使用getter和setter控制属性访问
1.1 定义getter与setter
通过对象字面量定义，或在ES6的class中定义
// 通过对象字面量定义
const students = {
student: ["Wango", "Lily", "Jack"],
// 使用set和get关键字，相当于给对象新增了一个属性（而不是方法）
// 在这个属性被赋值或被读取时，隐式调用getter或setter方法
get firstStudent() { // getter方法不接收任何参数
return this.student[0];
},
set firstStudent(val) {
this.student[0] = val;
}
}
// 如同访问标准对象属性一样访问firstStudent属性
console.log(students.firstStudent);
// Wango
// 如同操作标准对象属性一样为fristStudent赋值
students.firstStudent = "Tom";
console.log(students.firstStudent);
// Tom
// 在class中定义setter与getter
class Student {
constructor() {
this.students = ["Wango", "Lily", "Jack"];
}
get firstStudent() {
return this.students[0];
}
set firstStudent(val) {
this.students[0] = val;
}
}
const s1 = new Student();
console.log(s1.firstStudent);
// Wango
s1.firstStudent = "Tom";
console.log(s1.firstStudent);
// Tom
/**
* 针对指定的属性不一定需要同时定义getter和setter，
* 通常仅提供getter，如果在这种试图写入属性值
* 非严格模式下写入的属性值会被忽略
* 严格模式下会抛出异常
*/
通常来讲，setter和getter是用于控制访问私有属性的，但以上两种方式都是控制的公共属性。因为JS没有私有属性，只能通过闭包来模拟私有。而字面量和类中getter/setter和属性不是在同一个作用域中定义的，因此无法控制私有属性。
通过使用内置的Object.defineProperty方法
function Student(name) {
// 构造函数参数初始化属性值，需要注意的是：
// 这个初始化的值没有经过校验，可能会出错
let _name = name;
Object.defineProperty(this, "name", {
get: () => _name,
set: val => _name = val
});
}
const s = new Student("Wango");
// 只能通过setter和getter设置和访问属性
console.log(s.name);
// Wango
s.name = "Tom";
console.log(s.name);
// Tom
// 无法直接访问私有属性
console.log(typeof s._name === "undefined");
// true
// 在类中使用这个方法同样有效
class Student {
constructor(name) {
// 构造函数参数初始化属性值，需要注意的是：
// 这个初始化的值没有经过校验，可能会出错
let _name = name;
Object.defineProperty(this, "name", {
get: () => _name,
set: val => _name = val
});
}
}
const s = new Student("Wango");
console.log(s.name);
// Wango
s.name = "Tom";
console.log(s.name);
// Tom
console.log(typeof s._name === "undefined");
// true
1.2 使用setter和getter校验属性值
function Student() {
// 直接定义初始值，不由外界输入，确保安全
let _age = 0;
Object.defineProperty(this, "age", {
get: () => _age,
set: val => {
// 检查输入是否是整数
if(!Number.isInteger(val)) {
throw new TypeError("Age should be an Integer");
}
_age = val;
}
});
}
const s = new Student();
// 整数类型通过
s.age = 24
console.log(s.age);
// 24
// 字符串类型被拦截
s.age = "25";
// Uncaught TypeError: Age should be an Integer
使用setter还可以跟踪值的变化，提供性能日志，提供值发生变化的提示等
1.3 使用getter与setter定义如何计算属性值
class Student {
constructor() {
// 设置俩个公共属性
this.firstName;
this.lastName;
}
// 对参数分割并单独存放
set fullName(name) {
const segment = name.split(" ");
this.firstName = segment[0];
this.lastName = segment[1];
}
// 拼接两个属性
get fullName() {
return this.firstName + " " + this.lastName;
}
}
const s = new Student();
s.fullName = "Wango Liu";
console.log(s.firstName);
// Wango
console.log(s.lastName);
// Liu
2. 使用代理控制访问
const student = {
name: "Wango",
age: 24
}
// 初始化代理对象
// 第一个参数为目标对象
// 第二个参数为一个对象，其中定义了在对象执行特定行为时触发的函数
const proxy = new Proxy(student, {
// 获取属性时检测是否存在该属性
get: (target, key) => {
return key in target ? target[key] : "This property do not exist.";
},
set: (target, key, value) => {
// 在这里可以进行类型判断、数值追踪等操作
target[key] = value;
}
});
console.log(proxy.name);
// Wango
console.log(proxy.addr);
// This property do not exist.
proxy.addr = "China";
console.log(proxy.addr);
// China
console.log(student.addr);
// China
对象内部的getter和setter作用于某个属性，代理作用于整个代理目标
- 代理还有很多其他方法，包括但不限于：
- 调用函数时激活apply
- 使用new操作符时激活construct
- 读取/写入属性时激活get/set
- 执行for-in语句时激活enumerate
2.1 使用代理记录日志
// 定义函数为每个参数对象提供代理
function makeLoggable(target) {
// 代理的工作为记录日志
return new Proxy(target, {
set: (target, key, value) => {
console.log(`Writing value: ${value} to ${key}`);
target[key] = value;
},
get: (target, key) => {
console.log(`Reading: ${key}`);
return target[key];
}
});
}
let student = {
name: "Wango",
age: 24
}
student = makeLoggable(student);
console.log(student.name);
// Reading: name
// Wango
student.age = 25;
// Writing value: 25 to age
2.2 使用代理检测性能
function isPrime(num) {
if(num < 2) { return false; }
for(let i = 2; i < num; i++) {
if(num % i === 0) {
return false;
}
}
return true;
}
isPrime = new Proxy(isPrime, {
apply: (target, thisArg, args) => {
// 启动计时器记录时间
console.time("isPrime");
const result = target.apply(thisArg, args);
console.timeEnd("isPrime");
// 要记得储存和返回函数的计算结果
return result;
}
});
isPrime(129982790);
// isPrime: 0.034931640625 ms
2.3 使用代理自动填充属性
function Address() {
return new Proxy({}, {
get: (target, key) => {
// 如果对象不具有该属性就创建该属性
if(!target[key]) {
target[key] = new Address();
}
return target[key];
}
});
}
const addr = new Address();
// 自动创建属性，不会报错
addr.Asia.China.Chongqing = "Hot-pot";
console.log(addr.Asia.China.Chongqing);
// Hot-pot
2.4 使用代理实现负数组索引
function creatNegativeArrayProxy(array) {
// 类型检测
if(!Array.isArray(array)) {
throw new TypeError("Expected an Array.");
}
return new Proxy(array, {
get: (array, index)=> {
index = +index; // 使用一元操作符将属性名变为数值
// 如果访问的是负向索引，则逆向访问数组
return array[index < 0 ? array.length + index : index];
},
set: (array, index, value) => {
index = +index;
array[index < 0 ? array.length + index : index] = value;
}
});
}
let arr = [0, 1, 2];
arr = creatNegativeArrayProxy(arr);
// 负向索引可以正常使用
console.log(arr[1]);
// 1
console.log(arr[-1]);
// 2
arr[-1] = -1;
console.log(arr[-1]);
// -1
// 后面就有一些迷惑行为
console.log(arr);
// Proxy {0: 0, 1: 1, 2: -1}
console.log(arr.length);
// undefined
console.log(Array.isArray(arr));
// true
2.5 代理的性能消耗
function creatNegativeArrayProxy(array) {
if(!Array.isArray(array)) {
throw new TypeError("Expected an Array.");
}
return new Proxy(array, {
get: (array, index)=> {
index = +index;
return array[index < 0 ? array.length + index : index];
},
set: (array, index, value) => {
index = +index;
array[index < 0 ? array.length + index : index] = value;
}
});
}
function measure(items) {
const startTime = new Date().getTime();
for(let i = 0; i < 500000; i++) {
items[0] = "Wango";
items[1] = "Lily";
items[2] = "Tom";
}
return new Date().getTime() - startTime;
}
let arr = ["Wango", "Lily", "Tom"];
arrProxy = creatNegativeArrayProxy(arr);
console.log(Math.round(measure(arrProxy) / measure(arr)));
// 49 --> Chrome浏览器在50左右
// 42 --> Edge浏览器在40左右
// 60-120之间 Firefox浏览器 最低值55，最高值124
代理效率不高，在需要执行多次的代码中需要谨慎使用