对象基础知识
抽象特性
将复杂功能隐藏在内部,只开放给外部少量方法,更改对象内部的复杂逻辑不会对外部调用造成影响即抽象。
详细解释:后盾人----抽象特性
属性特征
详细解释:属性特征
JS 中可以对属性的访问特性进行控制
"use strict";
const user = {
name: "向军"
};
Object.defineProperty(user, "name", {
value: "后盾人",
writable: false,
enumerable: false,
configurable: false
});
//第二次配置,报错
Object.defineProperty(user, "name", {
value: "后盾人",
writable: false,
enumerable: false,
configurable: true
});
在第一次配置configurable: false 后,所有属性都不能进行更改了,包括configurable
属性访问器
getter 方法用于获得属性值,setter 方法用于设置属性,这是 JS 提供的存取器特性即使用函数来管理属性。(在对属性进行读取或者设置的时候,可以加上自己的判断等操作)
- 用于避免错误的赋值
- 需要动态监测值的改变
- 属性只能在访问器和普通属性任选其一,不能共同存在
详细解释:属性访问器
"use strict";
const user = {
data: { name: '后盾人', age: null },
set age(value) {
if (typeof value != "number" || value > 100 || value < 10) {
throw new Error("年龄格式错误");
}
this.data.age = value;
},
get age() {
return `年龄是: ${this.data.age}`;
}
};
user.age = 99;
console.log(user.age);
代理拦截
详细解释:代理拦截
代理(拦截器)是对象的访问控制,setter/getter 是对单个对象属性的控制,而代理是对整个对象的控制。
- 读写属性时代码更简洁
- 对象的多个属性控制统一交给代理完成
- 严格模式下 set 必须返回布尔值
let d=new Proxy(target,handle);
Proxy 对象的所有用法,都是上面这种形式,不同的只是handler参数的写法。
其中,new Proxy()表示生成一个Proxy实例,target参数表示所要拦截的目标对象,handler参数也是一个对象,用来定制拦截行为。
"use strict";
const hd = { name: "后盾人" };
const proxy = new Proxy(hd, {
get(obj, property) {
return obj[property];
},
set(obj, property, value) {
obj[property] = value;
return true;
}
});
proxy.age = 10;
console.log(hd);
使用代理截取字符案例
下例中对数组进行代理,用于截取标题操作
const stringDot = {
get(target, key) {
const title = target[key].title;
const len = 5;
return title.length > len
? title.substr(0, len) + ".".repeat(3)
: title;
}
};
const lessons = [
{
title: "媒体查询响应式布局",
category: "css"
},
{
title: "FLEX 弹性盒模型",
category: "css"
},
{
title: "MYSQL多表查询随意操作",
category: "mysql"
}
];
const stringDotProxy = new Proxy(lessons, stringDot);
console.log(stringDotProxy[0]);
代理函数
如果代理以函数方式执行时,会执行代理中定义 apply 方法。
- 参数说明:函数,上下文对象,参数
在下例中:
调用代理时:proxy.apply(xz, [5]) xz对应obj,[5]对应args,不用输入func的实参,因为他代理的就是factorial这个函数
function factorial(num) {
console.log(num);
return num == 1 ? 1 : num * factorial(num - 1);
}
let proxy = new Proxy(factorial, {
apply(func, obj, args) {
console.log('func----', func);
console.log('obj----', obj);
console.log('args----', args);
console.time("run");
func.apply(obj, args);
console.timeEnd("run");
}
});
let xz = {
name: 'xz',
age: '22'
}
proxy.apply(xz, [5]);