# reflect 的 13 个方法

# Reflect 对象的作用

Reflect 对象是 ES6 中新增的内置对象，用于实现一些与对象相关的操作。它提供了一系列的静态方法，这些方法的行为与一些对象的默认行为相对应，比如 get 方法对应属性读取、set 方法对应属性赋值、has 方法对应 in 运算符等等。Reflect 对象的主要作用如下：

# 将一些 Object 对象的方法，转换成函数式的写法

比如，Object.defineProperty 方法用于定义对象属性，它的使用方式如下：

Object.defineProperty(obj, prop, descriptor)

其中，obj 表示要定义属性的对象，prop 表示要定义的属性名称，descriptor 是一个对象，用于描述该属性的各种特性，比如值、是否可枚举、是否可写等。使用 Reflect 对象，可以将上面的代码转换为如下的形式：

Reflect.defineProperty(obj, prop, descriptor)

这种写法更加简洁明了，且更符合函数式编程的思想。

# 提供了一些与 Proxy 对象配合使用的方法

Proxy 对象是 ES6 中另一个新增的内置对象，用于代理某个对象，可以在该对象的读取、赋值、方法调用等操作前后进行一些自定义的操作。

Reflect 对象提供了一些方法，可以方便地实现 Proxy 对象的一些自定义操作，比如 get、set、has、apply 等方法。

# 可以用于实现元编程

元编程是一种编程范式，指的是编写能够操作代码本身的程序。

JavaScript 是一种动态语言，支持运行时修改对象属性、方法等特性，这为元编程提供了很好的基础。

Reflect 对象提供了一些方法，可以方便地实现一些元编程的功能，比如对象的扩展、属性拦截等。

# Reflect 对象的方法

Reflect 对象提供了一系列的静态方法，这些方法的行为与一些对象的默认行为相对应，比如 get 方法对应属性读取、set 方法对应属性赋值、has 方法对应 in 运算符等等。下面是一些 Reflect 对象的方法介绍：

# Reflect.apply(target, thisArg, args)

该方法用于调用一个函数，并将 this 绑定到指定的 thisArg 上。其中，target 表示要调用的函数，thisArg 表示要绑定的 this 对象，args 表示传递给函数的参数。例如，我们有一个函数 add，接受两个参数，用于将两个数字相加：

function add(a, b) {

  return a + b;

}

我们可以使用 Reflect.apply 方法来调用这个函数，并将 this 绑定到指定的对象上：

const result = Reflect.apply(add, {x: 1, y: 2}, [3, 4]);

console.log(result); // 7

上面的代码中， Reflect.apply 方法将 add 函数的 this 绑定到 {x: 1, y: 2} 上，并传递了参数 [3, 4]。因此，函数 add 将 3 和 4 相加得到 7，最终结果为 7。

# Reflect.construct(target, args, newTarget)

该方法用于创建一个新对象，并将指定的构造函数作为构造函数，传递指定的参数 args，以及指定的 newTarget。其中，target 表示要创建的构造函数，args 表示传递给构造函数的参数，newTarget 表示要使用的构造函数。

例如，我们有一个 Person 类，接受两个参数，用于创建一个人的实例：

class Person {

  constructor(name, age) {

    this.name = name;

    this.age = age;

  }

}

我们可以使用 Reflect.construct 方法来创建一个 Person 实例：

const person = Reflect.construct(Person, ['Tom', 18], Person);

console.log(person); // Person { name: 'Tom', age: 18 }

上面的代码中， Reflect.construct 方法将 Person 作为构造函数，传递参数 ['Tom', 18]，并将 Person 作为 newTarget 传递。因此， Reflect.construct 方法创建了一个新的 Person 实例，该实例的 name 为 'Tom'，age 为 18。

# Reflect.defineProperty(target, propertyKey, attributes)

该方法用于定义一个对象的属性。其中，target 表示要定义属性的对象，propertyKey 表示要定义的属性名称，attributes 是一个对象，用于描述该属性的各种特性，比如值、是否可枚举、是否可写等。

例如，我们有一个 person 对象，需要给它定义一个 age 属性：

const person = {

  name: 'Tom'

};

我们可以使用 Reflect.defineProperty 方法来定义 age 属性：

Reflect.defineProperty(person, 'age', {

  value: 18,

  writable: false,

  enumerable: true,

  configurable: true

});

console.log(person.age); // 18

上面的代码中， Reflect.defineProperty 方法将 person 作为 target， 'age' 作为 propertyKey，以及属性的特性作为 attributes。因此，person 对象拥有了一个名为 age 的属性，其值为 18，且该属性不可写，可枚举，可配置。

# Reflect.deleteProperty(target, propertyKey)

该方法用于删除一个对象的属性。其中，target 表示要删除属性的对象，propertyKey 表示要删除的属性名称。

例如，我们有一个 person 对象，拥有 name 和 age 两个属性：

const person = {

  name: 'Tom',

  age: 18

};

我们可以使用 Reflect.deleteProperty 方法来删除 age 属性：

Reflect.deleteProperty(person, 'age');

console.log(person); // { name: 'Tom' }

上面的代码中， Reflect.deleteProperty 方法将 person 作为 target， 'age' 作为 propertyKey。因此，person 对象的 age 属性被删除了，最终结果为 {name: 'Tom'} 。

# Reflect.get(target, propertyKey, receiver)

该方法用于获取一个对象的属性值。其中，target 表示要获取属性值的对象，propertyKey 表示要获取的属性名称，receiver 表示要在哪个对象上调用该方法。

例如，我们有一个 person 对象，拥有 name 和 age 两个属性：

const person = {

  name: 'Tom',

  age: 18

};

我们可以使用 Reflect.get 方法来获取 name 属性的值：

const name = Reflect.get(person, 'name');

console.log(name); // Tom

上面的代码中， Reflect.get 方法将 person 作为 target， 'name' 作为 propertyKey，没有指定 receiver。因此， Reflect.get 方法获取了 person 对象的 name 属性的值，最终结果为 'Tom'。

# Reflect.getOwnPropertyDescriptor(target, propertyKey)

该方法用于获取一个对象的属性描述符。其中，target 表示要获取属性描述符的对象，propertyKey 表示要获取的属性名称。

例如，我们有一个 person 对象，拥有 name 和 age 两个属性：

const person = {

  name: 'Tom',

  age: 18

};

我们可以使用 Reflect.getOwnPropertyDescriptor 方法来获取 name 属性的描述符：

const descriptor = Reflect.getOwnPropertyDescriptor(person, 'name');

console.log(descriptor);

// {

//   value: 'Tom',

//   writable: true,

//   enumerable: true,

//   configurable: true

// }

上面的代码中， Reflect.getOwnPropertyDescriptor 方法将 person 作为 target， 'name' 作为 propertyKey。因此， Reflect.getOwnPropertyDescriptor 方法获取了 person 对象的 name 属性的描述符，最终结果为一个包含属性值、可写性、可枚举性、可配置性等特性的对象。

# Reflect.getPrototypeOf(target)

该方法用于获取一个对象的原型。其中，target 表示要获取原型的对象。

例如，我们有一个 person 对象，它是由 Person 类创建的实例：

class Person {

  constructor(name, age) {

    this.name = name;

    this.age = age;

  }

}

const person = new Person('Tom', 18);

我们可以使用 Reflect.getPrototypeOf 方法来获取 person 对象的原型：

const prototype = Reflect.getPrototypeOf(person);

console.log(prototype); // Person {}

上面的代码中， Reflect.getPrototypeOf 方法将 person 作为 target。因此， Reflect.getPrototypeOf 方法获取了 person 对象的原型，最终结果为 Person 类的原型对象。

# Reflect.has(target, propertyKey)

该方法用于检查一个对象是否包含指定的属性。其中，target 表示要检查的对象，propertyKey 表示要检查的属性名称。

例如，我们有一个 person 对象，拥有 name 和 age 两个属性：

const person = {

  name: 'Tom',

  age: 18

};

我们可以使用 Reflect.has 方法来检查 person 对象是否包含 name 属性：

const hasName = Reflect.has(person, 'name');

console.log(hasName); // true

上面的代码中， Reflect.has 方法将 person 作为 target， 'name' 作为 propertyKey。因此，Reflect.has 方法检查了 person 对象是否包含 name 属性，最终结果为 true。

# Reflect.isExtensible(target)

该方法用于检查一个对象是否可扩展。其中，target 表示要检查的对象。

例如，我们有一个 person 对象：

const person = {

  name: 'Tom',

  age: 18

};

我们可以使用 Reflect.isExtensible 方法来检查 person 对象是否可扩展：

const isExtensible = Reflect.isExtensible(person);

console.log(isExtensible); // true

上面的代码中， Reflect.isExtensible 方法将 person 作为 target。因此， Reflect.isExtensible 方法检查了 person 对象是否可扩展，最终结果为 true。

# Reflect.ownKeys(target)

该方法用于获取一个对象自身的所有属性名，包括不可枚举属性。其中，target 表示要获取属性名的对象。

例如，我们有一个 person 对象，拥有 name 和 age 两个属性：

const person = {

  name: 'Tom',

  age: 18

};

Object.defineProperty(person, 'gender', {

  value: 'male',

  writable: false,

  enumerable: false,

  configurable: false

});

我们可以使用 Reflect.ownKeys 方法来获取 person 对象自身的所有属性名：

const keys = Reflect.ownKeys(person);

console.log(keys); // ['name', 'age', 'gender']

上面的代码中，Reflect.ownKeys 方法将 person 作为 target。因此，Reflect.ownKeys 方法获取了 person 对象自身的所有属性名，最终结果为 ['name', 'age', 'gender'] 。

# Reflect.get () 当中的 receiver

在 es6 Proxy 中，推荐使用 Reflect.get 而不是 target[key] 。

# Reflect.get(target, prop, receiver) 以及 Proxy 中的 handler.get(target, prop, receiver) 这当中的 receiver 是什么？

直接摘抄 MDN 的说明

• Reflect.get(target, prop, receiver) 中的参数 receiver ：如果 target 对象中指定了 getter，receiver 则为 getter 调用时的 this 值。
• handler.get(target, prop, receiver) 中的参数 receiver ：Proxy 或者继承 Proxy 的对象。

# 参数 receiver 存在的意义

单独来看，我很难想出 receiver 参数的使用场景，甚至会认为这个参数没有存在的意义，但既然这么设计就一定有它存在的意义。先看下面的例子：

let People = new Proxy({

    _name: 'zky',

    get name() {

        return this._name

    }

}, {

    get: function (target, prop, receiver) {

        return target[prop]

    }

})

let Man = { _name: 'zky_man' }

Man.__proto__ = People // Man 继承 People

console.log(Man._name) // zky_man

console.log(Man.name) // zky

问题来了， Man 中已经存在 _name 属性，但这里 Man.name 返回的却是原型链上的 _name 属性，
原因很好解释： get name 中的 this 默认绑定为 People 。

那怎么解决这个问题呢？这里就该 receiver 上场了，修改上面的例子：

let People = new Proxy({

    _name: 'zky',

    get name() {

        return this._name

    }

}, {

    get: function (target, prop, receiver) {

        return Reflect.get(target, prop, receiver)

    }

})

let Man = { _name: 'zky_man' }

Man.__proto__ = People // Man 继承 People

console.log(Man._name) // zky_man

console.log(Man.name) // zky_man

let People = new Proxy({_name:'zky'},{

get:function(target,prop,receiver){ //receiver 指向的是 get 的调用者

    return Reflect.get(target,prop,receiver) // 调用 get name 函数时，this 被绑定到 receiver

  }

})

let Man = {

  _name:'zky_man',

  get name(){

    return this._name

  }

}

Man.__proto__ = People // Man 继承 People

console.log(Man._name) // zky_man

console.log(Man.name) // zky_man

到这里问题就已经完美解决了，这也就是 Reflect.get 比 target[key] 更好的原因。

调用 Man.name 时经过了以下几步

1. 被 proxy 拦截，调用 handler.get
2. handler.get 中传入的 receiver 参数指向调用者 -- Man
3. 调用 Reflect.get ，由于 target 中的 name 指定了 getter ， Reflect.get 自动将调用的 getter 函数的 this 绑定到 receiver ，也就是 Man