ECMAScript 6：五、Reflect
1 前言
ES6学习笔记5：Reflect。
学习地址：
https://es6.ruanyifeng.com/#docs/reflect
2 笔记
（1）概述
Reflect对象与Proxy对象一样，也是 ES6 为了操作对象而提供的新 API。Reflect对象的设计目的有这样几个。Reflect理解为Javascript的反射操作API，Java等语言均有反射API供获取字段Field、Method、Constructor并调用等等。
（1） 将Object对象的一些明显属于语言内部的方法（比如Object.defineProperty），放到Reflect对象上。现阶段，某些方法同时在Object和Reflect对象上部署，未来的新方法将只部署在Reflect对象上。也就是说，从Reflect对象上可以拿到语言内部的方法。
（2） 修改某些Object方法的返回结果，让其变得更合理。比如，Object.defineProperty(obj, name, desc)在无法定义属性时，会抛出一个错误，而Reflect.defineProperty(obj, name, desc)则会返回false。
// 老写法
try {
Object.defineProperty(target, property, attributes);
// success
} catch (e) {
// failure
}
// 新写法
if (Reflect.defineProperty(target, property, attributes)) {
// success
} else {
// failure
}
（3） 让Object操作都变成函数行为。某些Object操作是命令式，比如name in obj和delete obj[name]，而Reflect.has(obj, name)和Reflect.deleteProperty(obj, name)让它们变成了函数行为。
// 老写法
'assign' in Object // true
// 新写法
Reflect.has(Object, 'assign') // true
（4）Reflect对象的方法与Proxy对象的方法一一对应，只要是Proxy对象的方法，就能在Reflect对象上找到对应的方法。这就让Proxy对象可以方便地调用对应的Reflect方法，完成默认行为，作为修改行为的基础。也就是说，不管Proxy怎么修改默认行为，你总可以在Reflect上获取默认行为。
Proxy(target, {
set: function(target, name, value, receiver) {
var success = Reflect.set(target, name,
value, receiver);
if (success) {
console.log('property '
+ name + ' on ' + target + ' set to ' + value);
}
return success;
}
});
上面代码中，Proxy方法拦截target对象的属性赋值行为。它采用Reflect.set方法将值赋值给对象的属性，确保完成原有的行为，然后再部署额外的功能。
下面是另一个例子。
var loggedObj = new Proxy(obj, {
get(target, name) {
console.log('get', target, name);
return Reflect.get(target, name);
},
deleteProperty(target, name) {
console.log('delete' + name);
return Reflect.deleteProperty(target, name);
},
has(target, name) {
console.log('has' + name);
return Reflect.has(target, name);
}
});
上面代码中，每一个Proxy对象的拦截操作（get、delete、has），内部都调用对应的Reflect方法，保证原生行为能够正常执行。添加的工作，就是将每一个操作输出一行日志。
有了Reflect对象以后，很多操作会更易读。
const {log:l} = console;
// 老写法
l(Function.prototype.apply.call(Math.floor, undefined, [1.75])) // 1
// 新写法
l(Reflect.apply(Math.floor, undefined, [1.75])) // 1
（2）静态方法
Reflect对象一共有 13 个静态方法。
Reflect.apply(target, thisArg, args)
Reflect.construct(target, args)
Reflect.get(target, name, receiver)
Reflect.set(target, name, value, receiver)
Reflect.defineProperty(target, name, desc)
Reflect.deleteProperty(target, name)
Reflect.has(target, name)
Reflect.ownKeys(target)
Reflect.isExtensible(target)
Reflect.preventExtensions(target)
Reflect.getOwnPropertyDescriptor(target, name)
Reflect.getPrototypeOf(target)
Reflect.setPrototypeOf(target, prototype)
上面这些方法的作用，大部分与Object对象的同名方法的作用都是相同的，而且它与Proxy对象的方法是一一对应的。下面是对它们的解释。
Reflect.get(target, name, receiver)
Reflect.get方法查找并返回target对象的name属性，如果没有该属性，则返回undefined。
var myObject = {
num: 1,
age: 2,
get sumPrint() {
return this.num + this.age;
},
}
l(Reflect.get(myObject, 'num')) // 1
l(Reflect.get(myObject, 'age')) // 2
l(Reflect.get(myObject, 'sumPrint')) // 3
l(Reflect.get(myObject, 'print')) // undefined
如果name属性部署了读取函数（getter），则读取函数的this绑定receiver。
var myObject = {
num: 1,
age: 2,
get sumPrint() {
return this.num + this.age;
},
}
var myReceiverObject = {
num: 4,
age: 5,
};
l(Reflect.get(myObject, 'sumPrint', myReceiverObject)) // 9
如果第一个参数不是对象，Reflect.get方法会报错。
Reflect.get(1, 'names') // 报错
// TypeError: Reflect.get called on non-object
Reflect.get(false, 'names') // 报错
// TypeError: Reflect.get called on non-object
Reflect.set(target, name, value, receiver)
Reflect.set方法设置target对象的name属性等于value。
var myObject = {
nums: 1,
set fetch(value) {
return this.nums = value;
},
}
l(myObject.nums) // 1
Reflect.set(myObject, 'nums', 2);
l(myObject.nums) // 2
Reflect.set(myObject, 'fetch', 3)
l(myObject.nums) // 3
如果name属性设置了赋值函数，则赋值函数的this绑定receiver。
var myObject = {
nums: 4,
set fetch(value) {
return this.nums = value;
},
}
var myReceiverObject = {
nums: 0,
};
Reflect.set(myObject, 'fetch', 1, myReceiverObject);
l(myObject.nums) // 4
l(myReceiverObject.nums) // 1
注意，如果 Proxy对象和 Reflect对象联合使用，前者拦截赋值操作，后者完成赋值的默认行为，而且传入了receiver，那么Reflect.set会触发Proxy.defineProperty拦截。
let p = {
a: 'a'
};
let handler = {
set(target, key, value, receiver) {
console.log('set', value);
Reflect.set(target, key, value, receiver)
},
defineProperty(target, key, attribute) {
console.log('defineProperty'), attribute;
Reflect.defineProperty(target, key, attribute);
}
};
let obj = new Proxy(p, handler);
obj.a = 'A';
// set A
// defineProperty
上面代码中，Proxy.set拦截里面使用了Reflect.set，而且传入了receiver，导致触发Proxy.defineProperty拦截。这是因为Proxy.set的receiver参数总是指向当前的 Proxy实例（即上例的obj），而Reflect.set一旦传入receiver，就会将属性赋值到receiver上面（即obj），导致触发defineProperty拦截。如果Reflect.set没有传入receiver，那么就不会触发defineProperty拦截。
let p = {
a: 'a'
};
let handler = {
set(target, key, value, receiver) {
console.log('set', value);
// Reflect.set(target, key, value, receiver) 唯一区别
Reflect.set(target, key, value)
},
defineProperty(target, key, attribute) {
console.log('defineProperty'), attribute;
Reflect.defineProperty(target, key, attribute);
}
};
let obj = new Proxy(p, handler);
obj.a = 'A';
// set A
如果第一个参数不是对象，Reflect.set会报错。
Reflect.set(1, 'foo', {}) // 报错
// TypeError: Reflect.set called on non-object
Reflect.set(false, 'foo', {}) // 报错
// TypeError: Reflect.set called on non-object
Reflect.has(obj, name)
Reflect.has方法对应name in obj里面的in运算符。
var myObject = {
names: 1,
// Private identifiers are not allowed outside class bodies
// SyntaxError: Unexpected identifier
// #age: 2
};
// 旧写法
l('names' in myObject) // true
// 新写法
l(Reflect.has(myObject, 'names')) // true
如果Reflect.has()方法的第一个参数不是对象，会报错。
Reflect.deleteProperty(obj, name)
Reflect.deleteProperty方法等同于delete obj[name]，用于删除对象的属性。
const myObj = { names: '小徐' };
l(myObj) //{ names: '小徐' }
// 旧写法
delete myObj.names;
l(myObj) //{}
let myObj2 = { names: 'xiaoli' };
l(myObj2) //{ names: 'xiaoli' }
// 新写法
l(Reflect.deleteProperty(myObj2, 'names')) //true
l(myObj2) //{}
该方法返回一个布尔值。如果删除成功，或者被删除的属性不存在，返回true；删除失败，被删除的属性依然存在，返回false。
如果Reflect.deleteProperty()方法的第一个参数不是对象，会报错。
Reflect.construct(target, args)
Reflect.construct方法等同于new target(…args)，这提供了一种不使用new，来调用构造函数的方法。
function Greeting(name) {
this.name = name;
}
// new 的写法
const instance = new Greeting('小徐');
l(instance) //Greeting { name: '小徐' }
// Reflect.construct 的写法
const instance2 = Reflect.construct(Greeting, ['小徐']);
l(instance2) //Greeting { name: '小徐' }
或者替换为类（类的本质也是function）：
class Greeting {
constructor(name) {
this.name = name;
}
}
// new 的写法
const instance = new Greeting('小徐');
l(instance) //Greeting { name: '小徐' }
// Reflect.construct 的写法
const instance2 = Reflect.construct(Greeting, ['小徐']);
l(instance2) //Greeting { name: '小徐' }
如果Reflect.construct()方法的第一个参数不是函数（或者类），会报错。
Reflect.getPrototypeOf(obj)
Reflect.getPrototypeOf方法用于读取对象的__proto__属性，对应Object.getPrototypeOf(obj)。
const myObj = new FancyThing();
// 旧写法
Object.getPrototypeOf(myObj) === FancyThing.prototype;
// 新写法
Reflect.getPrototypeOf(myObj) === FancyThing.prototype;
Reflect.getPrototypeOf和Object.getPrototypeOf的一个区别是，如果参数不是对象，Object.getPrototypeOf会将这个参数转为对象，然后再运行，而Reflect.getPrototypeOf会报错。
l(Object.getPrototypeOf(1)) // Number {[[PrimitiveValue]]: 0}
// {}
Reflect.getPrototypeOf(1) // 报错
// TypeError: Reflect.getPrototypeOf called on non-object
Reflect.setPrototypeOf(obj, newProto)
Reflect.setPrototypeOf方法用于设置目标对象的原型（prototype），对应Object.setPrototypeOf(obj, newProto)方法。它返回一个布尔值，表示是否设置成功。
const myObj = {};
// 旧写法
Object.setPrototypeOf(myObj, Array.prototype);
l(myObj.length) // 0
// 新写法
Reflect.setPrototypeOf(myObj, Array.prototype);
l(myObj.length) // 0
如果无法设置目标对象的原型（比如，目标对象禁止扩展），Reflect.setPrototypeOf方法返回false。
l(Reflect.setPrototypeOf({}, null))
// true
l(Reflect.setPrototypeOf(Object.freeze({}), null))
// false
如果第一个参数不是对象，Object.setPrototypeOf会返回第一个参数本身，而Reflect.setPrototypeOf会报错。
l(Object.setPrototypeOf(1, {}))
// 1
l(Reflect.setPrototypeOf(1, {}))
// TypeError: Reflect.setPrototypeOf called on non-object
如果第一个参数是undefined或null，Object.setPrototypeOf和Reflect.setPrototypeOf都会报错。
Object.setPrototypeOf(null, {})
// TypeError: Object.setPrototypeOf called on null or undefined
Object.setPrototypeOf(undefined, {})
// TypeError: Object.setPrototypeOf called on null or undefined
Reflect.setPrototypeOf(null, {})
// TypeError: Reflect.setPrototypeOf called on non-object
Reflect.setPrototypeOf(undefined, {})
// TypeError: Reflect.setPrototypeOf called on non-object
Reflect.apply(func, thisArg, args)
Reflect.apply方法等同于Function.prototype.apply.call(func, thisArg, args)，用于绑定this对象后执行给定函数。
一般来说，如果要绑定一个函数的this对象，可以这样写fn.apply(obj, args)，但是如果函数定义了自己的apply方法，就只能写成Function.prototype.apply.call(fn, obj, args)，采用Reflect对象可以简化这种操作。
const ages = [11, 33, 12, 54, 18, 96];
// 旧写法
const youngest = Math.min.apply(Math, ages);
const oldest = Math.max.apply(Math, ages);
const type = Object.prototype.toString.call(youngest);
l(youngest) //11
l(oldest) //96
l(type) //[object Number]
// 新写法
const youngest2 = Reflect.apply(Math.min, Math, ages);
const oldest2 = Reflect.apply(Math.max, Math, ages);
const type2 = Reflect.apply(Object.prototype.toString, youngest2, []);
l(youngest2) //11
l(oldest2) //96
l(type2) //[object Number]
Reflect.defineProperty(target, propertyKey, attributes)
Reflect.defineProperty方法基本等同于Object.defineProperty，用来为对象定义属性。未来，后者会被逐渐废除，请从现在开始就使用Reflect.defineProperty代替它。
function MyDate() {
/*…*/
}
// 旧写法
Object.defineProperty(MyDate, 'now', {
value: () => Date.now()
});
l(MyDate.now()) //1713506061150
// 新写法
Reflect.defineProperty(MyDate, 'now', {
value: () => Date.now()
});
l(MyDate.now()) //1713506061155
如果Reflect.defineProperty的第一个参数不是对象，就会抛出错误，比如Reflect.defineProperty(1, ‘foo’)。
这个方法可以与Proxy.defineProperty配合使用。
const p = new Proxy({}, {
defineProperty(target, prop, descriptor) {
console.log(descriptor);
return Reflect.defineProperty(target, prop, descriptor);
}
});
p.names = 'xiaoxu';
// {
// value: 'xiaoxu',
// writable: true,
// enumerable: true,
// configurable: true
// }
l(p.names) // "xiaoxu"
上面代码中，Proxy.defineProperty对属性赋值设置了拦截，然后使用Reflect.defineProperty完成了赋值。
Reflect.getOwnPropertyDescriptor(target, propertyKey)
Reflect.getOwnPropertyDescriptor基本等同于Object.getOwnPropertyDescriptor，用于得到指定属性的描述对象，将来会替代掉后者。
var myObject = {};
Object.defineProperty(myObject, 'hidden', {
value: true,
enumerable: false,
});
// 旧写法
var theDescriptor = Object.getOwnPropertyDescriptor(myObject, 'hidden');
l(theDescriptor)
// {
// value: true,
// writable: false,
// enumerable: false,
// configurable: false
// }
// 新写法
var theDescriptor2 = Reflect.getOwnPropertyDescriptor(myObject, 'hidden');
l(theDescriptor2)
// {
// value: true,
// writable: false,
// enumerable: false,
// configurable: false
// }
Reflect.getOwnPropertyDescriptor和Object.getOwnPropertyDescriptor的一个区别是，如果第一个参数不是对象，Object.getOwnPropertyDescriptor(1, ‘foo’)不报错，返回undefined，而Reflect.getOwnPropertyDescriptor(1, ‘foo’)会抛出错误，表示参数非法。
Reflect.isExtensible (target)
Reflect.isExtensible方法对应Object.isExtensible，返回一个布尔值，表示当前对象是否可扩展。
const myObject = {};
// 旧写法
l(Object.isExtensible(myObject)) // true
// 新写法
l(Reflect.isExtensible(myObject)) // true
如果参数不是对象，Object.isExtensible会返回false，因为非对象本来就是不可扩展的，而Reflect.isExtensible会报错。
l(Object.isExtensible(1)) // false
Reflect.isExtensible(1) // 报错
// TypeError: Reflect.isExtensible called on non-object
Reflect.preventExtensions(target)
Reflect.preventExtensions对应Object.preventExtensions方法，用于让一个对象变为不可扩展。它返回一个布尔值，表示是否操作成功。
var myObject = {};
// 旧写法
l(Object.preventExtensions(myObject)) // {}
// 新写法
l(Reflect.preventExtensions(myObject)) // true
如果参数不是对象，Object.preventExtensions在 ES5 环境报错，在 ES6 环境返回传入的参数，而Reflect.preventExtensions会报错。
// ES5 环境
Object.preventExtensions(1) // 报错
// ES6 环境
Object.preventExtensions(1) // 1
// 新写法
Reflect.preventExtensions(1) // 报错
Reflect.ownKeys (target)
Reflect.ownKeys方法用于返回对象的所有属性，基本等同于Object.getOwnPropertyNames与Object.getOwnPropertySymbols之和。
var myObject = {
names: 1,
age: 2,
[Symbol.for('num')]: 3,
[Symbol.for('nums')]: 4,
};
// 旧写法
l(Object.getOwnPropertyNames(myObject))
// [ 'names', 'age' ]
l(Object.getOwnPropertySymbols(myObject))
// [ Symbol(num), Symbol(nums) ]
// 新写法
l(Reflect.ownKeys(myObject))
// [ 'names', 'age', Symbol(num), Symbol(nums) ]
（3）实例：使用Proxy实现观察者模式
观察者模式（Observer mode）指的是函数自动观察数据对象，一旦对象有变化，函数就会自动执行。
class observable {
constructor(observableObj) {
this.observableObj = observableObj;
this.namesTemp = observableObj.name;
this.age = observableObj.age;
this.observers = []
this.index = 0;
this.update = this.update.bind(this);
this.attach = this.attach.bind(this);
}
attach = (observer) => {
if(!(observer instanceof observe))
throw new TypeError("observer type error.");
this.observers[this.index++] = observer;
}
update = (value) => {
this.namesTemp = value;
if(value != "小徐" && value != undefined) {
this.observers.forEach(observer => {
if(observer != null && observer != undefined) {
observer.observeFunc(this);
}
});
}
}
set names(value) {
this.update(value);
}
}
class observe {
constructor(fnc){
this.observeFunc = fnc;
}
}
const person = new observable({
name: '小徐',
age: 20
});
person.attach(new observe(print));
function print(observableObjIns) {
console.log(`观察者接收到通知：` +
`${observableObjIns.namesTemp}, ${observableObjIns.age}`)
}
person.names = '小李';
// person.update();
// 输出
// 观察者接收到通知：小李, 20
person.names = 'xiaoli';
// 观察者接收到通知：xiaoli, 20
person.names = '小徐';
// 无输出
上述观察者模式实现的方式是通过set方法的属性赋值来调用update方法进行通知的，所以一旦使用了person.names = 'xxx’的方式，就会相应的做出通知处理。
下面，使用 Proxy 写一个观察者模式的最简单实现，即实现observable和observe这两个函数。思路是observable函数返回一个原始对象的Proxy代理，拦截赋值操作，触发充当观察者的各个函数。
const queuedObservers = new Set();
const observe = fn => queuedObservers.add(fn);
const observable = obj => new Proxy(obj, {set});
function set(target, key, value, receiver) {
const result = Reflect.set(target, key, value, receiver);
queuedObservers.forEach(observer => observer(key, value));
return result;
}
function print(key, value){
console.log(`开始赋值: ${key}, ${value}`)
}
observe(print)
class Apple {
names = "xiaoxu";
age = 18;
}
let a = observable(new Apple());
a.names = "xiaoli";
// 开始赋值: names, xiaoli
上面代码中，先定义了一个Set集合，所有观察者函数都放进这个集合。然后，observable函数返回原始对象的代理，拦截赋值操作。拦截函数set之中，会自动执行所有观察者。
48
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
