【ES6】：Proxy、Reflect、getter/setter
【ES6】：Proxy、Reflect、getter/setter
目录
1. Vue3.0 ?
2. 元编程（Meta programming）?
3. Proxy
3.1. 是什么？
3.2. 兼容性
3.3. 语法
3.4. 示例
4. Reflect
4.1. 是什么？
4.2. 兼容性
5. Vue2.0 ?
6. ES5 getter/setter
6.1. getter
6.2. setter
1. Vue3.0 ?
ES6 的 Proxy 与 Reflect 是
Vue3.0 响应性原理的技术基础
所以有必要深入挖掘一下
2. 元编程（Meta programming） ?
能“介入”的对象底层操作进行的过程中，并加以影响。元编程中的“元”的概念可以理解为“程序”本身。”元编程能让你拥有可以扩展程序自身能力“
Starting with ECMAScript 2015, JavaScript gains support for the Proxy and Reflect objects allowing you to intercept and define custom behavior for fundamental language operations (e.g. property lookup etc). With the help of these two objects you are able to program at the meta level of JavaScript.
3. Proxy
3.1. 是什么？
Proxy意思为“代理”，即在访问对象之前建立一道“拦截(intercept)”，任何访问该对象的操作之前都会通过这道“拦截”，即执行Proxy里面定义的方法。
The Proxy object enables you to create a proxy for another object, which can intercept and redefine fundamental operations for that object.
3.2. 兼容性
3.3. 语法
3.4. 示例
示例1：基础示例
const handler = {
get: function(obj, prop) {
return prop in obj ? obj[prop] : 37;
}
};
const p = new Proxy({}, handler);
p.a = 1;
p.b = undefined;
console.log(p.a, p.b); // 1, undefined
console.log('c' in p, p.c); // false, 37
示例2：验证
let validator = {
set: function(obj, prop, value) {
if (prop === 'age') {
if (!Number.isInteger(value)) {
throw new TypeError('The age is not an integer');
}
if (value > 200) {
throw new RangeError('The age seems invalid');
}
}
// The default behavior to store the value
obj[prop] = value;
// 表示成功
return true;
}
};
let person = new Proxy({}, validator);
person.age = 100;
console.log(person.age);
// 100
person.age = 'young';
// 抛出异常: Uncaught TypeError: The age is not an integer
4. Reflect
4.1. 是什么？
Reflect与ES5的Object有点类似，包含了对象语言内部的方法，Reflect也有13种方法，与proxy中的方法一一对应。Proxy相当于去修改设置对象的属性行为，而Reflect则是获取对象的这些行为。
Reflect is a built_in object that provides methods for interceptable JavaScript operations. The methods are the same as those of proxy handlers. Reflect is not a function object, so it's not constructible.
4.2. 兼容性
5. Vue2.0 ?
Vue2.0 响应性原理的技术基础
是ES5的 getter/setter
有必要了解一下它的限制在哪里
6. ES5 getter/setter
在 ES5 中，对象有两个特殊的技能：getter 和 setter。这两个东西可以分别给对象的某个属性进行监听，在获取、设置该属性值的时候执行某些事件。就像DOM中的事件监听一样，能够在你单击、双击...各种操作的时候执行该方法。
6.1. getter
The get syntax binds an object property to a function that will be called when that property is looked up.
示例1：在新对象初始化时定义一个getter
const obj = {
log: ['example','test'],
get latest() {
if (this.log.length == 0) return undefined;
return this.log[this.log.length - 1];
}
}
console.log(obj.latest); // "test".
示例2：使用defineProperty在现有对象上定义 getter
var o = { a:0 }
Object.defineProperty(o, "b", {
get: function () {
return this.a + 1;
}
});
// Runs the getter, which yields a + 1 (which is 1)
console.log(o.b)
6.2. setter
The set syntax binds an object property to a function to be called when there is an attempt to set that property.
示例1：在新对象初始化时定义一个setter
const language = {
set current(name) {
this.log.push(name);
},
log: []
}
language.current = 'EN';
console.log(language.log); // ['EN']
language.current = 'FA';
console.log(language.log); // ['EN', 'FA']
示例2：使用defineProperty在现有对象上定义 setter
const o = {a: 0};
Object.defineProperty(o, 'b', {
set: function(x) { this.a = x / 2; }
});
o.b = 10;
// Runs the setter, which assigns 10 / 2 (5) to the 'a' property
console.log(o.a)
参考：
Meta programming： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Meta_programming MDN——Proxy： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy Proxies are Awesome!（PPT） https://www.slideshare.net/BrendanEich/metaprog-5303821 MDN——Reflect： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect MDN——Defining getters and setters https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#defining_getters_and_setters Vue2：深入响应式原理 https://cn.vuejs.org/v2/guide/reactivity.html Vue3：深入响应式原理 https://v3.cn.vuejs.org/guide/reactivity.html