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