es6:proxy

news/2024/7/10 23:58:15 标签: javascript, es6

es6proxy_0">es6:proxy

  1. Proxy 是 ES6 中新增的功能,它可以用来自定义对象中的操作。
  2. target 代表需要添加代理的对象,handler 用来自定义对象中的操作,比如可以用来自定义 set 或者 get 函数。
  3. 使用演示:
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>proxy</title>
</head>
<body>
   <script>
       const person  = { name:'zhang',age:22};
       const personProxy = new Proxy(person,{
           get(target,key){
               console.log(target,key);
               return target[key].toUpperCase();
           },
           set(target,key,value){
               if(typeof value === 'string'){
                   target[key] = value.trim();
               }
           }
       });//target:要代理的目标对象;handler:对象,包含了我们重写的一些操作

       personProxy.name = 'codecasts'
   </script>
</body>
</html>
  1. 实例代码
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>实例</title>
</head>
<body>
  <script>
      const phonerHandler = {
       set(target,key,value){
           target[key] = value.match(/[0-9]/g).join('');
       },
       get(target,key){
           return target[key].replace(/(\d{3})(\d{4})(\d{4})/,'$1-$2-$3');
       }
      }

      const phoneNumber = new Proxy({},phonerHandler);

       // phoneNumber.home = '181 9803 1039'
       // "181 9803 1039"
       // phoneNumber.work = '191 9252 1039'
       // "191 9252 1039"
       // phoneNumber
       // Proxy {home: "18198031039", work: "19192521039"}
       // phoneNumber.work
       // "191-9252-1039"
       // phoneNumber.home
       // "181-9803-1039"
   </script>

</body>
</html>

http://www.niftyadmin.cn/n/482883.html

相关文章

weex-安装weex-toolkit一直失败的问题

看过其他博主写的安装weex-toolkit失败的描述&#xff0c;多数是两个方面问题造成的&#xff1a; 其一&#xff1a;node和npm版本太低&#xff0c;需要升级版本&#xff0c;这里博主也并不建议升级node到最新版本&#xff0c;npm自不必多说&#xff0c;随node一起安装的&#…

es6:for,foreach,for...in循环区别

es6:for,foreach,for…in循环区别 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv"X-U…

HTML5实现头像的上传

HTML5实现头像的上传 这是利用form-data给后台传输数据&#xff0c;来实现头像的上传加载&#xff01; html代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content&quo…

weex-ui之wxc-tab-page 顶部标签页踩坑记

对于初学weex的人来说&#xff0c;有这个么一个东西可以节省很多开发成本&#xff0c;但由于weex本身的开源特性&#xff0c;有些东西并不完善&#xff0c;博主最近在使用wxc-tab-page 顶部标签页的时候发现几个问题&#xff1a; 1.标签页无法通过手势滑动切换&#xff1b; 2…

利用Vue,fetch实现前后端数据交互

利用Vue,fetch实现前后端数据交互 利用fetch实现数据的交互&#xff0c;简单练习的小实例。 目录结构index.html代码 <!DOCTYPE html> <html> <head><meta charset"utf-8"><meta name"viewport" content"initial-scale…

nodeJS+express+mysql模块封装之服务器渲染小demo

nodeJSexpressmysql模块封装之服务器渲染小demo 创建一个小项目 npm init下载相关中间件&#xff08;根据package.js来下载&#xff09;package.js 目录结构 index.js代码 const express require(express); const path require(path); const template require(art-templat…

HTML5使用Geoloacation API检测浏览器的支持性

HTML5使用Geoloacation API检测浏览器的支持性 在调用HTML5 Deolocation API函数前&#xff0c;需要确保浏览器支持此功能。当浏览器不支持时&#xff0c;可以提供一些替代文本&#xff0c;以提示用户升级浏览器或安装插件&#xff08;如 Gears&#xff09;来增强现有浏览器功…

weex-使用Vue.set设置属性和使用this.xxx设置属性的区别

在使用weex过程中&#xff0c;免不了要自定义组件&#xff0c;或者说封装子控件&#xff0c;这时候需要把父组件的一些值传递到子控件中并作出相应的操作&#xff0c;这时候就要使用props来进行传值&#xff0c;但是在赋值的时候&#xff0c;具体通过Vue.set来修改属性还是通过…