深刻浅出ES6的标准内置对象Proxy

时间  2019-11-05
标签 深刻 es6 标准 内置 对象 proxy 栏目 JavaScript 繁體版
原文   原文链接

Proxy是ES6规范定义的标准内置对象，能够对目标对象的读取、函数调用等操做进行拦截。通常来讲，经过Proxy可让目标对象“可控”，好比是否能调用对象的某个方法，可否往对象添加属性等等。javascript

const originalObj = {
    name: 'xialei'
};
const publicObj = new Proxy(originalObj, {
    set(target, prop, value) {
        // 将属性值转化为大写
        target[prop] = value.toString().toUpperCase();
    }
});

publicObj.name = 'xialei';
console.log(publicObj.name); // XIALEI
从上例能够看出Proxy不须要更改目标对象(也就是originalObj)，就能够对originalObj的行为进行拦截。

语法

let obj = new Proxy(target, handler);
  • target Object 目标对象。能够是任何类型的对象，甚至包括原生对象（好比数组，函数，另外一个Proxy对象）
  • handler Object 代理行为对象。访问目标对象时会自动触发该handler的对应属性。

和大多数开发者同样，刚开始学习Proxy的时候，这个handler不知道是个什么东西，何时能触发。java

先看一个简单的例子，看看handler究竟是什么东西。假设咱们开发一个游戏脚本，因为内存修改器的盛行，咱们须要对内存中的数据进行安全处理，可是不能影响外部使用，咱们使用Proxy完成这个功能。数组

const gameObj = {
    hp: 0
  };
  
  const publicGameObj = new Proxy(gameObj, {
    get(target, prop) {
      return target[prop]/2;
    },
    set(target, prop, value) {
      target[prop] = value*2;
    }
  });

  publicGameObj.hp = 10000;
  console.log(publicGameObj.hp, gameObj); // 10000 {hp: 20000}

gameObj是咱们在内存中真实存储数据的地方，能够看到HP是20000，可是publicGameObj.hp是10000，外部使用publicGameObj.hp便可(好比UI层展现HP为10000);安全

例程handler使用到的属性

  • get publicGameObj.hp进行了读取操做，所以会自动触发handler的get方法
  • set publicGameObj.hp=10000进行了赋值操做，所以为自动触发handler的set方法

handler对象

handler对象是Proxy的核心基础，全部对目标对象的操做都须要经过handler来处理，虽然内容有点多，可是经常使用的很少。app

说明

  • 目标对象 被代理的对象。外部不能直接访问(固然语法上是能够访问的，你都用上Proxy了，还访问他干吗?)
  • 代理对象 new Proxy的返回值。外部直接访问。目标对象会做为handler对应函数的参数传入
  • 带*号的是经常使用属性
全部访问都是对代理对象访问才会触发，直接访问目标对象不会触发(代理对象压根没参与进来，若是触发那必定是出bug了)

handler.getPrototypeOf(target)

说明：获取目标对象的原型框架

触发时机：Object.getPrototypeOf(代理对象)函数

参数：学习

  • target Object 目标对象

返回值：this

  • Object 对象的原型
const array = [];
const myArray = new Proxy(array, {
  getPrototypeOf(target) {
        console.log('读取对象原型');
    return Object.getPrototypeOf(array);
  }
});
console.log(Object.getPrototypeOf(myArray));
// 输出
// 读取对象原型
// []

handler.setPrototypeOf(target, prototype)

说明：设置对象的原型spa

触发时机：Object.setPrototypeOf(代理对象, 原型)
参数：

  • target Object 目标对象
  • prototype Object 原型对象或null

返回值：

  • boolean 设置成功返回true，不然返回false(好比不让设置)
const array = [];
const myArray = new Proxy(array, {
    setPrototypeOf(target, prototype) {
        Object.setPrototypeOf(target, prototype);
        return true;
    }
});
Object.setPrototypeOf(myArray, Object.prototype);
console.log(Object.getPrototypeOf(myArray)); // {}

handler.isExtensible(target)

说明：检测对象是否可扩展(我的理解：也就是可否添加属性、函数)
触发时机：Object.isExtensible(代理对象)
参数：

  • target Object 目标对象

返回参数：

  • boolean

handler.preventExtensions(target)

说明：设置目标对象为不可扩展
触发时机：Object.preventExtensions(代理对象)
参数：

  • target Object 目标对象

返回值：

  • boolean 设置目标对象不可扩展后返回true，无论是否设置目标对象不可扩展，返回false都会报错
const obj = {};
const p = new Proxy(obj, {
    preventExtensions(target) {
        Object.preventExtensions(target);
        return true;
    }
});

Object.preventExtensions(p);

p.a = 1;
console.log(p); // {} 目标对象不可扩展，因此a属性设置不进去

*handler.getOwnPropertyDescriptor(target, prop)

说明：获取目标对象属性的描述符

触发时机：Object.getOwnPropertyDescriptor(代理对象)

参数：

  • target Object 目标对象
  • prop <string|Symbol|number> 属性名

返回参数：

  • Object 属性描述符
const obj = {
    a: 1
};
const p = new Proxy(obj, {
    getOwnPropertyDescriptor(target, prop) {
        return target[prop];
    }
});

console.log(Object.getOwnPropertyDescriptor(obj, 'a')); // { value: 1, writable: true, enumerable: true, configurable: true }

*handler.defineProperty(target,prop,properties)

说明：在对象上定义属性(添加新属性或修改现有属性)
触发时机：Object.defineProperty(代理对象，属性名，属性描述对象)
参数：

  • target Object 目标对象
  • prop string|number|Symbol 属性名
  • properties Object 属性描述对象

返回值：

  • boolean 定义成功返回true，定义失败或不容许定义返回false
const obj = {
    name: 'xialei',
    name2: 'xx'
};
const p = new Proxy(obj, {
    defineProperty(target, prop, properties) {
        if (prop === 'name') {
            Object.defineProperty(target, prop, properties);
            return true;
        }
        return false;
    }
});

Object.defineProperty(p, 'name', {
    value: 'aaa',
});

Object.defineProperty(p, 'name2', { // TypeError
    value: 'aaa',
});

*handler.has(target, prop)

说明：判断对象是否有指定属性
触发时机：prop in 代理对象
参数：

  • target Object 目标对象
  • prop string|number|Symbol 属性名

返回值：

  • boolean

*handler.get(target, prop, receiver)

说明: 属性读取器
触发时机：读取代理对象的属性时触发

参数：

  • target Object 目标对象
  • prop string|number|Symbol 属性名
  • receiver Proxy 代理对象或者原型链上的代理对象

返回值：

  • 任何值
const obj = {
    name: 'xialei'
};
const p = new Proxy(obj, {
    get(target, prop) {
        if(prop in target) {
            return target[prop].toUpperCase();
        }
        return undefined;
    }
});

console.log(p.name); // XIALEI

*handler.set(target, prop, value, receiver)

说明：属性写入访问器
触发时机：对代理对象的属性进行赋值时触发

参数：

  • target Object 目标对象
  • prop string|number|Symbol 属性名
  • value any 属性值
  • receiver Proxy 代理对象或原型链上的代理对象

返回值：

  • boolean 赋值成功返回true，不然返回false。严格模式下返回false会抛出TypeError

*handler.deleteProperty(target, prop)

说明：删除对象属性
触发时机：对代理对象的属性进行delete时触发

参数：

  • target Object 目标对象
  • prop string|number|Symbol 属性名

返回值：

  • boolean 删除成功返回true，不然返回false。严格模式下返回false会抛出TypeError

*handler.apply(target, thisArg, args)

说明：拦截函数调用，被代理对象必须是函数
触发时机：

  • 直接调用函数 obj.xxx()或xxx()
  • apply/call

参数：

  • target Object 目标函数
  • thisArg Object this对象
  • args Array 参数列表

返回值：

  • any 任何值
function sum(a, b) {
    return a + b;
}
const absSum = new Proxy(sum, {
    apply(target, thisArg, args) {
        const value = target.apply(thisArg, args);
        return value < 0 ? -value : value;
    }
});


console.log(absSum(-1, -2)); // 3，由于被拦截了

*handler.construct(target,args)

说明：拦截构造过程
触发时机：new 目标构造函数(...args)

参数：

  • target Function 构造函数
  • args Array 构造函数的参数

返回值：

  • Object 对象
function Person(name) {
    this.name = name;
}

const P = new Proxy(Person, {
    construct(target, args, newTarget) {
        console.log(newTarget, newTarget === P, newTarget === Person); // [Function: Person] true false
        return new target(args[0].toUpperCase());
    }
});

const p = new P('xialei');

console.log(p); // Person { name: 'XIALEI' }

使用场景

  • 保护目标对象(经过钩子方法进行拦截)
  • 数据转换(上文有一个内存保护的例子)

  • 数据验证(不符合规则的值不容许设置)

    const privateUser = {
    name: 'xialei',
    phone: '13888888888'
};

const user = new Proxy(privateUser, {
    set(target, prop, value) {
        if (prop === 'phone' && !/^(\+86)?1[\d]{10}$/.test(value)) {
            return false;
        }
        target[prop] = value;
        return true;
    }
});

user.phone = '13666666666';
console.log(user.phone); // 13666666666
user.phone = '+8613777777777';
console.log(user.phone); // +8613777777777
user.phone = '1';
console.log(user.phone); // +8613777777777

  • 数据修正(也作数据标准化)

    const privateUser = {
    name: 'xialei',
    phone: '13888888888'
};

const user = new Proxy(privateUser, {
    set(target, prop, value) {
        if (prop === 'phone' && !/^(\+86)?1[\d]{10}$/.test(value)) {
            return false;
        }
        target[prop] = value.replace('+86','');
        return true;
    }
});

user.phone = '+8613666666666';
console.log(user.phone); // 13666666666

  • 添加实用方法

    const list = [
    { name: 'xialei', phone: '13888888888' },
    { name: 'xialei1', phone: '13899999999' },
];

const mList = new Proxy(list, {
    get(target, prop) {
        if (prop in target) {
            return target[prop];
        }

        for (const item of target) {
            if (item.name === prop) {
                return item;
            }
        }
        return undefined;
    }
});

const firstItem = mList[0];
const itemXialei = mList["xialei"];

console.log(firstItem); // { name: 'xialei', phone: '13888888888' }
console.log(itemXialei);// { name: 'xialei', phone: '13888888888' }

  • 提供易用API

    // 本例对localStorage作了封装，能够像普通对象同样操做localStorage,而不须要调用方法
const storage = new Proxy(localStorage, {
    get(target, prop) {
        return localStorage.getItem(prop);
    },
    set(target, prop, value) {
        localStorage.setItem(prop, value);
        return true;
    },
    deleteProperty(target, prop) {
        localStorage.removeItem(prop);
    },
    has(target, prop) {
        return localStorage.getItem(prop) !== null;
    }
});

storage.aaa = '1';
console.log(storage.aaa); // '1'
delete storage.aaa;
console.log(storage.aaa); // undefined

总结

Proxy的语法虽然简单，可是可谓前途无量，好比开了一个Virtual Dom框架也是能够的。

0.jpeg
更多原创文章，尽在天天进步一点点

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程