📜  JavaScript handler ownKeys()方法(1)

📅  最后修改于: 2023-12-03 15:01:37.685000             🧑  作者: Mango

JavaScript handler ownKeys()方法

ownKeys()方法是一个在JavaScript Proxy对象中可用的方法,用来拦截对目标对象的Object.getOwnPropertyNames()Object.getOwnPropertySymbols()Object.keys()操作。

语法:

let p = new Proxy(target, {
  ownKeys: function(target) {
    // 拦截处理逻辑
  }
});

ownKeys()方法可以返回一个包含所有目标对象属性键的数组或者一个描述对象中所有自身属性类型,例如符号属性、不可枚举属性等的数组。

let target = {foo: 1, bar: 2};
let p = new Proxy(target, {
  ownKeys: function(target) {
    return ['baz'];
  }
});
console.log(Object.getOwnPropertyNames(p)); // ["baz"]
ownKeys()方法用途:
  1. 实现私有属性 可以使用ownKeys()方法来隐藏对象的一些属性,使其不可枚举。

    let obj = {
      [Symbol('key')]: 'secret',
      hidden: true
    };
    let p = new Proxy(obj, {
      ownKeys: function(target) {
        return Reflect.ownKeys(target).filter(key => !key.startsWith('_'));
      }
    });
    console.log(Object.keys(p)); // []
    console.log(Object.getOwnPropertyNames(p)); // ["hidden"]
    console.log(Object.getOwnPropertySymbols(p)); // [Symbol(key)]
    

    可以看到,在ownKeys()方法中,我们使用了Reflect.ownKeys()方法获取了目标对象的所有属性键,然后使用filter()方法过滤掉了以_开头的属性键,从而实现了隐藏属性的效果。

  2. 对象扩展和约束 ownKeys()方法还可以用来限制目标对象上可以定义的属性。

    let obj = {};
    let p = new Proxy(obj, {
      ownKeys: function(target) {
        return ['a', 'b', Symbol('c')];
      }
    });
    
    p.a = 1;
    p.b = 2;
    p.c = 3;
    console.log(p.a, p.b, p.c); // 1 2 undefined
    

    可以看到,由于在ownKeys()方法中限制了属性键只能是ab或Symbol类型的c,当我们试图为p对象上添加c属性时,属性值并没有被添加成功。

    当然,如果我们将ownKeys()方法的实现修改为:

    let obj = {};
    let p = new Proxy(obj, {
      ownKeys: function(target) {
        return ['a', 'b', Symbol('c'), 'c'];
      }
    });
    
    p.a = 1;
    p.b = 2;
    p.c = 3;
    console.log(p.a, p.b, p.c); // 1 2 3
    

    现在,p对象上已经成功添加了一个名为c的属性,并且它的值为3

总结: ownKeys()方法是在JavaScript Proxy对象中可用的方法,用来拦截对目标对象的Object.getOwnPropertyNames()Object.getOwnPropertySymbols()Object.keys()操作。它可以用于实现私有属性和约束对象扩展的功能等,具有很强的灵活性和可定制性。