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 同樣是 代理 門衛 引領 三個關鍵詞來表達。