javaScript---对象、对象属性、对象代理

对象基础知识

后盾人-对象

抽象特性

将复杂功能隐藏在内部，只开放给外部少量方法，更改对象内部的复杂逻辑不会对外部调用造成影响即抽象。

详细解释：后盾人----抽象特性

属性特征

详细解释：属性特征
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]);