Reflect

Reflect 是 ES6 引入的一个内置对象，它提供了一组与 JavaScript 内部方法（internal methods）一一对应的静态函数。这些内部方法是 JavaScript 引擎在执行各种对象操作时实际调用的底层逻辑，例如属性查找、赋值等。

1. Reflect概述

Reflect对象与Proxy对象一样，也是 ES6 为了操作对象而提供的新 API。Reflect对象的设计目的有这样几个。

（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对象以后，很多操作会更易读。

// 老写法
Function.prototype.apply.call(Math.floor, undefined, [1.75]) // 1

// 新写法
Reflect.apply(Math.floor, undefined, [1.75]) // 1

2. Reflect的静态方法

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 = {
  foo: 1,
  bar: 2,
  get baz() {
    return this.foo + this.bar;
  },
}

Reflect.get(myObject, 'foo') // 1
Reflect.get(myObject, 'bar') // 2
Reflect.get(myObject, 'baz') // 3

如果name属性部署了读取函数（getter），则读取函数的this绑定receiver。

var myObject = {
  foo: 1,
  bar: 2,
  get baz() {
    return this.foo + this.bar;
  },
};

var myReceiverObject = {
  foo: 4,
  bar: 4,
};

Reflect.get(myObject, 'baz', myReceiverObject) // 8

如果第一个参数不是对象，Reflect.get方法会报错。

Reflect.get(1, 'foo') // 报错
Reflect.get(false, 'foo') // 报错

Reflect.set(target, name, value, receiver)

Reflect.set方法设置target对象的name属性等于value。

var myObject = {
  foo: 1,
  set bar(value) {
    return this.foo = value;
  },
}

myObject.foo // 1

Reflect.set(myObject, 'foo', 2);
myObject.foo // 2

Reflect.set(myObject, 'bar', 3)
myObject.foo // 3

如果name属性设置了赋值函数，则赋值函数的this绑定receiver。

var myObject = {
  foo: 4,
  set bar(value) {
    return this.foo = value;
  },
};

var myReceiverObject = {
  foo: 0,
};

Reflect.set(myObject, 'bar', 1, myReceiverObject);
myObject.foo // 4
myReceiverObject.foo // 1

注意，如果 Proxy对象和 Reflect对象联合使用，前者拦截赋值操作，后者完成赋值的默认行为，而且传入了receiver，那么Reflect.set会触发Proxy.defineProperty拦截。

let p = {
  a: 'a'
};

let handler = {
  set(target, key, value, receiver) {
    console.log('set');
    Reflect.set(target, key, value, receiver)
  },
  defineProperty(target, key, attribute) {
    console.log('defineProperty');
    Reflect.defineProperty(target, key, attribute);
  }
};

let obj = new Proxy(p, handler);
obj.a = 'A';
// set
// 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');
    Reflect.set(target, key, value)
  },
  defineProperty(target, key, attribute) {
    console.log('defineProperty');
    Reflect.defineProperty(target, key, attribute);
  }
};

let obj = new Proxy(p, handler);
obj.a = 'A';
// set

如果第一个参数不是对象，Reflect.set会报错。

Reflect.set(1, 'foo', {}) // 报错
Reflect.set(false, 'foo', {}) // 报错

Reflect.has(obj, name)

Reflect.has方法对应name in obj里面的in运算符。

var myObject = {
  foo: 1,
};

// 旧写法
'foo' in myObject // true

// 新写法
Reflect.has(myObject, 'foo') // true

如果Reflect.has()方法的第一个参数不是对象，会报错。

Reflect.deleteProperty(obj, name)

Reflect.deleteProperty方法等同于delete obj[name]，用于删除对象的属性。

const myObj = { foo: 'bar' };

// 旧写法
delete myObj.foo;

// 新写法
Reflect.deleteProperty(myObj, 'foo');

该方法返回一个布尔值。如果删除成功，或者被删除的属性不存在，返回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('张三');

// Reflect.construct 的写法
const instance = Reflect.construct(Greeting, ['张三']);

如果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会报错。

Object.getPrototypeOf(1) // Number {[[PrimitiveValue]]: 0}
Reflect.getPrototypeOf(1) // 报错

Reflect.setPrototypeOf(obj, newProto)

Reflect.setPrototypeOf方法用于设置目标对象的原型（prototype），对应Object.setPrototypeOf(obj, newProto)方法。它返回一个布尔值，表示是否设置成功。

const myObj = {};

// 旧写法
Object.setPrototypeOf(myObj, Array.prototype);

// 新写法
Reflect.setPrototypeOf(myObj, Array.prototype);

myObj.length // 0

如果无法设置目标对象的原型（比如，目标对象禁止扩展），Reflect.setPrototypeOf方法返回false。

Reflect.setPrototypeOf({}, null)
// true
Reflect.setPrototypeOf(Object.freeze({}), null)
// false

如果第一个参数不是对象，Object.setPrototypeOf会返回第一个参数本身，而Reflect.setPrototypeOf会报错。

Object.setPrototypeOf(1, {})
// 1

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

Reflect.setPrototypeOf(null, {})
// 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);

// 新写法
const youngest = Reflect.apply(Math.min, Math, ages);
const oldest = Reflect.apply(Math.max, Math, ages);
const type = Reflect.apply(Object.prototype.toString, youngest, []);

Reflect.defineProperty(target, propertyKey, attributes)

Reflect.defineProperty方法基本等同于Object.defineProperty，用来为对象定义属性。未来，后者会被逐渐废除，请从现在开始就使用Reflect.defineProperty代替它。

function MyDate() {
  /*…*/
}

// 旧写法
Object.defineProperty(MyDate, 'now', {
  value: () => Date.now()
});

// 新写法
Reflect.defineProperty(MyDate, 'now', {
  value: () => Date.now()
});

如果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.foo = 'bar';
// {value: "bar", writable: true, enumerable: true, configurable: true}

p.foo // "bar"

上面代码中，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');

// 新写法
var theDescriptor = Reflect.getOwnPropertyDescriptor(myObject, 'hidden');

Reflect.getOwnPropertyDescriptor和Object.getOwnPropertyDescriptor的一个区别是，如果第一个参数不是对象，Object.getOwnPropertyDescriptor(1, 'foo')不报错，返回undefined，而Reflect.getOwnPropertyDescriptor(1, 'foo')会抛出错误，表示参数非法。

Reflect.isExtensible (target)

Reflect.isExtensible方法对应Object.isExtensible，返回一个布尔值，表示当前对象是否可扩展。

const myObject = {};

// 旧写法
Object.isExtensible(myObject) // true

// 新写法
Reflect.isExtensible(myObject) // true

如果参数不是对象，Object.isExtensible会返回false，因为非对象本来就是不可扩展的，而Reflect.isExtensible会报错。

Object.isExtensible(1) // false
Reflect.isExtensible(1) // 报错

Reflect.preventExtensions(target)

Reflect.preventExtensions对应Object.preventExtensions方法，用于让一个对象变为不可扩展。它返回一个布尔值，表示是否操作成功。

var myObject = {};

// 旧写法
Object.preventExtensions(myObject) // Object {}

// 新写法
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 = {
  foo: 1,
  bar: 2,
  [Symbol.for('baz')]: 3,
  [Symbol.for('bing')]: 4,
};

// 旧写法
Object.getOwnPropertyNames(myObject)
// ['foo', 'bar']

Object.getOwnPropertySymbols(myObject)
//[Symbol(baz), Symbol(bing)]

// 新写法
Reflect.ownKeys(myObject)
// ['foo', 'bar', Symbol(baz), Symbol(bing)]

如果Reflect.ownKeys()方法的第一个参数不是对象，会报错。

3. 使用 Proxy 实现观察者模式

观察者模式（Observer mode）指的是函数自动观察数据对象，一旦对象有变化，函数就会自动执行。

const person = observable({
  name: '张三',
  age: 20
});

function print() {
  console.log(`${person.name}, ${person.age}`)
}

observe(print);
person.name = '李四';
// 输出
// 李四, 20

上面代码中，数据对象person是观察目标，函数print是观察者。一旦数据对象发生变化，print就会自动执行。

下面，使用 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());
  return result;
}

上面代码中，先定义了一个Set集合，所有观察者函数都放进这个集合。然后，observable函数返回原始对象的代理，拦截赋值操作。拦截函数set之中，会自动执行所有观察者。

4. 结论

Proxy 的好伙伴: Reflect 是为 Proxy 量身定做的，它提供了一套安全、可靠的方式来执行被拦截操作的默认行为。
函数式编程风格: 它将命令式的对象操作转变为函数调用，使代码风格更加统一。
更健壮的错误处理: 通过返回布尔值而不是抛出错误，Reflect 让你能用更流畅的方式（如 if 语句）来处理操作失败的情况。

5. 常见问题 (FAQ)

5.1 既然有 `Object` 上的方法，为什么还需要 `Reflect`？

问题描述: 很多 Reflect 的方法在 Object 上都有同名或类似功能的方法，例如 Reflect.defineProperty 和 Object.defineProperty，为什么需要重复？

解答: Reflect 旨在成为未来语言内部方法的统一存放地，并提供更优的开发者体验。

更合理的返回值：Reflect.defineProperty 在失败时返回 false，而 Object.defineProperty 会抛出 TypeError。前者允许使用简单的条件判断来处理失败情况，而后者则需要 try...catch 块。
函数式替代操作符：Reflect.has 和 Reflect.deleteProperty 将 in 和 delete 这两个命令式操作符变成了函数调用，使代码风格更统一。
职责分离：Object 的主要职责是作为所有对象的基类和构造函数，而 Reflect 则专注于提供一套与语言底层操作对应的 API，这种分离使 API 设计更加清晰。

5.2 在 `Proxy` 的 `handler` 中，为什么必须使用 `Reflect`？

问题描述: 在 Proxy 的 handler 中，我可以直接操作 target 对象，比如 target[prop]，为什么推荐使用 Reflect.get(target, prop, receiver)？

解答: 这是 Reflect 最核心的用途。在 Proxy 陷阱中，使用 Reflect 不是强制的，但却是 最佳实践，主要原因是为了正确处理 this 指向（即 receiver）。

示例：

javascript

const target = {
  _name: 'Alice',
  get name() {
    return this._name;
  }
};

const handler = {
  get(target, prop, receiver) {
    console.log(`Getting ${prop}`);
    // 错误的做法：直接访问 target，`this` 指向 target
    // return target[prop];

    // 正确的做法：使用 Reflect.get，并将 receiver 传入
    // 这能确保当通过代理访问 getter 时，getter 内部的 `this` 指向代理对象本身
    return Reflect.get(target, prop, receiver);
  }
};

const proxy = new Proxy(target, handler);

// 如果 handler 中用 target[prop]，`proxy.name` 访问 `name` 这个 getter 时，
// getter 内部的 `this` 是 `target`，`this._name` 没问题。
// 但如果 getter 依赖于代理的其他行为，就会出错。
// 使用 Reflect.get 并传入 receiver，可以保证 `this` 永远指向触发操作的对象（即 proxy），
// 从而确保代理行为的一致性和可预测性。
console.log(proxy.name); // 输出: "Getting name", "Alice"

简而言之，Reflect 确保了在代理场景下，操作的默认行为能够被正确地“转发”到目标对象，同时保留了正确的上下文（receiver）。

5.3 `Reflect.has` 的 `non-object` 错误是什么？

问题描述: 调用 Reflect.has() 时，有时会遇到 TypeError: Reflect.has called on non-object 的错误。

原因: Reflect 的许多方法（包括 Reflect.has）的第一个参数 target 必须是一个对象。如果你传入了原始类型的值（如 null, undefined, number, string, boolean），就会抛出这个类型错误。

解决方案: 在调用 Reflect.has() 之前，确保第一个参数是对象。

javascript

const target = null;
const prop = 'toString';

if (typeof target === 'object' && target !== null) {
  console.log(Reflect.has(target, prop));
} else {
  console.error('Target is not an object'); // 错误会在这里被捕获
}

视觉装饰

现代布局系统

动画与变换

响应式设计

数据类型扩展

事件循环和异步

类与继承

元编程

模块化

基础

自定义组件库

基础

Hooks

Reflect

1. Reflect概述

2. Reflect的静态方法

Reflect.get(target, name, receiver)

Reflect.set(target, name, value, receiver)

Reflect.has(obj, name)

Reflect.deleteProperty(obj, name)

Reflect.construct(target, args)

Reflect.getPrototypeOf(obj)

Reflect.setPrototypeOf(obj, newProto)

Reflect.apply(func, thisArg, args)

Reflect.defineProperty(target, propertyKey, attributes)

Reflect.getOwnPropertyDescriptor(target, propertyKey)

Reflect.isExtensible (target)

Reflect.preventExtensions(target)

Reflect.ownKeys (target)

3. 使用 Proxy 实现观察者模式

4. 结论

5. 常见问题 (FAQ)

5.1 既然有 `Object` 上的方法，为什么还需要 `Reflect`？

5.2 在 `Proxy` 的 `handler` 中，为什么必须使用 `Reflect`？

5.3 `Reflect.has` 的 `non-object` 错误是什么？

Hooks

Reflect ​

1. Reflect概述 ​

2. Reflect的静态方法 ​

Reflect.get(target, name, receiver) ​

Reflect.set(target, name, value, receiver) ​

Reflect.has(obj, name) ​

Reflect.deleteProperty(obj, name) ​

Reflect.construct(target, args) ​

Reflect.getPrototypeOf(obj) ​

Reflect.setPrototypeOf(obj, newProto) ​

Reflect.apply(func, thisArg, args) ​

Reflect.defineProperty(target, propertyKey, attributes) ​

Reflect.getOwnPropertyDescriptor(target, propertyKey) ​

Reflect.isExtensible (target) ​

Reflect.preventExtensions(target) ​

Reflect.ownKeys (target) ​

3. 使用 Proxy 实现观察者模式 ​

4. 结论 ​

5. 常见问题 (FAQ) ​

5.1 既然有 Object 上的方法，为什么还需要 Reflect？ ​

5.2 在 Proxy 的 handler 中，为什么必须使用 Reflect？ ​

5.3 Reflect.has 的 non-object 错误是什么？ ​

Reflect

1. Reflect概述

2. Reflect的静态方法

Reflect.get(target, name, receiver)

Reflect.set(target, name, value, receiver)

Reflect.has(obj, name)

Reflect.deleteProperty(obj, name)

Reflect.construct(target, args)

Reflect.getPrototypeOf(obj)

Reflect.setPrototypeOf(obj, newProto)

Reflect.apply(func, thisArg, args)

Reflect.defineProperty(target, propertyKey, attributes)

Reflect.getOwnPropertyDescriptor(target, propertyKey)

Reflect.isExtensible (target)

Reflect.preventExtensions(target)

Reflect.ownKeys (target)

3. 使用 Proxy 实现观察者模式

4. 结论

5. 常见问题 (FAQ)

5.1 既然有 `Object` 上的方法，为什么还需要 `Reflect`？

5.2 在 `Proxy` 的 `handler` 中，为什么必须使用 `Reflect`？

5.3 `Reflect.has` 的 `non-object` 错误是什么？