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

最新推荐文章于 2023-10-30 15:43:41 发布
最新推荐文章于 2023-10-30 15:43:41 发布
阅读量161 收藏
点赞数
文章标签： javasccript es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oShiQiHao/article/details/102900479
版权

Proxy是ES6规范定义的标准内置对象，可以对目标对象的读取、函数调用等操作进行拦截。一般来说，通过Proxy可以让目标对象“可控”，比如是否能调用对象的某个方法，能否往对象添加属性等等。

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 目标对象。可以是任何类型的对象，甚至包括原生对象（比如数组，函数，另一个Proxy对象）
    • handler 代理行为对象。访问目标对象时会自动触发该handler的对应属性。
      • * 常用属性

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

        先看一个简单的例子，看看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来处理，虽然内容有点多，但是常用的不多。

        说明

        • 目标对象 被代理的对象。外部不能直接访问(当然语法上是可以访问的，你都用上Proxy了，还访问他干嘛?)
        • 代理对象 new Proxy的返回值。外部直接访问。目标对象会作为handler对应函数的参数传入

        所有访问都是对代理对象访问才会触发，直接访问目标对象不会触发(代理对象压根没参与进来，如果触发那一定是出bug了)

        handler.getPrototypeOf(target)

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

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

        参数：

        target 目标对象

        返回值：

        对象的原型

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

        handler.setPrototypeOf(target, prototype)

        说明：设置对象的原型

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

        参数：

        target 目标对象

        prototype 原型对象或null

        返回：

        设置成功返回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 目标对象

        返回参数：

        handler.preventExtensions(target)

        说明：设置目标对象为不可扩展

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

        参数：

        target Object 目标对象

        返回值：

        设置目标对象不可扩展后返回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 目标对象

        prop 属性名

        返回参数：

        属性描述符

        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 目标对象

        prop 属性名

        properties 属性描述对象

        返回值：

        定义成功返回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 目标对象

        prop 属性名

        返回值：

        *handler.get(target, prop, receiver)

        说明: 属性读取器

        触发时机：读取代理对象的属性时触发

        参数：

        target 目标对象

        prop 属性名

        receiver 代理对象或者原型链上的代理对象

        返回值：

        任何值

        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 目标对象

        prop 属性名

        value 属性值

        receiver 代理对象或原型链上的代理对象

        返回值：

        赋值成功返回true，否则返回false。严格模式下返回false会抛出TypeError

        *handler.deleteProperty(target, prop)

        说明：删除对象属性

        触发时机：对代理对象的属性进行delete时触发

        参数：

        target 目标对象

        prop 属性名

        返回值：

        删除成功返回true，否则返回false。严格模式下返回false会抛出TypeError

        *handler.apply(target, thisArg, args)

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

        触发时机：

        直接调用函数 obj.xxx()或xxx()

        apply/call

        参数：

        target 目标函数

        thisArg this对象

        args 参数列表

        返回值：

        任何值

        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 构造函数

        args 构造函数的参数

        返回值：

        对象

        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

        更多原创文章，尽在每天进步一点点

xialeistudio
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript标准库(js的标准内置对象)总结
01-19
值属性 这部分属性只是简单的值，它们没有自己的属性和方法。 Infinity 全局属性 Infinity 是一个数值，表示无穷大。 NaN 全局属性 NaN 的值表示不是一个数字（Not-A-Number）。 undefined 全局属性undefined表示原始值undefined。它是一个JavaScript的 原始数据类型 。 null 值 null 特指对象的值未设置。它是 JavaScript 基本类型 之一。 函数属性 全局函数可以直接调用，不需要在调用时指定所属对象，执行结束后会将结果直接返回给调用者。 eval(str) eval() 函数会将传入的字符串当做 JavaScri
深入浅出ES6
01-06
ECMAScript 是基于对象的：基本语言和宿主设施都由对象提供，ECMAScript 程序是一组可通信的对象。ECMAScript 对象 (objects) 是 属性 (properties) 的集合，每个属性有零个或多个 特性 (attributes)，它确定怎样...
ES6内置对象
清风的博客
10-02 511
ES6 的内置对象 1.Array的扩展方法 1.1扩展运算符 扩展运算符可以将数组或者对象转为用逗号分割的参数序列 let arr = [1,2,3]; ...arr //1,2,3 console.log(...arr); /相当于console.log(1,2,3) 扩展运算符应用于合并数组 //方法1 let arr1 = [1,2,3]; let arr2 = [4,5,6];...
ES6新特征总结与介绍——内置对象
weixin_34217773的博客
06-05 562
一、新增 （一）Symbol ES6 引入了一种新的原始数据类型 Symbol ，表示独一无二的值，最大的用法是用来定义对象的唯一属性名。 a = Symbol('sss') b = Symbol('sss') a === b //false 复制代码1. 作为属性名 由于每一个 Symbol 的值都是不相等的，所以 Symbol 作为对象的属性名，可以保证属性不重名。 Symbol 作...
JavaScript 标准内置对象
唯爱赞多的博客
01-19 210
具体 JavaScript 标准内置对象 本章介绍和说明了 JavaScript 中所有的标准内置对象、以及它们的方法和属性。 这里的术语"全局对象"（或标准内置对象）不应与global对象混淆。这里的"全局对象"指的是处在全局作用域里的多个对象。 global对象可以在全局作用域里通过使用this访问到（但只有在 ECMAScript 5 的非严格模式下才可以，在严格模式下得到的是 undefined）。其实全局作用域包含全局对象中的属性，包括它可能继承来的属性。 全局作用域中的其他对象则可由用户的脚本创
ES6--内置对象的扩展
jiaojsun的博客
10-04 356
1. 数组的扩展1) Array.from() //把类数组对象转换成真正的数组 在页面中写一些livar lis = document.querySelectorAll('li'); console.log(Array.isArray(lis));//false说明不是数组 var lis2 = Array.from(lis); console.log(lis2); console.log(Ar
JavaScript 标准内置对象 （没事就看）
weixin_44955769的博客
01-15 130
源于开发者，服务开发者。 最今发现一个新网站，在里面学习到了很多知识. 分享给大家，快去变强吧… 去变强…
js002---- 标准内置对象
weixin_30735745的博客
12-07 182
1. js全局的对象（全局作用域里的对象，而不是全局对象）， 或者叫标准内置对象 2， 全局对象 是一个Global类的对象。 标准内置对象的分类： 1。 值属性 　　infinity NaN undefined null字面量。 2.函数属性， 全局函数 parseInt, isNaN,等。 3，基本对象。 Obj...
ES6内置对象Proxy代理数据demo
qq_43447509的博客
03-12 157
首先在页面上定义几个按钮并绑定点击事件 <button onclick="asc()">升序</button> <button onclick="desc()">降序</button> <button onclick="reset()">重置</button> 需要网络请求数据这里引入jquery <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquer
ES6的Proxy对象
weixin_30655569的博客
09-20 153
Proxy在目标对象之前架设一层拦截，外部所有的访问都必须先通过这层拦截，因此提供了一种机制，可以对外部的访问进行过滤和修改。 ES6原生提供了Proxy构造函数，用来生成Proxy实例。下面代码中proxy代理target。 var proxy = new Proxy(target, handler); Proxy对象的所有用法，都是上面的这种形式。不同的只是handle...
javascript 回顾一下 基础标准内置对象 Object（二）
cyadyx的博客
09-15 155
文章目录一、Object二、Object 构造函数的属性1、Object.length2、Object.prototype3、Object.assign()4、Object.create()5、Object.defineProperties()6、Object.entries() 一、Object 构造函数创建一个对象包装器。在JavaScript中，几乎所有的对象都是Object类型的实例，它们都会从Object.prototype继承属性和方法。Object 构造函数为给定值创建一个对象包装器。Ob
第4章 标准库对象(内置对象)
m0_53762175的博客
08-19 144
第4章 标准库对象(内置对象) JavaScript 提供了很多个内置对象：Math/Array/Number/String/Boolean... 对象只是带有属性和方法的特殊数据类型。 我们在学习时其实就是要记住对象的每个属性和方法怎么使用，代表什么含义； 技术问题，遇到分歧，去哪里查找资料： 火狐开发者社区--MDN 微软开发者社区--MSDN 1.1 Math对象 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Refer
[每日一题]面试官问：谈谈你对ES6的proxy的理解？
玄魂工作室
12-30 413
关注「松宝写代码」，精选好文，每日一题作者：saucxs ｜ songEagle一、前言2020.12.23 日刚立的 flag，每日一题，题目类型不限制，可以是：算法题，面试题，阐述题...
es6代理proxy对象介绍
weixin_45532305的博客
03-02 482
什么是代理？ 代理类，用来进行事物不想或不能进行的其他操作，比如当你对数据库进行操作时，代理可以在你对数据库操作完后，记录下你所进行的操作。 Proxy对象可以让你为另一个对象创建一个代理，它可以拦截和重新定义该对象的基本操作。 基本上，它的意思是说，我们要把一个对象，用Proxy包裹起来，这将允许我们创建一个 "隐藏 "的门，并控制所有对所需对象的访问。 一个Proxy的创建有两个参数。 target: 你想包裹的原始对象(proxy) handler：定义哪些操作将被拦截，以及如何重新定义被拦截的操
ES6新特性之Proxy对象
最新发布
m0_69977307的博客
10-30 503
在ES2015的标准中新增了一个Proxy，用于修改某些操作的默认行为，等同于在语言层面作出的修改，所以说这是属于一种元编程 ，（meta programming），即对编程语言进行编程。Proxy对象用于创建一个对象的“代理”，从而实现基本能操作的拦截和自定义(如属性查找、赋值、枚举、函数调用等)。Proxy的语法结构如下所示：target：要使用Proxy 代理的目标对象(可以是任何类型的对象，包括原生数组，函数，甚至另一个代理)。
对象构造器
qq_37149421的博客
12-10 255
1.javascript对象 js是基于对象编程，js环境中所有元素的都是对象，js对象包括内置对象、宿主对象、自定义对象。 （1）内置对象：String、Number、Boolean、Function、Array等； （2）宿主对象：Window、Document、Location、History等； （3）自定义对象：通过自定义构造函数过程创建对象。 2. 创建对象的方式 (1)J
ES6中的代理proxy
SignalFire的博客
06-30 3806
p()为自定义函数，后文中的p()都是调用这个函数目录拦截器一、数组代理二、对象代理三、函数代理四、class代理五、ES5中的代理拦截遍历如： for in 循环 Object.getOwnPropertyNames(obj); Object.getOwnPropertySymbols(obj); Object.keys(obj);1、拦截获取值的操作2、拦截设置操作，给数组赋值或者添加元素时触发如：arr.push(xxx)
代理（proxy）
weixin_44880140的博客
03-20 593
1.代理的原理 var p=new Proxy(target,handler); target 目标对象 handler 一个对象,其属性是执行操作的行为函数 const a = { name: "liu" }; ⇽--- emperor是目标对象 const b = new Proxy(a, { ⇽--- 通过Proxy构造器创建代理，传入对象emperor，以及包含get与set方的对象，...
18_Promise使用详解(1)1
08-04
在ES6推出后，Promise成为了一个热门的话题，许多文章和经典的书籍都在讲解Promise。尽管学会Promise后可能觉得它很简单，但在初次接触时，可能会觉得难以理解。为了更好地介绍Promise，我们可以从一个实际的例子来...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值