通过代理进行对象访问控制

235 阅读4分钟

对象属性的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)打印执行时间。