zoukankan      html  css  js  c++  java
  • js es6 Proxy

    传统的get,set

    ES6 中引入Proxies,让你可以自定义Object的基本操作。例如,get就是Object的基础操作方法。

    const obj = {
    val: 10
    };

    console.log(obj.val);

    这里,console.log()表达式在对象obj上执行get方法来获取val的值。

    另一个对象的基本操作方法是 set。

    const obj = {
    val: 10
    };

    obj.val2 = 20;

    这里,set方法用来给对象obj设置一个新的值。

    proxy

    const handler={
    	get:function(obj,prop){
    		console.log('get');
    		return obj[prop];
    	}
    }
    const initialobj={
    	id:1,
    	name:'Foo Bar'
    }
    const proxiedObject=new Proxy(initialobj,handler);
    console.log(proxiedObject.id);
    

    这个时候我们得到的结果为1,那么这样有什么用呢?可以想象一下假如我们暴露出整个initialobj对象,那么其中的属性会全部暴露出去。
    proxy这个意思是代理的意思,那么这个时候我们可以这样处理。
    比如我想封装这个initialobj对象,那么我改如何?
    或者说我想让id为private,ok,这就是一个困难了。
    当然我们有方法的,比如说,拆分,但是这不是ok的。

    
    const handler={
    	get:function(obj,prop){
    		if(prop=='id')
    		{
    			return 6;
    		}
    		console.log('get');
    		return obj[prop];
    	}
    }
    const initialobj={
    	id:1,
    	name:'Foo Bar'
    }
    const proxiedObject=new Proxy(initialobj,handler);
    console.log(proxiedObject.id);
    

    这个时候就是返回6了,相当于代理,门卫,引领三个关键词。

    <script>
      const handler = {
    	get: function(obj, prop) {
    	  if (prop == "id") {
    		return 6;
    	  }
    	  console.log("get");
    	  return obj[prop];
    	},
    	set: function(obj, prop, value) {
    	  if (typeof value !== "string") {
    		throw new Error("Only string values can be stored in this object!");
    	  } else {
    		obj[prop] = value;
    	  }
    	}
      };
      const initialobj = {
    	id: 1,
    	name: "Foo Bar"
      };
      const proxiedObject = new Proxy(initialobj, handler);
      console.log(proxiedObject.id);
      proxiedObject.name = 8;
    </script>
    

    set 同样是 代理 门卫 引领 三个关键词来表达。

  • 相关阅读:
    for循环删除数组中的元素crash问题
    iOS判断字符串中含不含有汉字
    iOS 拨打电话(解决openURL延迟和不同方法比较)
    ios oc单例宏定义
    iOS UIBezierPath简单实用
    iOS视图切割圆角
    iOS 内购集成与遇到的坑,添加新内购项目
    iOS工程中创建pch文件
    四舍五入的方法
    ScrollView定时器复用
  • 原文地址:https://www.cnblogs.com/aoximin/p/13201055.html
Copyright © 2011-2022 走看看