
对象属性的get、set
为了创建对象私有变量,我们会在构造函数中通过定义的getter、setter函数闭包访问和修改私有属性。
function Man() {
let name = "liu";
this.getName = () => {
console.log("getname");
return name;
};
this.setName = name => {
console.log("setname");
name = name;
};
}
let man = new Man();
let name = man.getName();
console.log(name);
man.setName("zhang");
使用get和set关键字在对象字面量中定义getter、setter。
const Man = {
_name: "liu",
get name() {
console.log("getname");
return this._name;
},
set name(name) {
console.log("setname");
this._name = name;
}
};
let name = Man.name;
console.log(name);
Man.name = "zhang";
console.log(Man._name);
可以看出通过get和set关键字定义出的getter、setter更像是属性而不是方法。 使用get和set关键字在class中定义getter、setter,方法类似。
class Man {
constructor() {
this._name = "liu";
}
get name() {
console.log("getname");
return this._name;
}
set name(name) {
console.log("setname");
this._name = name;
}
}
const man = new Man();
let name = man.name;
console.log(name);
man.name = "zhang";
console.log(man._name);
回到第一个构造函数,我们想改写它的getter、setter,可以像访问属性一样访问name私有属性,而get和set关键字只能在对象和class中定义,所以还需要借助于Object.defineProperty()方法,在传入的参数中定义getter、setter。
function Man() {
let _name = "liu";
Object.defineProperty(this, "name", {
get: () => {
console.log("getname");
return _name;
},
set: name => {
console.log("setname");
_name = name;
}
});
}
const man = new Man();
let name = man.name;
console.log(name);
man.name = "zhang";
console.log(man.name);
Object.defineProperty中传入的参数this将指向man,并绑定传入的name属性,而name属性的特性由后面的对象配置。这其中就包含了通过get和set关键字定义出的getter、setter。当我们访问和修改name属性时将调用get和set对应的函数。
通过setter可以对传入值进行校验
function Man() {
let _age = 20;
Object.defineProperty(this, "age", {
get: () => {
console.log("getage");
return _age;
},
set: age => {
console.log("set_age");
if (!Number.isInteger(age)) {
throw new TypeError("age should be number!!");
} else {
_age = age;
}
}
});
}
const man = new Man();
let age = man.age;
console.log(age);
man.age = 10;
console.log(man.age);
man.age = "zhang";
当age为整数时可以成功赋值,如果是小数或其他数据类型将抛出错误提示
整个对象的get、set
以上可以看做对对象的某个属性进行代理操作,当我们要对对象的每个属性进行代理时,挨个属性代理将行不通,我们需要使用Proxy构造函数对对象进行代理,代理操作最终将作用于源对象。
let man = { name: "liu" };
man = new Proxy(man, {
get: (target, key) => {
console.log("getProperty");
return key in target ? target[key] : "Don't have";
},
set: (target, key, value) => {
console.log("setProperty");
target[key] = value;
return true;
}
});
let name = man.name;
console.log(name);
man.name = "zhang";
name = man.name;
console.log(name);
以上代码通过Proxy构造函数创建出man对象的代理对象并重新赋值给man标识符(最初的man对象最为代理对象的目标对象将保持活跃,类似闭包),Proxy构造函数中传入需代理的man对象以及配置对象,配置对象中定义了每个属性的getter、setter,需要注意set方法中我们需要返回Boolean值,明确是否设置成功。
当然数组也是对象,所以Proxy也可以代理数组,我们可以通过代理数组扩展原生数组功能,如JavaScript中数组索引不能为负数,通过代理数组可以解决。
function array(array) {
if (!Array.isArray(array)) {
throw new TypeError("unexpected type !");
}
return new Proxy(array, {
get: (target, index) => {
console.log("get");
index = +index;
return target[index > 0 ? index : target.length + index];
},
set: (target, index, value) => {
console.log("set");
index = +index;
return (target[index > 0 ? index : target.length + index] = value);
}
});
}
const mans = ["liu", "zhang", "li"];
let woman = "liu";
const man = array(mans);
console.log(man[-1]);
man[-1] = "wang";
console.log(mans);
我们在get和set方法中先将传入的索引index通过一元操作符“+”转换为数值,再通过判断index是否大于零决定索引index还是target.length + index。
除了代理对象我们也可以代理函数,当我们需要测试函数性能时,可使用代理函数计算执行时长。
function isPrime(number) {
if (number < 2) {
return false;
}
for (let i = 2; i < number; i++) {
if (number % i === 0) {
return false;
}
}
return true;
}
isPrime = new Proxy(isPrime, {
apply: (target, thisArg, argumentList) => {
console.time("isPrime");
const result = target.apply(thisArg, argumentList);
console.timeEnd("isPrime");
return result;
}
});
console.log(isPrime(11373212));
我们先定义了用于计算传入的数字是否为素数的isPrime函数,之后通过Proxy构造函数传入isPrime函数得到新的isPrime代理函数,其中传入的配置对象设置了apply方法该方法在代理函数被执行时执行,该方法将默认传入目标函数、当前函数执行上下文以及参数列表,之后通过applay将当前函数执行上下文绑定到目标函数并传入参数执行。执行前后通过设置计时器(timer)打印执行时间。